今天我跟大佬们聊聊——2026年的CSS，已经不是样式表了，它是披着样式表外衣的编程语言。下面这5个新特性，每一个都能让你删掉一坨JavaScript，最后一个连后端看了都沉默。
1. 自定义CSS函数：终于能写逻辑了，不用再靠Sass
以前想在CSS里复用逻辑怎么办？要么复制粘贴，要么上Sass/Less预处理器。现在，原生CSS支持自定义函数了 。
css
@function --responsive-padding(--base) {
result: if(
media(min-width: 768px): var(--base);
else: calc(var(--base) / 2);
);
}
@function --half(--value) {
result: calc(var(--value) / 2);
}
.card {
padding: --responsive-padding(2rem);
width: --half(100%);
}
惊不惊喜？ CSS终于有了自己的函数系统，可以传参、可以条件判断，还能组合使用 。
攻城狮惊呼： “所以以后写响应式不用复制粘贴十遍媒体查询了？终于不用为了一个函数引入整个Sass了？”
2. border-shape属性：边框终于可以不是方的了
从互联网诞生那天起，边框就是直的。圆角？那是border-radius的事。但你想过吗——边框本身能不能是三角形？能不能是斜边？
现在可以了。border-shape属性正式进入Chrome Canary测试，让你用shape()函数定义边框形状 。
css
.fancy-box {
border: 4px solid #0066cc;
border-shape: shape(
from top left,
hline to 100%,
vline to 100%,
curve to 0% 100% with 50% 0%
);
}
配合shape()函数，你可以画出任意形状的边框，就像SVG路径一样灵活，但完全用CSS语法描述 。
这意味着什么？
- 不用再为特殊边框切图
- 不用再叠加伪元素hack
- 所有缩放、响应式都自动适配
攻城狮惊呼： “所以设计师给的异形边框，现在能1:1还原了？”
3. attr()函数进化：终于能读属性值了，不用data-*了
attr()函数存在了15年，但一直只能用在content属性里，只能读字符串，只能用在伪元素上 。
css
/* 从data-*属性读取数字 */
.timer {
--seconds: attr(data-seconds number);
animation: countdown calc(var(--seconds) * 1s) linear;
}
/* 从href读取颜色？也行！ */
a[data-color] {
background-color: attr(data-color color, #0066cc);
/* 第二个参数是fallback值 */
}
/* 甚至能从HTML属性读长度 */
.progress-bar {
width: attr(data-progress %, 0%);
}
惊不惊喜？ 类型转换、默认值、任意属性、任意CSS值类型——全都支持了 。
攻城狮惊呼： “所以以后进度条可以直接在HTML里写data-progress='50'，CSS自动读取？不用JS操作DOM了？”
4. 滚动状态查询：终于知道“粘住”和“滚动中”了
以前想知道元素有没有粘住、有没有被滚动捕捉到，得用Intersection Observer，监听scroll事件，一堆性能杀手代码 。
css
.sticky-nav {
container-type: scroll-state;
position: sticky;
top: 0;
}
.sticky-nav > nav {
transition: all 0.3s;
/* 检测是否粘在顶部 */
@container scroll-state(stuck: top) {
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
}
}
/* 检测滚动捕捉状态 */
.slide {
container-type: scroll-state;
scroll-snap-align: start;
@container scroll-state(snapped: block) {
/* 当前被捕捉到的slide高亮 */
scale: 1.05;
transition: scale 0.3s;
}
}
css
.scroll-container {
container-type: scroll-state;
/* 正在滚动时显示滚动提示 */
@container scroll-state(scrolled: inline) {
.scroll-hint { opacity: 1; }
}
}
攻城狮惊呼： “所以以前用Intersection Observer监听‘元素出现’的代码，现在全用CSS写了？”
5. 媒体元素伪类：终于能知道视频在播放还是暂停了
以前想根据音频/视频的播放状态改变样式，只能靠JS监听事件、动态加class。现在，浏览器原生告诉你 ：
css
video {
border: 4px solid transparent;
transition: border-color 0.3s;
}
/* 正在播放时 */
video:playing {
border-color: #00cc66;
}
/* 暂停时 */
video:paused {
border-color: #ff9900;
}
/* 缓冲时 - 显示加载提示 */
video:buffering::after {
content: "加载中...";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.7);
color: white;
padding: 8px 16px;
border-radius: 20px;
}
/* 静音时显示图标 */
video:muted::before {
content: "🔇";
font-size: 24px;
position: absolute;
bottom: 10px;
right: 10px;
}
:playing- 正在播放:paused- 暂停:seeking- 跳转中:buffering- 缓冲中:stalled- 卡顿:muted- 静音:volume-locked- 音量锁定
攻城狮惊呼： “所以以前那个播放器里‘缓冲时显示loading’的JS逻辑，现在一行CSS就搞定了？”
写在最后：CSS正在吃掉前端
这5个特性只是冰山一角。Interop 2026还在推进 ：
CSS已经不是当初那个CSS了。
以前我们说“能用CSS解决的问题，就不要用JS”。现在可以改成： “能用CSS解决的问题，都不叫问题。”
那些还在用JS做滚动检测、做播放器状态、做数据属性同步的兄弟们，该升级知识库了。
如果这篇文章让你对CSS刮目相看，点个赞，转个发，让更多朋友看到——CSS真的在吃掉前端。
评论区告诉我：你还在用JS做哪个本可以用CSS实现的功能？我帮你找原生替代方案。
