2024年CSS持續(xù)活躍，年終大盤(pán)點(diǎn)！
在前端三大件（HTML、CSS、JavaScript）中， CSS 始終是更新最為頻繁的那個(gè)。每年瀏覽器都會(huì)陸續(xù)支持眾多全新的 CSS 功能，本文將聚焦于 2024 年那些不可錯(cuò)過(guò)的 CSS 新功能，帶你一覽CSS領(lǐng)域的最新進(jìn)展！
交互特性
自定義滾動(dòng)條
從 Chrome 121 開(kāi)始，可以使用 scrollbar-width 和 scrollbar-color 屬性自定義滾動(dòng)條的寬度和顏色。
.scroller {
scrollbar-color: red green;
scrollbar-width: 18%;
}
圖片
跨文檔視圖過(guò)渡
Chrome 在 2023 年率先推出同文檔視圖過(guò)渡，2024 年在 Chrome 126 中進(jìn)一步支持跨文檔視圖過(guò)渡，允許在兩個(gè)獨(dú)立文檔之間進(jìn)行平滑過(guò)渡。
@view-transition {
navigation: auto;
}
圖片
滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)
Chrome 115 開(kāi)始支持滾動(dòng)驅(qū)動(dòng)動(dòng)畫(huà)，與滾動(dòng)位置關(guān)聯(lián)，實(shí)現(xiàn)元素在滾動(dòng)時(shí)的動(dòng)態(tài)效果。
.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;
}
}
圖片
滾動(dòng)捕捉事件
新增 scrollsnapchange 和 scrollsnapchanging 事件，使?jié)L動(dòng)捕捉過(guò)程中的關(guān)鍵時(shí)刻可見(jiàn)且可響應(yīng)，結(jié)合使用可創(chuàng)建無(wú)縫的滾動(dòng)選擇體驗(yàn)。
scroller.addEventListener('scrollsnapchange', event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
})
scroller.onscrollsnapchange = event => {
console.log(event.snapTargetBlock);
console.log(event.snapTargetInline);
}
圖片
組件
錨點(diǎn)定位
CSS錨點(diǎn)定位允許開(kāi)發(fā)者以一種聲明式的方式創(chuàng)建元素之間的定位關(guān)系，特別適用于需要層級(jí)化布局的場(chǎng)景，如菜單、工具提示、下拉框、設(shè)置對(duì)話框等。
/* 定義按鈕為錨點(diǎn) */
.button-anchor {
anchor-name: --menu-anchor;
}
/* 菜單定位到按鈕的正上方 */
.menu {
position: absolute;
position-anchor: --menu-anchor;
position-area: block-start;
}
圖片
動(dòng)畫(huà)高度自適應(yīng)
從 Chrome 129 開(kāi)始，可以使用 interpolate-size 屬性或 calc-size() 函數(shù)實(shí)現(xiàn)從固定長(zhǎng)度到自適應(yīng)尺寸關(guān)鍵字的平滑過(guò)渡和動(dòng)畫(huà)效果，讓尺寸變化動(dòng)畫(huà)變得流暢自然。
:root {
interpolate-size: allow-keywords;
}
圖片
字段大小自適應(yīng)
通過(guò)field-sizing: content; 能夠創(chuàng)建自動(dòng)根據(jù)內(nèi)容調(diào)整大小的輸入字段，告別了手動(dòng)預(yù)估和 JavaScript 動(dòng)態(tài)調(diào)整 Form 表單尺寸的時(shí)代。
input, textarea, select, {
field-sizing: content;
}這個(gè)屬性會(huì)使文本區(qū)域、下拉框和輸入框等元素自動(dòng)根據(jù)其內(nèi)容調(diào)整大小，無(wú)論字體、字號(hào)、語(yǔ)言或書(shū)寫(xiě)模式如何，都能輕松實(shí)現(xiàn)自適應(yīng)效果。
互斥手風(fēng)琴
通過(guò)為<details>元素添加name屬性，具有相同 name 值的多個(gè) <details> 元素形成一個(gè)語(yǔ)義組，打開(kāi)其中一個(gè)時(shí)，之前打開(kāi)的會(huì)自動(dòng)關(guān)閉。
<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 開(kāi)始，可以使用 display 屬性和 ::details-content 偽元素來(lái)構(gòu)建可自定義樣式的展開(kāi) / 折疊組件。
details {
display: flex;
color: red;
}
details::details-content {
background-color: hsl(0 0% 0%);
}開(kāi)發(fā)體驗(yàn)增強(qiáng)
明暗模式
全新的light-dark() 函數(shù)使開(kāi)發(fā)者能夠根據(jù)當(dāng)前 color-scheme 值在兩種顏色之間切換，輕松實(shí)現(xiàn)淺色和深色模式的適配。
body {
color-scheme: light dark;
color: light-dark(#333, #fff);
background-color: light-dark(#fff, #222);
}
圖片
@property
2024 年，@property 特性在各瀏覽器中得到廣泛支持，可注冊(cè)自定義屬性類(lèi)型、控制繼承行為并設(shè)置初始值。
@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 簡(jiǎn)化了工具提示、菜單等元素的實(shí)現(xiàn)，提升了可訪問(wèn)性和用戶(hù)體驗(yàn)。
<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 規(guī)則用于在元素首次樣式更新之前定義樣式，結(jié)合 CSS 過(guò)渡可創(chuàng)建入場(chǎng)效果。
.container {
...
transition: transform 4s, background-color 4s;
transform: rotate(0deg);}
}
@starting-style {
.container {
background-color: blue;
transform: rotate(360deg);
}
}
圖片
text-stroke
使用 text-stroke 時(shí)，paint-order 屬性可控制文本填充和描邊的渲染順序，確保描邊在填充之上，使文本描邊效果更理想。
.paint-order {
paint-order: stroke fill;
}
圖片
