跳到主要内容

杂项

css 新特性​

  1. 选择器增强：
  • 属性选择器：支持更多的属性选择器，如属性值前缀、后缀、包含等。
  • 伪类选择器：引入了新的伪类选择器，如:nth-child()、:nth-of-type()等。
  1. 盒子模型：
  • 边框圆角（border-radius）：可以设置元素的边框圆角。
  • 阴影效果（box-shadow）：可以为元素添加阴影效果。
  • 盒子大小（box-sizing）：可以调整盒子模型的尺寸计算方式。
  1. 背景和渐变：
  • 线性渐变（linear-gradient）：可以创建水平或垂直方向的渐变背景。
  • 径向渐变（radial-gradient）：可以创建从一个中心点向外扩散的渐变背景。
  1. 文字和字体：
  • @font-face：允许在网页中引用自定义字体文件。
  • 文字阴影（text-shadow）：可以为文字添加阴影效果。
  • 多列文字（columns）：可以创建多列布局的文字。
  1. 过渡和动画：
  • 过渡效果（transition）：可以实现元素在不同状态之间的平滑过渡。
  • 关键帧动画（@keyframes）：可以定义动画的关键帧和动画效果。
  • 动画属性（animation）：用于指定动画的持续时间、重复次数等属性。
  1. 弹性布局（Flexbox）：
  • 引入了弹性布局模型，使元素在容器中的布局更加灵活和自适应。
  1. 响应式布局（Media Queries）：
  • 可以根据不同的媒体查询条件应用不同的样式，实现响应式布局。
  1. 变换和变形：
  • 2D变换（transform）：可以对元素进行平移、旋转、缩放等变换操作。
  • 3D变换（transform）：可以实现元素的三维空间变换效果。
  1. 过滤器（Filter）：
  • 可以应用各种视觉效果和图像处理效果，如模糊、亮度、对比度等。
  1. 多列布局（Multicolumn Layout）：
  • 可以将内容分为多列进行布局。

以上只是 CSS3 中的一些常见新特性，还有许多其他的新特性和模块，使得开发者可以更加灵活和高效地进行样式设计和布局。

新特性非常多，总结在下面

详情请看文档：资料

架构基础

  • 级联层
  • 嵌套
  • 作用域
  • 选择器 :is() 和 :where()
  • 选择器 :has()
  • 复杂的第 n-. 选择
  • CSS 三角函数
  • 子网格 subgrid

排版

  • 首字下沉
  • 均衡和美观

颜色

  • 高清色彩空间
  • color-mix() 函数
  • 相对颜色语法
  • 响应浅色或深色模式的 light-dark() 函数

响应式设计

  • 容器查询之尺寸查询
  • 容器查询之样式查询
  • 容器查询之状态查询
  • 更新媒体查询
  • 脚本媒体查询
  • 降低透明度的媒体查询
  • 媒体查询范围

交互动画

  • 视图过渡
  • 滚动驱动动效
  • 离散属性动画
  • @starting-style
  • overlay
  • 锚点定位
  • 动画合成
  • 缓动函数 linear()
  • Scrollend 事件
  • 滚动捕捉

样式隔离方式有哪些​

样式隔离意味着在一个复杂的前端应用中保持组件的样式私有化，使得不同组件之间的样式不会互相影响。以下是一些在前端开发中实现样式隔离的常见方式：

  1. CSS 模块（CSS Modules）

CSS 模块是一种在构建时将 CSS 类名局部作用域化的技术。每个类名都是独一无二的，通常通过添加哈希值来实现。当你导入一个 CSS 模块，会得到一个包含生成的类名的对象。这样可以确保样式的唯一性，并防止样式冲突。

  1. Shadow DOM

Shadow DOM 是 Web 组件规范的一部分，它允许将一段不受外界影响的 DOM 附加到元素上。在 Shadow DOM 中的样式是局部的，不会影响外部的文档样式。

  1. CSS-in-JS 库

