CSS的演变：新特性解析

本文将重点介绍2025年值得关注的CSS新特性

CSS嵌套(Nesting)

在 Sass/Less 中，支持将选择器嵌套在其他选择器中，使得样式表更具可读性和层次感。

现在，在CSS中已经得以支持。

/* 无嵌套 */
header {
  color: #22232e;
}
header h1 {
  font-size: 3.5rem;
}
header p {
  font-size: 2rem;
}
header p a {
  color: #00c2cb;
}
/* 使用嵌套 */
header {
  color: #22232e;
  h1 {
  font-size: 3.5rem;
  }
  p {
    font-size: 2rem;
    a {
      color: #00c2cb;
    }
  }
}

当然，目前还是有兼容性。

CSS条件判断

在CSS中，目前可用的条件判断有媒体查询（@media）和容器查询（@container），都是基于“尺寸”的。

现在新增了一个条件判断 if()，但目前只有chrome137+版本支持。

语法：

property: if(<condition>, <then>, <else>);

<condition>：判断条件，可以是比较运算、逻辑运算。
<then>：条件为 true 时的值。
<else>：条件为 false 时的值。

支持的条件表达式：

• 数值比较：>, <, =, !=, >=, <=
• 布尔值：true, false
• 环境变量、CSS 变量

注：这个特性目前 属于实验性功能，W3C 规范尚未正式定稿。

建议搭配 @supports 检测：

@supports (width: if(100vw > 600px, 100px, 200px)) {
  .box {
    width: if(100vw > 600px, 100px, 200px);
  }
}

宽高比

aspect-ratio 用于定义元素宽高比。它允许开发者指定一个元素的宽度和高度之间的固定比例关系，无论元素的实际尺寸如何变化，都会保持这个比例。

语法：

element {
  aspect-ratio: <width> / <height>;
}

实现一个不定宽的正方形：

div {
  aspect-ratio: 1;
}

使用 aspect-ratio 代码简洁，直接控制比例。

自定义滚动条

scrollbar-color 属性用于设置滚动条的轨道（track）和滑块（thumb）的颜色。

/* 关键字值 */
scrollbar-color: auto;
/* <color> 值 */
scrollbar-color: rebeccapurple green;

• auto：默认平台渲染的滚动条轨道颜色。
• <color> <color>：第一个颜色用于滑块，第二个颜色用于轨道。

scrollbar-gutter

滚动条的出现常导致页面布局偏移，·scrollbar-gutter· 通过预分配滚动条空间解决这一问题，确保布局稳定性。

scrollbar-gutter 属性可以接受以下几个值：

• auto：这是默认值。浏览器将自行决定是否保留滚动条槽。这通常意味着，当滚动条出现时，内容区域会相应地缩小。
• stable：使用这个值，浏览器将始终为滚动条保留空间，即使滚动条当前不可见。这意味着内容的可见区域将保持不变，无论滚动条是否显示。这可以提供更稳定的布局，但可能会浪费一些屏幕空间。
• both-edges：这个值指示浏览器在滚动容器的两侧都保留空间，以便在需要时显示滚动条。这通常用于那些滚动条可能出现在任意一侧的场景，如水平滚动的元素。

content-visibility

content-visibility 通过延迟渲染不可见区域的内容，显著提升长页面或复杂布局的加载速度。结合 contain-intrinsic-size 为隐藏内容预留空间，可避免布局抖动。

.section {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

CSS锚点定位

如果要实现“提示框（tooltip）”或“下拉菜单（Dropdown）”功能，我们常常需要使用 JavaScript 计算“触发它的那个按钮”的位置。

但现在有一种CSS提案，可以让我们更便捷的设置。

/* 首先，给触发元素（按钮）起一个名字 */
#button {
  anchor-name: --button-anchor;
}
/* 然后，让提示框（tooltip）根据这个名字来定位自己 */
.tooltip {
  /* 将自己的 top 边缘对齐到锚点(--button-anchor)的 bottom 边缘 */
  position: absolute;
  top: anchor(--button-anchor bottom); 
  left: anchor(--button-anchor left);
  /* 甚至可以做更智能的判断，比如空间不够时自动翻转 */
  /* （这部分语法还在讨论中，但思路是这样） */
}

作用域限制

@scope允许你为CSS样式创建区块级作用域，从而更精细地控制样式的应用和层叠。

@scope (.container) {
  :scope {
    padding: 10px;
  }
  a {
    color: blue;
  }
}

在上面的代码中，我们通过使用 @scope 来匹配 .container 中的 <a> 元素。 :scope 用于选择和设置作用域根本身的样式。