在前端三大件（HTML、CSS、JavaScript）中，CSS始终是更新最为频繁的那个。每年浏览器都会陆续支持众多全新的CSS功能，本文将聚焦于2024年那些不可错过的CSS新功能，带你一览CSS领域的最新进展！
交互特性自定义滚动条
从Chrome121开始，可以使用scrollbar-width和scrollbar-color属性自定义滚动条的宽度和颜色。
.scroller{scrollbar-color:redgreen;scrollbar-width:18%;}
跨文档视图过渡
Chrome在2023年率先推出同文档视图过渡，2024年在Chrome126中进一步支持跨文档视图过渡，允许在两个独立文档之间进行平滑过渡。
@view-transition{navigation:auto;}
滚动驱动动画
Chrome115开始支持滚动驱动动画，与滚动位置关联，实现元素在滚动时的动态效果。
.timeline{position:relative;display:flex;gap:var(--gap);overflow-x:scroll;scroll-snap-type:xmandatory;width:100%;padding-inline:calc((100vw-var(--item-size))/2);}.timelinearticle{scroll-snap-align:center;scroll-snap-stop:always;animation:reveallinearboth;animation-timeline:view(inline);}@keyframesreveal{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);}
组件锚点定位
/*定义按钮为锚点*/.button-anchor{anchor-name:--menu-anchor;}/*菜单定位到按钮的正上方*/.menu{position:absolute;position-anchor:--menu-anchor;position-area:block-start;}
动画高度自适应
从Chrome129开始，可以使用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">前端...可样式化的元素
从Chrome131开始，可以使用display属性和::details-content伪元素来构建可自定义样式的展开/折叠组件。
details{display:flex;color:red;}details::details-content{background-color:hsl(00%0%);}开发体验增强明暗模式
全新的light-dark()函数使开发者能够根据当前color-scheme值在两种颜色之间切换，轻松实现浅色和深色模式的适配。
body{color-scheme:lightdark;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;}
PopoverAPI
PopoverAPI简化了工具提示、菜单等元素的实现，提升了可访问性和用户体验。
TogglePopoverbutton>Thisisapopover!p>div>@starting-style
@starting-style规则用于在元素首次样式更新之前定义样式，结合CSS过渡可创建入场效果。
.container{...transition:transform4s,background-color4s;transform:rotate(0deg);}}@starting-style{.container{background-color:blue;transform:rotate(360deg);}}
text-stroke
使用text-stroke时，paint-order属性可控制文本填充和描边的渲染顺序，确保描边在填充之上，使文本描边效果更理想。