CSS-in-JS 是一种技术，允许你用 JavaScript 编写 CSS，并在运行时生成唯一的类名。常见的库有 Styled-components、Emotion 等。这些库通常提供自动的样式隔离，并且还支持主题化和动态样式。

  1. 使用 BEM（Block Element Modifier）命名约定

BEM 是一种 CSS 命名方法，通过使用严格的命名规则来保持样式的模块化。通过将样式绑定到特定的类名上，这种方法有助于防止样式泄露。

  1. CSS Scoped

在 Vue.js 中，可以为 <style> 标签添加 scoped 属性，这将使用 Vue 的编译器来实现样式的作用域。虽然这不是一个标准的 Web 特性，但它在 Vue 生态系统中提供了很方便的样式隔离。

  1. 使用 iframe

将组件或部分页面放在 iframe 中可以提供非常强的样式和脚本隔离。尽管如此，iframe 通常不是最佳选择，因为它们可能导致性能问题，而且使得组件间的沟通变得更加困难。

  1. Web 组件

Web 组件利用了自定义元素和 Shadow DOM 来创建封装的、可复用的组件。在 Web 组件中，可以使用 Shadow DOM 实现真正的样式和脚本隔离。

  1. 封装的 CSS 架构

准确使用 CSS 选择器，避免使用全局标签选择器或基础类，而是使用更具体的类选择器可以部分隔离样式。此外，可以设置严格的 CSS 命名策略，不同模块使用不同的命名前缀，以避免名称冲突。

  1. PostCSS 插件

使用 PostCSS 插件来处理 CSS，可以自动添加前缀、变量等，从而实现隔离。例如，PostCSS 前缀插件可以自动为 CSS 类添加唯一的前缀。

各种方法有各自的优点和限制，选择哪种方法取决于项目的技术栈、团队的熟悉程度以及特定的项目需求。

避免全局样式污染？​

要避免全局样式污染，可以采取以下几种方式：

  1. 使用命名约定：给不同组件、模块或页面的样式类名添加特定的前缀，以确保它们的作用范围只在对应的组件、模块或页面内生效。例如，使用 BEM（Block Element Modifier）命名约定可以将样式类名划分为块、元素和修饰符，以实现更明确的样式隔离。

  2. 使用 CSS-in-JS：使用 CSS-in-JS 技术，将样式直接与组件绑定，可以避免全局样式的冲突。每个组件都有自己的样式定义，不会影响其他组件。

  3. 使用 CSS Modules：CSS Modules 是一种 CSS 模块化的解决方案，它通过将 CSS 文件与组件绑定，在构建过程中自动生成唯一的类名，从而实现样式的局部作用域。这样可以避免全局样式冲突。

  4. 使用作用域限定符：使用 CSS 预处理器（如 Sass 或 Less）的作用域限定符（如父选择器 &）来限制样式的作用范围。通过嵌套样式规则，并使用作用域限定符，可以确保样式仅应用于特定的父元素。

  5. 使用样式重置/规范：使用样式重置或规范库，如 Normalize.css，可以消除浏览器默认样式的差异，以确保在不同浏览器下呈现一致的样式，并避免全局样式污染。

  6. 使用模块化开发框架：使用诸如 React、Vue 或 Angular 等模块化开发框架，它们提供了组件化的开发模式，每个组件具有独立的样式作用域，可以避免全局样式的冲突。

有哪些工具库可以帮助避免全局样式污染

