Hello 大家好。如果你在 2026 年还在用JavaScript监听滚动事件来实现视差动画还在用ResizeObserver来做组件级响应式还在引入Popper.js来定位一个小小的气泡提示框……那你欠浏览器一句道歉。过去两年CSS在底层经历了一场极其猛烈的能力跃迁。大量曾经必须依赖JavaScript才能实现的交互和布局逻辑现在只需要一行CSS声明就能搞定。而且由于这些能力直接运行在浏览器的渲染引擎底层它们的性能表现是任何JavaScript方案都无法比拟的。以下是我整理出来的 6 个在 2026 年已经获得主流浏览器全面支持但依然被国内大量前端严重低估的纯CSS新特性。:has()选择器 —— 让父元素感知子元素在CSS长达 20 多年的历史里有一个让所有前端痛彻心扉的缺陷你永远无法根据子元素的状态去反向控制父元素的样式。比如一个极其常见的表单场景当输入框获得焦点时让它的外层容器高亮。过去你必须用JavaScript监听focus和blur事件手动给父元素切换class。JavaScript 手动监听// 为了让父容器感知子元素的焦点状态被迫写一坨事件监听♂️constinputdocument.querySelector(.form-input);constwrapperdocument.querySelector(.form-wrapper);input.addEventListener(focus,(){wrapper.classList.add(is-focused);});input.addEventListener(blur,(){wrapper.classList.remove(is-focused);});.form-wrapper.is-focused{border-color:#3b82f6;box-shadow:0 0 0 3pxrgba(59,130,246,0.3);}现在是一行 CSS 直接秒杀⚡/* 父元素直接感知内部 input 的焦点状态零 JavaScript */.form-wrapper:has(input:focus){border-color:#3b82f6;box-shadow:0 0 0 3pxrgba(59,130,246,0.3);}:has()选择器的威力远不止如此。你可以用.card:has(img)来区分有图和无图的卡片布局用form:has(:invalid)来在表单存在校验错误时直接禁用提交按钮的视觉样式甚至用body:has(.modal-open)来在弹窗打开时锁定背景滚动。这一个选择器干掉了过去无数的状态切换JavaScript。container容器查询传统的media媒体查询响应的是整个视口的宽度。但在组件化开发的时代同一个卡片组件可能被放在宽度 300px 的侧边栏里也可能被放在宽度 800px 的主内容区里。视口宽度根本不能反映组件自身的实际空间。过去为了实现组件级响应式你不得不引入ResizeObserver写一大段JavaScript去监听容器尺寸变化然后手动切换布局。ResizeObserver 的手动监听// 为了让卡片组件根据自身容器宽度切换布局被迫引入 JS 观察者constobservernewResizeObserver(entries{for(constentryofentries){constwidthentry.contentRect.width;if(width400){entry.target.classList.add(compact);entry.target.classList.remove(wide);}else{entry.target.classList.add(wide);entry.target.classList.remove(compact);}}});observer.observe(document.querySelector(.card-container));纯 CSS 容器查询/* 声明容器 */.card-container{container-type:inline-size;}/* 组件根据自身容器的宽度自动切换布局零 JavaScript */.card{display:grid;grid-template-columns:1fr;}container(min-width:400px){.card{grid-template-columns:200px 1fr;}}组件不再需要关心自己被放在了页面的哪个位置它会根据自身的物理空间自动适配布局。这是CSS有史以来最接近智能组件的能力跃迁。滚动驱动动画 —— 彻底干掉 scroll 事件监听过去凡是和滚动相关的动画效果进度条、视差、淡入淡出你都必须监听scroll事件。而scroll事件是浏览器中触发频率最高的事件之一处理不好极其容易导致主线程卡顿和掉帧。JavaScript 监听滚动// 为了实现一个顶部阅读进度条被迫疯狂监听 scroll 事件window.addEventListener(scroll,(){constscrollTopdocument.documentElement.scrollTop;constscrollHeightdocument.documentElement.scrollHeight-window.innerHeight;constprogress(scrollTop/scrollHeight)*100;document.querySelector(.progress-bar).style.width${progress}%;});这段代码在用户快速滚动时每秒会触发几十次甚至上百次回调直接榨干主线程的算力。现在是纯 CSS 滚动驱动动画/* 顶部阅读进度条完全由浏览器渲染引擎在合成层驱动零 JS 零卡顿 */.progress-bar{position:fixed;top:0;left:0;height:3px;background:#3b82f6;width:0%;/* 绑定到页面的滚动进度浏览器底层自动计算 */animation:grow-progress linear;animation-timeline:scroll();}keyframesgrow-progress{from{width:0%;}to{width:100%;}}整个动画被完全交给了浏览器底层的合成线程Compositor Thread去驱动根本不会占用主线程的一丝算力。这种性能差距不是优化几行JavaScript能弥补的是架构层面的降维打击。starting-style—— 原生实现display: none的入场动画这个特性解决了一个困扰前端十几年的深水区痛点你无法对display: none到display: block的切换做过渡动画。过去为了实现一个弹窗的淡入效果你要么引入Framer Motion这种动画库要么用JavaScript先把元素设为display: block然后在下一帧再切换opacity极其丑陋。JavaScript 双帧 Hack// 为了让弹窗从 display:none 淡入被迫写出这种恶心的双帧 hackfunctionshowModal(el){el.style.displayblock;// 强制浏览器重排否则 transition 不会触发el.offsetHeight;// 这行看起来毫无意义但删掉动画就失效el.classList.add(visible);}纯 CSS 原生入场动画.modal{display:none;opacity:0;transition:opacity 0.3s ease,display 0.3s ease allow-discrete;}.modal.open{display:block;opacity:1;/* 告诉浏览器从 display:none 切换过来时opacity 从 0 开始 */starting-style{opacity:0;}}浏览器原生支持了离散属性如display的过渡动画。不需要任何JavaScript不需要任何动画库一个弹窗的淡入淡出就被几行CSS完美解决了♂️。field-sizing: content——自动撑高的 textarea过去为了让一个多行输入框根据内容自动调整高度而不是固定一个死板的高度你需要用JavaScript去监听input事件动态计算scrollHeight并赋值给style.height。JavaScript 手动撑高consttextareadocument.querySelector(textarea);textarea.addEventListener(input,(){textarea.style.heightauto;// 先重置否则只会越来越高textarea.style.heighttextarea.scrollHeightpx;});现在是一行 CSStextarea{field-sizing:content;/* 浏览器根据内容自动撑高零 JavaScript */}一行CSS干掉了一个在前端圈流传了十几年的经典JavaScriptHack ️。CSS Anchor Positioning—— 原生的气泡定位过去只要你需要实现一个点击按钮弹出气泡提示框且气泡自动贴在按钮旁边的效果你几乎必须引入Popper.js或Floating UI这种定位库。因为手动计算位置、处理边界溢出翻转这套逻辑的复杂度极高。用 CSS 原生锚点定位/* 声明锚点 */.trigger-button{anchor-name:--my-anchor;}/* 气泡自动定位到锚点下方溢出时自动翻转 */.tooltip{position:fixed;position-anchor:--my-anchor;top:anchor(bottom);left:anchor(center);/* 原生的溢出翻转逻辑浏览器自动处理 */position-try-fallbacks:flip-block,flip-inline;}不需要任何JavaScript库不需要计算getBoundingClientRect不需要处理滚动偏移。浏览器的渲染引擎直接在布局阶段帮你搞定一切包括边界检测和自动翻转。这意味着你可以从项目的依赖里删掉一整个定位库。要知道什么时候不写 JavaScriptCSS的这一轮能力爆发本质上是浏览器厂商在把越来越多的交互决策权从JavaScript主线程下沉到了渲染引擎的底层。这不仅仅是少写几行代码的问题。每一行被CSS替换掉的JavaScript都意味着主线程少了一份负担页面的渲染帧率高了一个台阶用户的交互响应快了几毫秒。今天写到这里喜欢点赞收藏
