CSS的发展速度比以往任何时候都快，浏览器厂商也在快速跟进。如果你是前端开发者，及时了解最新的CSS特性可以显著改善你的工作流程，减少JavaScript开销，并实现更清晰、更易维护的代码。

本文涵盖了2024年及以后现代浏览器支持的最新和即将推出的CSS特性。

1. :has()- 父选择器

状态： 所有主流浏览器都支持（Chrome、Firefox、Safari、Edge）

article:has(h2) {
  border-left: 4px solid #3b82f6;
}

这个期待已久的父选择器允许基于其子元素来设置父元素的样式。可以将其视为将响应式逻辑直接带入CSS！

使用场景：

• 如果卡片包含图片，为其添加样式
• 高亮包含无效字段的表单
• 有条件地显示元素

2. @scope- 作用域样式（实验性）

状态： Chrome和Safari支持（其他浏览器在标志后面）

@scope (.card) {
  h2 {
    color: teal;
  }
}

@scope允许你将一组样式作用域限定到DOM的一部分。可以将其视为:is() + :where()，但更本地化和智能。

使用场景：

• 编写模块化、可重用的组件，避免样式泄漏
• 消除对重型BEM命名的需求

3. CSS嵌套

状态： Chrome、Safari、Firefox和Edge都支持

.card {
  color: black;

  &:hover {
    color: blue;
  }
}

现在你可以编写更清晰、更易读的样式，而无需使用像Sass这样的预处理器。

优势：

• 更清晰的作用域
• 更容易维护
• 更好的组件结构

4. color-mix()和 relative-color()

状态： Chrome和Safari支持（Firefox部分支持）

color: color-mix(in srgb, red 50%, white);

直接在CSS中混合颜色！

--primary: #3b82f6;
--light: relative-color(--primary lightness + 30%);

基于另一个颜色定义派生颜色。

5. 容器查询

状态： 所有主流浏览器都支持

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
}

CSS现在可以响应元素大小，而不仅仅是视口。这对于基于组件的设计来说是一个游戏规则改变者。

使用场景：

• 自适应卡片
• 响应式侧边栏
• 适应其他容器内部的网格布局

6. 视图过渡API（CSS + JS）

状态： Chromium浏览器支持（Safari和Firefox部分支持）

::view-transition-old(root),
::view-transition-new(root) {
  animation: fade 0.4s;
}

与JavaScript的startViewTransition()配合使用，你现在可以原生地添加无缝的页面过渡。

7. 锚点定位

状态： 部分支持（某些浏览器在标志后面）

.my-tooltip {
  position: anchor;
  anchor-name: --target;
  top: anchor(top);
  left: anchor(center);
}

基于CSS的定位，动态适应布局和滚动状态。想想工具提示、弹出框、下拉菜单——无需JS技巧。

8. accent-color

状态： 完全支持

input[type="checkbox"] {
  accent-color: #3b82f6;
}

自定义复选框、单选按钮和范围滑块，无需重型样式或JavaScript。

9. :nth-child(An+B of S)高级选择器

状态： 大多数现代浏览器都支持

li:nth-child(2n of .highlight) {
  background: yellow;
}

基于兄弟子集进行过滤——非常适合选择性样式，无需手动添加类。

10. 逻辑属性

padding-inline: 1rem;
padding-block: 2rem;

不要使用padding-left/padding-right，使用逻辑属性来更好地支持从右到左（RTL）布局和可访问性。

总结表

最终思考

这些CSS特性正在减少我们对JavaScript的依赖，并为我们作为前端开发者提供新的超能力。如果你还没有尝试过容器查询、视图过渡或:has()，现在是时候了！

保持现代化，编写更少的代码，构建更清晰的UI！