以下是一些常用的工具库和技术，可以帮助避免全局样式污染：

  1. CSS Modules：CSS Modules 是一种 CSS 模块化的解决方案，可以将样式文件与组件绑定，生成唯一的类名，实现样式的局部作用域。常见的 CSS Modules 实现包括 webpack 的 css-loader 和 vue-style-loader。

  2. CSS-in-JS：CSS-in-JS 是一种将 CSS 样式直接写在 JavaScript 代码中的技术，通过将样式与组件绑定，可以实现样式的局部作用域。常见的 CSS-in-JS 工具库有 styled-components、Emotion、Vue的 scoped CSS 等。

  3. BEM（Block Element Modifier）命名约定：BEM 是一种命名约定，通过给样式类名添加特定前缀来区分不同组件或元素的样式。使用 BEM 命名约定可以避免样式类名冲突，实现样式的隔离。

  4. CSS Reset/Normalize：CSS Reset 或 Normalize.css 是一种重置或规范化浏览器默认样式的方法，通过统一浏览器样式差异，避免全局样式污染。

  5. PostCSS 插件：PostCSS 是一个强大的 CSS 处理工具，可以通过使用各种插件来帮助避免全局样式污染。例如，postcss-modules 可以将样式文件转换为 CSS Modules 格式，postcss-preset-env 可以根据目标浏览器自动添加前缀。

  6. CSS 预处理器：CSS 预处理器如 Sass 或 Less 提供了作用域限定符和嵌套样式规则的功能，可以帮助限制样式的作用范围，避免全局样式冲突。

这些工具库和技术可以根据项目需求选择适合的方式来避免全局样式污染。每种方式都有其优势和适用场景，根据个人偏好和项目特点选择合适的工具库和技术进行开发。

postcss 是什么，作用是啥？​

PostCSS 是一个用 JavaScript 编写的工具，用于对 CSS 进行转换和处理。它可以通过插件机制对 CSS 进行各种自定义的转换操作，从而扩展 CSS 的功能和语法。

PostCSS 的作用主要有以下几个方面：

  1. CSS 预处理器：PostCSS 可以像 Sass 或 Less 一样用于编写更简洁、可维护的 CSS 代码。通过使用类似于变量、嵌套、Mixin 等功能，可以提高 CSS 开发的效率和灵活性。

  2. 自动添加浏览器前缀：PostCSS 可以根据配置自动为 CSS 属性添加适应不同浏览器的前缀，解决浏览器兼容性问题。

  3. CSS 模块化：PostCSS 可以使用类似于 CSS Modules 的功能，将 CSS 代码分割为独立的模块，避免样式冲突，提供更好的可维护性和代码复用性。

  4. 代码优化和压缩：PostCSS 提供了一些插件，可以对 CSS 代码进行优化和压缩，减小文件大小，提高加载性能。

  5. 编写自定义插件：PostCSS 的插件机制非常灵活，可以根据项目需求编写自定义的插件，进行各种 CSS 转换和处理操作，如自定义属性、自定义函数等。

可以用于增强 CSS 的能力，并提供更好的开发体验和效果优化。它的灵活性和可扩展性使得开发者可以根据项目需求选择和定制相应的插件，实现对 CSS 的定制化处理。

postcss css 模块化 和 css-loader 模块化有什么区别？

PostCSS 的 CSS 模块化和 css-loader 的模块化是两种不同的概念和实现方式。

  1. CSS 模块化 (PostCSS): CSS 模块化是指使用 PostCSS 插件或工具来实现将 CSS 代码拆分为独立的模块，以解决样式冲突和提供更好的可维护性和代码复用性。通过使用类似于 CSS Modules 的功能，每个模块都有自己的作用域，样式定义不会影响其他模块，同时还可以通过类似于变量、嵌套、Mixin 等功能来增强 CSS 的编写能力。CSS 模块化通常需要使用 PostCSS 插件，如 postcss-modules、css-modules 等。

  2. CSS 模块化 (css-loader): css-loader 是 Webpack 生态系统中的一个模块化工具，用于处理 CSS 文件。它的模块化功能是通过将 CSS 文件转换为 JavaScript 模块来实现的。每个 CSS 类名都被转换为一个唯一的标识符，以确保样式的唯一性和隔离性。在使用 css-loader 时，需要将 CSS 文件引入 JavaScript 模块中，并通过 JavaScript 代码来操作样式。

