2024年CSS持续活跃，年终大盘点！

在前端三大件（HTML、CSS、JavaScript）中， CSS 始终是更新最为频繁的那个。每年浏览器都会陆续支持众多全新的 CSS 功能，本文将聚焦于 2024 年那些不可错过的 CSS 新功能，带你一览 CSS 领域的最新进展！

交互特性自定义滚动条

从 Chrome 121 开始，可以使用scrollbar-width和scrollbar-color属性自定义滚动条的宽度和颜色。

.scroller { scrollbar-color: red green; scrollbar-width: 18%; }

跨文档视图过渡

Chrome 在 2023 年率先推出同文档视图过渡，2024 年在 Chrome 126 中进一步支持跨文档视图过渡，允许在两个独立文档之间进行平滑过渡。

@view-transition { navigation: auto; }

滚动驱动动画

Chrome 115 开始支持滚动驱动动画，与滚动位置关联，实现元素在滚动时的动态效果。

.timeline { position: relative; display: flex; gap: var(--gap); overflow-x: scroll; scroll-snap-type: x mandatory; width: 100%; padding-inline: calc((100vw - var(--item-size)) / 2); } .timeline article { scroll-snap-align: center; scroll-snap-stop: always; animation: reveal linear both; animation-timeline: view(inline); } @keyframes reveal { 0%, 100% { translate: 0 -25%; scale: 0.7; opacity: 0.2; } 50% { scale: 1; translate: 0; opacity: 1; } }

滚动捕捉事件

新增scrollsnapchange和scrollsnapchanging事件，使滚动捕捉过程中的关键时刻可见且可响应，结合使用可创建无缝的滚动选择体验。

scroller.addEventListener('scrollsnapchange', event => { console.log(event.snapTargetBlock); console.log(event.snapTargetInline); }) scroller.onscrollsnapchange = event => { console.log(event.snapTargetBlock); console.log(event.snapTargetInline); }

组件锚点定位

CSS锚点定位允许开发者以一种声明式的方式创建元素之间的定位关系，特别适用于需要层级化布局的场景，如菜单、工具提示、下拉框、设置对话框等。

/* 定义按钮为锚点 */ .button-anchor { anchor-name: --menu-anchor; } /* 菜单定位到按钮的正上方 */ .menu { position: absolute; position-anchor: --menu-anchor; position-area: block-start; }

动画高度自适应

从 Chrome 129 开始，可以使用interpolate-size属性或calc-size()函数实现从固定长度到自适应尺寸关键字的平滑过渡和动画效果，让尺寸变化动画变得流畅自然。

:root { interpolate-size: allow-keywords; }

字段大小自适应

通过field-sizing: content;能够创建自动根据内容调整大小的输入字段，告别了手动预估和 JavaScript 动态调整 Form 表单尺寸的时代。

input, textarea, select, { field-sizing: content; }

这个属性会使文本区域、下拉框和输入框等元素自动根据其内容调整大小，无论字体、字号、语言或书写模式如何，都能轻松实现自适应效果。

互斥手风琴

通过为

元素添加name属性，具有相同name值的多个元素形成一个语义组，打开其中一个时，之前打开的会自动关闭。

"hello-world"> 前端充电宝 ... "hello-world"> 充电宝 ... "hello-world"> 前端 ...

从 Chrome 131 开始，可以使用display属性和::details-content伪元素来构建可自定义样式的展开 / 折叠组件。

details { display: flex; color: red; } details::details-content { background-color: hsl(0 0% 0%); }

全新的light-dark()函数使开发者能够根据当前color-scheme值在两种颜色之间切换，轻松实现浅色和深色模式的适配。

body { color-scheme: light dark; color: light-dark(#333, #fff); background-color: light-dark(#fff, #222); }

@property

2024 年，@property特性在各浏览器中得到广泛支持，可注册自定义属性类型、控制继承行为并设置初始值。

@property --color { syntax: " " ; inherits: true; initial-value: #ea1ca5; } div { display: flex; justify-content: center; width: 20vw; height: 100px; background: var(--color); } .color-1 { --color: #1a535c; } .color-2 { --color: rgb(100, 200, 0); } .color-3 { --color: #3e47db; }

Popover API

Popover API 简化了工具提示、菜单等元素的实现，提升了可访问性和用户体验。

Toggle Popover button> 




This is a popover! p> div>

@starting-style规则用于在元素首次样式更新之前定义样式，结合 CSS 过渡可创建入场效果。

.container { ... transition: transform 4s, background-color 4s; transform: rotate(0deg);} } @starting-style { .container { background-color: blue; transform: rotate(360deg); } }

text-stroke

使用text-stroke时，paint-order属性可控制文本填充和描边的渲染顺序，确保描边在填充之上，使文本描边效果更理想。

.paint-order { paint-order: stroke fill; }