2025 年度 Chrome 的 5 个值得关注的 CSS 新特性

时间：2025-12-13 03:03 作者：独元殇 分类： 前端技术

CSS 不是一滩死水，它在发展，每年都在。2025 也一样。在 chrome 平台，CSS 今年适配了很多的新功能。能让我们使用 HTML5 + CSS 写出一些，过去非常麻烦甚至要借助一大堆 js 的内容。

虽然现在 ai 在前端的编程能力相当惊人，但我们还是要吃饭的，那谁能吃的更久的呢？肯定不是菜鸟程序员，而是对语言的细节更了解的人，所以一些新特性，还是值得看看的。AI 对新细节的了解远远不如旧细节更清晰。

在 chrome 的官网上，已经整理好了，可以找到今年更新了一大堆的特性。不过很多都晦涩难懂，我选了 5 个比较独特的、比较实用的：

appearance: base-select
::scroll-marker & ::scroll-button
锚点定位
light-dark() 函数
field-sizing: content

分别对应着：

自定义 select
原生轮播图
锚点
light-dark() 函数
文本框的大小变化

下面的一些举例代码，大家可以在本地或者 Codepen 或者分格 HTML 编辑器这个地方进行快速预览学习！

注意，一定要在 chrome://flags/ 里开启 Experimental Web Platform features 才能使用！这些特性可能要在 2026 2027 年才会完全普及。

自定义 select

首先第一个， appearance: base-select 就是一个开关。给我们的 < select > 赋予这个属性，就会完全把这个 < select > 给搞成类似于安卓开启 ROOT 了一样，也就是完全自定义 select 选择框的细节！能把 < select > 以更方便的方式，搞的非常花哨！

这个超级实用！我们写表单，肯定很经常使用 < select > ，设计师往往会设计这个设计的很好看，但默认的 < select > 就是很丑，所以还得自己新建一大堆 < div > 来模拟... 麻烦至极！

看看官网给的例子，多漂亮？

我们也能简单用一下！

应用这个属性后，选择框的每个部分，都有独立的伪元素可以去控制：

官网给的说明

这是最简单的一个例子:

代码如下：

<style>
    select, ::picker(select) {
      appearance: base-select;
    }
    option {
      display: flex;
      justify-content: space-between;
    }
    option:checked::after { 
      content: "被选择"; /* 只有选中状态才通过伪元素显示钩子 */
      color: #007bff;
    }
</style>

<select>
    <option value="spike" selected>spike</option>
    <option value="zorp">zorp</option>
    <option value="fluffy">fluffy</option>
    <option value="bloop">bloop</option>
</select>

原生轮播图

我们都知道有个 Swiper.js 的 js 库，专门辅助实现轮播图的。就这么简单一个需求，过去需要搞那么麻烦。

绝大部分电商、外贸独立站和企业官网，都流行搞这个。现在 CSS 要原生支持这玩意了！

css 里加入了 ::scroll-marker & ::scroll-button 这俩东西！能剩下一大堆 js 监听事件！以及 DOM 操作。

现在是一个简单的使用示例：

当我们拖动滚动条的时候，左上角的圆点会变色。这个特性在做轮播图时，大有可为！

代码如下：

<style>
  ul {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    width: 300px; height: 100px; border: 2px solid #000;
    scroll-marker-group: before; 
  }

  ::scroll-marker-group(before) {
    display: flex; justify-content: center; gap: 10px; padding: 10px;
  }

  /* 小圆点*/
  li::scroll-marker {
    content: ""; display: block; width: 15px; height: 15px;
    border-radius: 50%; background: #ccc; cursor: pointer;
  }

  /* 小圆点在拖动时，变色 */
  li::scroll-marker:target-current { background: red; transform: scale(1.2); }

  li { flex: 0 0 100%; scroll-snap-align: center; list-style: none; font: 40px sans-serif; }
</style>

<ul>
  <li style="background:red">1</li>
  <li style="background:blue">2</li>
  <li style="background:green">3</li>
</ul>

锚点

这个怎么解释呢？

比如过去，我们在写什么下拉框时，如果想让一个元素 B，不管另一个元素 A 怎么移动，怎么变换，都死死跟着它，位于它的某个位置，其实是很难的。虽然看起来这个是 CSS 的责任，但我们通常要引入 js ，一直不断的计算。

现在引入了 anchor ，这个问题好办了，不用 js 了！轻松很多！

<style>
  button { anchor-name: --my-btn; } /* 起名：--my-btn */

  .tooltip {
    position: absolute;
    position-anchor: --my-btn;  /* 使用 --my-btn 作为基点 */
    top: anchor(bottom); 
    left: anchor(center);
    transform: translate(-50%, 0);  
  }
</style>

<button>鼠标目标</button>
<p>第一段文字</p>
<p>第二段文字</p>
<div class="tooltip">我是悬浮卡片</div>

效果如下：

只要给 A 元素起一个名字，然后在 B 元素里写一下定位规则就可以了。

无论两者隔离多远，无论有没有挨着，A 再变换位置，B 始终会位于它的下面居中。

light-dark() 函数

以前我们怎么判断浏览器的白天模式，夜间模式？

比如我们要写夜间的样式，那就使用 @media (prefers-color-scheme: dark){ ... } 对吧？但这种方式不直观高效。

现在多了个 light-dark() ，只需要 light-dark(浅色值, 深色值) 填入相应的值就好了！相当高效！

<style>
  :root { 
    color-scheme: light dark; /* 开启 light-dark() 函数 */
  }
  body {
    /* light-dark(浅色值, 深色值) */
    background: light-dark(#ffffff, #000000);
    color:      light-dark(#333333, #ffffff);

    font-size: 24px;
    height: 100vh; place-items: center;
  }
</style>

<div>切换系统主题，我自动变色</div>

之后，这个页面就很智能的自适应了！

这样更直观了。不用东一块、西一块的写了！

文本框的大小变化

就是那个 textarea ，过去，我们会使用 js 来监听内容，然后来实现其的自适应。或者是引入 autosize.js 的库。

现在，多了个 field-sizing: content; 的方法，我们可以直接自动根据文本内容，来调整文本框的变化了！

<style>
  textarea {

    field-sizing: content;  /* 根据 content 决定尺寸 */

    min-height: 40px; /* 设个下限 */
    padding: 10px;
    border: 2px solid #000;
  }
</style>

<textarea placeholder="打字 或者 回车，我可以自动变化..."></textarea>

效果如下: