CSS新特性：四个让你少写一半JS的功能

2026年，CSS已经不是那个“只能改颜色”的工具了。下面这几个特性能让你少写很多JS，而且性能更好。

1. :has() — 终于能选中父元素了

以前想根据子元素状态改变父元素的样式，只能靠JS。现在不用了。

场景：表单校验时，输入框的父容器变红

/* 子元素input不合法，父元素边框变红 */
.form-item:has(input:invalid) {
  border: 1px solid red;
}

不需要监听事件，不需要操作classList，CSS自己就能搞定。

浏览器支持：Chrome、Firefox、Safari都已支持。

2. Container Queries — 组件级响应式

以前响应式靠@media，是根据屏幕宽度决定样式。但组件可能被放在不同的容器里，屏幕宽不一定等于组件宽。

现在用@container，根据父容器宽度来决定样式：

.card-wrap {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex; /* 容器够宽就变横排 */
  }
}

同一个组件，放在宽容器里是横排，放在窄容器里自动变竖排，完全不用改代码。

3. Subgrid — 嵌套布局对齐不再靠猜

做卡片列表时经常遇到这个问题：每张卡片的标题、图片、价格高度不一样，排成一行后参差不齐。

.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto; /* 三行：图片、标题、价格 */
}

.product-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* 继承父网格的行定义 */
}

加了subgrid，所有卡片的标题行、价格行会自动对齐，不用写任何JS，也不用hack式的min-height。

4. Scroll-Driven Animations — 滚动动画不卡了

以前做“滚动到某个元素时淡入”的效果，要监听scroll事件加上IntersectionObserver，代码一大堆，还容易卡顿。

@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section {
  animation: fade-up 0.6s ease both;
  animation-timeline: view(); /* 绑定到滚动视口 */
  animation-range: entry 0% entry 60%; /* 进入视口时触发 */
}

这个动画运行在合成器线程上，不占主线程，比JS方案流畅很多。

Chrome 115以上支持，Safari和Firefox正在跟进。

各特性支持情况

前三个现在就可以在生产环境直接用，最后一个可以在新项目里尝试。

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