杂项

CSS 新特性有哪些？

答案

核心概念

CSS3 引入了大量新特性，大大增强了 CSS 的功能和表现力，使开发者能够创建更丰富、更现代的网页效果。

主要新特性

1. 选择器增强

   • 属性选择器：支持更多的属性选择器，如属性值前缀、后缀、包含等
   • 伪类选择器：引入了新的伪类选择器，如 :nth-child()、:nth-of-type() 等

2. 盒子模型

   • 边框圆角（border-radius）：可以设置元素的边框圆角
   • 阴影效果（box-shadow）：可以为元素添加阴影效果
   • 盒子大小（box-sizing）：可以调整盒子模型的尺寸计算方式

3. 背景和渐变

   • 线性渐变（linear-gradient）：可以创建水平或垂直方向的渐变背景
   • 径向渐变（radial-gradient）：可以创建从一个中心点向外扩散的渐变背景

4. 文字和字体

   • @font-face：允许在网页中引用自定义字体文件
   • 文字阴影（text-shadow）：可以为文字添加阴影效果
   • 多列文字（columns）：可以创建多列布局的文字

5. 过渡和动画

   • 过渡效果（transition）：可以实现元素在不同状态之间的平滑过渡
   • 关键帧动画（@keyframes）：可以定义动画的关键帧和动画效果
   • 动画属性（animation）：用于指定动画的持续时间、重复次数等属性

6. 弹性布局（Flexbox）

   • 引入了弹性布局模型，使元素在容器中的布局更加灵活和自适应

7. 响应式布局（Media Queries）

   • 可以根据不同的媒体查询条件应用不同的样式，实现响应式布局

8. 变换和变形

   • 2D变换（transform）：可以对元素进行平移、旋转、缩放等变换操作
   • 3D变换（transform）：可以实现元素的三维空间变换效果

9. 过滤器（Filter）

   • 可以应用各种视觉效果和图像处理效果，如模糊、亮度、对比度等

10. 多列布局（Multicolumn Layout）

    • 可以将内容分为多列进行布局

现代 CSS 特性

架构基础：

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

排版：

• 首字下沉
• 均衡和美观

颜色：

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

响应式设计：

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

交互动画：

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

面试官视角

该题考察对 CSS 发展历程和现代特性的理解，体现了候选人对前端技术发展趋势的关注。

延伸阅读

• CSS 新特性详解
• CSS 规范

样式隔离方式有哪些？

答案

核心概念

样式隔离意味着在一个复杂的前端应用中保持组件的样式私有化，使得不同组件之间的样式不会互相影响。

主要隔离方式

1. CSS 模块（CSS Modules）

   • 在构建时将 CSS 类名局部作用域化的技术
   • 每个类名都是独一无二的，通常通过添加哈希值来实现
   • 导入 CSS 模块会得到一个包含生成的类名的对象

2. Shadow DOM

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

3. CSS-in-JS 库

   • 允许用 JavaScript 编写 CSS，并在运行时生成唯一的类名
   • 常见的库有 Styled-components、Emotion 等
   • 提供自动的样式隔离，支持主题化和动态样式

4. BEM（Block Element Modifier）命名约定

   • 通过使用严格的命名规则来保持样式的模块化
   • 将样式绑定到特定的类名上，防止样式泄露

5. CSS Scoped

   • 在 Vue.js 中，可以为 <style> 标签添加 scoped 属性
   • 使用 Vue 的编译器来实现样式的作用域

6. 使用 iframe

   • 将组件或部分页面放在 iframe 中可以提供非常强的样式和脚本隔离
   • 可能导致性能问题，组件间沟通困难

7. Web 组件

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

8. 封装的 CSS 架构

   • 准确使用 CSS 选择器，避免使用全局标签选择器
   • 设置严格的 CSS 命名策略，不同模块使用不同的命名前缀

9. PostCSS 插件

   • 使用 PostCSS 插件来处理 CSS，自动添加前缀、变量等
   • 例如，PostCSS 前缀插件可以自动为 CSS 类添加唯一的前缀

选择建议

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

面试官视角

该题考察对前端工程化和组件化开发的理解，体现了候选人对代码组织和维护性的重视。

延伸阅读

• CSS Modules 官方文档
• Shadow DOM 规范

如何避免全局样式污染？

答案

核心概念

全局样式污染是指不同组件或模块的样式相互影响，导致样式冲突和不可预期的渲染结果。

避免方法

