时间到了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，但不用等全部支持才开始用。用上了，代码就能干净一点，快一点。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！