Skip to main content

现代 CSS 与新特性

面试一句话总结：高级前端不仅要懂兼容，还要懂如何利用现代 CSS 特性简化代码和提升体验。CSS 变量是动态主题的核心，Grid 解决复杂二维布局，而 :has() 和 容器查询 正在彻底改变前端编写响应式组件的方式。

1. CSS 变量 (Custom Properties)​

面试常考：CSS 变量和 Sass/Less 变量有什么本质区别？

  • 编译时 vs 运行时：Sass 变量是在构建阶段编译成静态的 CSS 代码；而 CSS 变量存在于浏览器的 DOM 树中，是运行时的。
  • 作用域与继承：CSS 变量具备 DOM 作用域，子元素可以继承父元素的变量。
  • JS 交互：CSS 变量最大的杀手锏是可以通过 JS 动态读取和修改（element.style.setProperty('--color', 'red')），这是实现动态主题切换（如一键换肤、暗黑模式）的最佳方案。

2. Grid 布局 (网格布局)​

Flex 是为了解决一维布局（单行或单列），而 Grid 是为了解决复杂的二维布局（行 + 列，如 Dashboard、复杂表单、画廊）。

核心概念与高频属性：

  • grid-template-columns / grid-template-rows：定义行列的轨道。
  • fr 单位：Grid 专属单位，代表网格容器中可用空间的一等份（Fraction）。
  • grid-template-areas：极其直观的“区域命名”布局方式，非常适合写页面整体骨架。
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}
.header {
  grid-area: header;
}

3. 现代选择器​

  • :has() (父选择器)：CSS 史上期待值最高的选择器！以前 CSS 只能通过父找子，现在可以通过子元素的状态来改变父元素的样式。
    • 场景：如果卡片内部包含图片，则卡片取消 padding。.card:has(img) { padding: 0; }
  • :is() 和 :where()：用于简化组合选择器，合并重复逻辑。它们的唯一区别是优先级：:is() 的优先级由其内部最高权重的选择器决定，而 :where() 的优先级永远为 0。

4. 强大的数学函数​

响应式布局不再只靠媒体查询，现代 CSS 提供了强大的函数：

  • clamp(MIN, VAL, MAX)：限制一个值在给定的上下限之间。常用于响应式字体：font-size: clamp(1rem, 2.5vw, 2rem);（最小 1rem，最大 2rem，中间跟随视口宽度缩放）。
  • min() 和 max()：从逗号分隔的值列表中选择最小/最大值。

5. 容器查询 (Container Queries) - 响应式的未来​

媒体查询 (@media) 的局限在于它只能根据整个浏览器视口 (Viewport) 的大小来改变样式。 但在组件化时代，一个组件（如 Card）可能被放在宽阔的主内容区，也可能被挤在狭窄的侧边栏。

容器查询 (@container) 允许元素根据其“父容器”的尺寸来应用样式，真正实现了“组件级别的响应式”。

/* 1. 将父元素定义为容器 */
.card-container {
  container-type: inline-size;
}

/* 2. 根据容器宽度改变内部样式 */
@container (max-width: 400px) {
  .card-item {
    flex-direction: column;
  }
}