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;
}這個屬性會使文本區域、下拉框和輸入框等元素自動根據其內容調整大小，無論字體、字號、語言或書寫模式如何，都能輕松實現自適應效果。
互斥手風琴
通過為<details>元素添加name屬性，具有相同 name 值的多個 <details> 元素形成一個語義組，打開其中一個時，之前打開的會自動關閉。
<details name="hello-world">
<summary>前端充電寶</summary>
<p>...</p>
</details>
<details name="hello-world">
<summary>充電寶</summary>
<p>...</p>
</details>
<details name="hello-world">
<summary>前端</summary>
<p>...</p>
</details>可樣式化的 <details> 元素
從 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: "<color>";
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 簡化了工具提示、菜單等元素的實現，提升了可訪問性和用戶體驗。
<button popovertarget="my-popover" popovertargetaction="toggle">
Toggle Popover
</button>
<div id="my-popover" popover>
<p>This is a popover!</p>
</div>@starting-style
@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;
}
圖片