1. 使用命名约定

   • 给不同组件、模块或页面的样式类名添加特定的前缀
   • 使用 BEM（Block Element Modifier）命名约定
   • 将样式类名划分为块、元素和修饰符

2. 使用 CSS-in-JS

   • 将样式直接与组件绑定，避免全局样式的冲突
   • 每个组件都有自己的样式定义，不会影响其他组件

3. 使用 CSS Modules

   • 通过将 CSS 文件与组件绑定，在构建过程中自动生成唯一的类名
   • 实现样式的局部作用域，避免全局样式冲突

4. 使用作用域限定符

   • 使用 CSS 预处理器（如 Sass 或 Less）的作用域限定符
   • 通过嵌套样式规则，使用父选择器 & 来限制样式的作用范围

5. 使用样式重置/规范

   • 使用 Normalize.css 等样式重置库
   • 消除浏览器默认样式的差异，确保在不同浏览器下呈现一致的样式

6. 使用模块化开发框架

   • 使用 React、Vue 或 Angular 等模块化开发框架
   • 每个组件具有独立的样式作用域，避免全局样式的冲突

工具库推荐

1. CSS Modules：webpack 的 css-loader 和 vue-style-loader
2. CSS-in-JS：styled-components、Emotion、Vue的 scoped CSS
3. BEM 命名约定：避免样式类名冲突，实现样式的隔离
4. CSS Reset/Normalize：统一浏览器样式差异
5. PostCSS 插件：postcss-modules、postcss-preset-env
6. CSS 预处理器：Sass 或 Less 提供作用域限定符和嵌套样式规则

面试官视角

该题考察对前端工程化和代码组织能力的理解，体现了候选人对代码质量和维护性的重视。

延伸阅读

• CSS 样式隔离最佳实践
• BEM 命名规范

PostCSS 是什么，作用是什么？

答案

核心概念

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

主要作用

1. CSS 预处理器

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

2. 自动添加浏览器前缀

   • 根据配置自动为 CSS 属性添加适应不同浏览器的前缀
   • 解决浏览器兼容性问题

3. CSS 模块化

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

4. 代码优化和压缩

   • 提供插件对 CSS 代码进行优化和压缩
   • 减小文件大小，提高加载性能

5. 编写自定义插件

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

PostCSS CSS 模块化与 css-loader 模块化的区别

1. PostCSS 的 CSS 模块化

   • 在 CSS 层面上进行，通过插件的方式对 CSS 代码进行拆分和处理
   • 提供更好的作用域隔离和编写能力
   • 更加灵活，可以根据项目需求选择和定制相应的插件

2. css-loader 的模块化

   • 在构建工具层面上进行，将 CSS 文件转换为 JavaScript 模块
   • 每个 CSS 类名都被转换为一个唯一的标识符
   • 集成在 Webpack 构建流程中，与模块化开发紧密结合

面试官视角

该题考察对前端构建工具和 CSS 处理技术的理解，体现了候选人对工程化开发流程的掌握。

延伸阅读

• PostCSS 官方文档
• PostCSS 插件生态

伪类和伪元素有什么区别？

答案

核心概念

伪类和伪元素是 CSS 中用于选择和样式化元素的特殊标记，它们在语法、作用和使用场景上有明显区别。

伪元素（Pseudo-Element）

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

伪类（Pseudo-Class）

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

常用伪类

1. :hover - 鼠标移动到元素上时产生的效果
2. :active - 鼠标按下去但没有释放时的状态
3. :focus - 元素获取焦点时的状态
4. :visited - 链接被点击并访问过时的状态
5. :nth-child(n) - 选中元素的第 n 个 child 元素
6. :first-child - 选中第一个 child 元素
7. :last-child - 选中最后一个 child 元素

常用伪元素

1. ::before - 在元素内容前插入内容
2. ::after - 在元素内容后插入内容
3. ::first-letter - 选择元素的第一个字母
4. ::first-line - 选择元素的第一行
5. ::selection - 选择用户选中文本的部分

主要区别

特性	伪类	伪元素
语法	单冒号 :	双冒号 ::
作用	选择元素的特定状态	创建不存在的元素
内容	不需要 content 属性	需要 content 属性
JavaScript 操作	可以动态添加/移除	无法直接操作

面试官视角

该题考察对 CSS 选择器机制的深入理解，是前端开发中的基础知识点。

延伸阅读

• CSS 伪类
• CSS 伪元素