区别：

  • PostCSS 的 CSS 模块化是在 CSS 层面上进行的，通过插件的方式对 CSS 代码进行拆分和处理，提供更好的作用域隔离和编写能力。
  • css-loader 的模块化是在构建工具层面上进行的，将 CSS 文件转换为 JavaScript 模块，通过 JavaScript 代码来操作样式。
  • PostCSS 的 CSS 模块化更加灵活，可以根据项目需求选择和定制相应的插件来实现不同的功能。
  • css-loader 的模块化是集成在 Webpack 构建流程中的一部分，与模块化开发紧密结合，适用于前端项目的构建和打包过程。

伪类 伪元素​

伪元素和伪类是 CSS 中用于选择和样式化元素的特殊标记，它们有一些区别和不同的作用。

伪元素（Pseudo-Element）：

  • 表示文档中不存在的元素，用于在元素的特定位置插入样式化内容。
  • 通过双冒号 :: 来表示，例如 ::before、::after。
  • 可以使用伪元素为元素添加额外的内容、样式或装饰，如插入文本、图标、边框等。
  • 通过 content 属性设置伪元素的内容。
  • 伪元素在文档中并不存在，因此无法通过 JavaScript 直接操作它们。

伪类（Pseudo-Class）：

  • 表示元素在特定状态下的样式，例如鼠标悬停、被点击、处于某个状态等。
  • 通过单冒号 : 来表示，例如 :hover、:active。
  • 用于选择符合特定条件的元素，如选择第一个子元素、选择奇偶行等。
  • 伪类通过 CSS 规则选择元素的特定状态或条件来应用样式，与元素本身相关。
  • 伪类可以通过 JavaScript 动态地添加或移除，以改变元素的状态。

总结：

  • 伪元素用于创建不存在于文档结构中的元素，并为其添加样式化内容。
  • 伪类用于选择元素的特定状态或条件，并为其应用样式。
  • 伪元素使用双冒号 :: 表示，伪类使用单冒号 : 表示。
  • 伪元素在文档中并不存在，而伪类选择的是实际存在的元素。

使用伪元素和伪类可以在 CSS 中实现更多的样式化效果和交互行为，使页面更加丰富和动态。

CSS 中有伪类和伪元素两种，它们在用法和意义上有一些区别。

伪类是对元素在特定状态下的一种描述。比如 :hover 代表鼠标悬停状态下的样式，:active 代表元素被激活状态下的样式。伪类始终以冒号 : 开头，并放在选择器的最后。常用的 CSS 伪类有：

  1. :hover，鼠标移动到元素上时产生的效果。

  2. :active，鼠标按下去但没有释放时的状态。

  3. :focus，元素获取焦点时的状态。

  4. :visited，链接被点击并访问过时的状态。

  5. :nth-child(n)，选中元素的第 n 个 child 元素。

  6. :first-child，选中第一个 child 元素。

  7. :last-child，选中最后一个 child 元素。

另一方面，伪元素是对元素局部样式的描述，允许我们对某个元素的特定部分进行样式设置。比如 ::before 可使用内容插入做出类似插画的效果，::after 可用于为元素添加内容等等。双冒号 :: 也是伪元素的标识符。常用的 CSS 伪元素有：

  1. ::before，在元素内容前插入内容。

  2. ::after，在元素内容后插入内容。

  3. ::first-letter，选择元素的第一个字母。

  4. ::first-line，选择元素的第一行。

  5. ::selection，选择用户选中文本的部分。

区别与使用：

  • 伪类的作用是改变元素在特定状态下的样式，而伪元素则充当一个元素的某一部分来做样式处理。
  • 由于伪元素技术强大，可以为元素添加完全独立的内容而无需改变 HTML，因此在一些需要前端动态处理或给传统HTML元素嵌入样式的情况下，往往会用到伪元素技术。比如用 ::before 和 ::after 实现类似插画的效果。
  • 伪类和伪元素在实际应用中搭配使用，可以产生更复杂和丰富的样式效果。因此在大量的开发工程中，两者的灵活应用至关重要。
22%