时间到了2026年。如果你还以为css只是个画页面的工具，那你得重新看看了。这几年CSS加了很多新功能，以前非得用JavaScript才能做的事，现在CSS自己就能搞定。

这不是说JavaScript没用了。是说有些活，用CSS干更好。页面跑得更快，代码写得更少，维护起来也更省事。

下面这6个CSS新特性，值得花时间看看。

1. :has() 父选择器

这是CSS里第一个真正意义上的父选择器。以前你想根据子元素的状态改父元素的样式，得用JavaScript。现在不用了。

举个例子。一个卡片组件，如果里面有图片，你想给卡片加个边框。以前你得写JS判断有没有图片，有就加个类名。现在一行CSS就行：

.card:has(img) {
  border: 2px solid gold;
}

再比如表单。输入框填错了，想让对应的标签变红：

.form-group:has(input:invalid) label {
  color: red;
}

:has()还能组合着用。比如选择那些不包含图片的文章，或者选择后面跟着按钮的输入框。这玩意儿能做的事不少。

2. 锚点定位

做网页的时候，经常需要把一个元素贴在另一个元素旁边。比如鼠标悬停时弹出来的提示框，或者点按钮出现的下拉菜单。

以前的做法是用JS算位置。按钮在哪儿，屏幕多大，滚动多少，都得算。算完还得防着滚动的时候跑偏。

现在CSS里有锚点定位。先给按钮起个名字，然后让提示框贴上去：

.button {
  anchor-name: --my-button;
}

.tooltip {
  position: absolute;
  position-anchor: --my-button;
  bottom: anchor(top);
  left: anchor(center);
}

这样提示框就会一直贴在按钮上面。浏览器自己管位置，不用JS算。代码少了，也不容易出bug。

3. 滚动驱动动画

以前想做那种滚动到哪儿动画就播到哪儿的特效，得监听滚动事件，算滚动百分比，再动态改样式。监听滚动这事挺耗性能，还得小心别卡顿。

现在可以用scroll-timeline。直接把动画和滚动进度绑在一起。

比如做一个进度条，页面往下滚的时候进度条变长：

@keyframes fill-bar {
  from { width: 0%; }
  to { width: 100%; }
}

.progress-bar {
  animation: fill-bar linear;
  animation-timeline: scroll();
}

就这么几行。不用监听滚动，不用算百分比，浏览器自己干。

4. subgrid

Grid布局出来之后，做整体布局方便多了。但有个问题一直没解决：嵌套的网格怎么跟父级对齐。

比如一排卡片，每张卡片里分三块：头、身子、脚。你想让所有卡片的头对齐，所有卡片的脚也对齐。以前的做法是给每块定死高度，但内容一多就崩。或者用JS算，但麻烦。

subgrid就是解决这个的。让子网格直接继承父网格的行列：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

这样每张卡片里的三行，都跟父网格的三行对齐。头对头，脚对脚，不用定死高度，内容多少都能对齐。

5. if() 函数

CSS正在加if函数。现在还不是所有浏览器都支持，但快了。

有了if，就可以在样式里写简单的条件判断。比如根据用户偏好决定动画时长：

.card {
  transition-duration: if(
    media(prefers-reduced-motion: reduce): 0ms; 
    else: 200ms
  );
}

或者根据主题色决定背景：

.card {
  background: if(
    style(--theme: dark): #333; 
    else: #fff
  );
}

以前这些得写两套样式，或者用JS切。现在一个属性里就能搞定。

6. sibling-count() 函数

做列表布局的时候，经常要根据列表项的数量调整样式。比如导航菜单，项数少的时候每个宽一点，项数多的时候每个窄一点。

以前得用JS数有多少项，然后算宽度。现在用sibling-count()就行：

.menu-item {
  width: calc(100% / sibling-count());
}

这个函数会返回同一个父元素下有多少个兄弟元素。用它算宽度，不管菜单是3项还是5项，都能平均分。

还有sibling-index()，可以知道自己是第几个。用来做交错样式很方便。

为什么这些新特性值得用

有人说，这些用JS也能实现，何必学新的。

这话有道理，但有几点不一样。

第一是性能。CSS这些功能是浏览器底层实现的，比JS快。拿滚动动画来说，JS监听滚动在主线程跑，容易卡。CSS的滚动动画在合成器线程跑，不影响主线程，顺滑得多。

第二是代码量。上面那些例子，用JS实现至少多写好几倍代码。代码越少，bug越少，维护越容易。

第三是原生支持。像锚点定位这种，浏览器自己管位置，不管页面怎么变，位置都对。用JS算总有考虑不到的情况。

现在还学不学JS

学。JS还是得学。

这些新特性不是要取代JS，是把一部分本来就不该JS干的活接回去了。视觉上的、布局上的、交互反馈上的，本来就更适合CSS干。JS该干的是数据处理、用户操作、业务逻辑这些。

以前是因为CSS能力不够，不得不用JS代劳。现在CSS能力上来了，把那些活还回去，JS就能专心干自己擅长的事。这是好事。

这些新特性大部分现代浏览器都支持了。写代码之前可以查查caniuse，但不用等全部支持才开始用。用上了，代码就能干净一点，快一点。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/13373