2024年，一大波 Web 新功能來襲！
2024年，Web UI 正迎來其前所未有的黃金時代，瀏覽器中涌現(xiàn)出眾多革新的 Web 功能，它們正以前所未有的速度重塑我們構(gòu)建Web應(yīng)用的方式，引領(lǐng)著全新的 Web 體驗浪潮。接下來，本文將深入探索這些令人矚目的新功能。
全新互動體驗
滾動驅(qū)動動畫
滾動驅(qū)動動畫是一種 CSS 動畫，它將動畫的進度與滾動事件相關(guān)聯(lián)，使得動畫效果可以根據(jù)用戶滾動頁面的行為來觸發(fā)和控制。這種動畫類型利用了CSS中的animation-timeline屬性，它可以創(chuàng)建與滾動進度或視圖變化相關(guān)的自定義時間線。
例如：
圖片
滾動驅(qū)動動畫的類型包括：
- 默認文檔時間線：這是 CSS 動畫傳統(tǒng)上使用的時間線，隨著文檔加載后時間的流逝而進展。
- 滾動進度時間線：這種時間線通過滾動一個可滾動元素來進展。滾動位置轉(zhuǎn)換為進度百分比，從0%開始到100%結(jié)束。
- 視圖進度時間線：這種時間線基于元素（稱為subject）在滾動器中的可見性變化來進展。默認情況下，當subject首次在滾動器的一端可見時，時間線為 0%，當它滾動到另一端時為100%。
例如，有一個圖片畫廊，希望當用戶滾動到圖片時，圖片能夠逐漸淡入顯示：
<div class="gallery">
<div class="image-wrapper">
<img src="image1.jpg" class="gallery-image">
</div>
<div class="image-wrapper">
<img src="image2.jpg" class="gallery-image">
</div>
<!-- 更多圖片 -->
<div class="scroll-stretcher"></div> <!-- 強制產(chǎn)生滾動條 -->
</div>為.gallery-image類設(shè)置animation-timeline屬性為scroll()，這將創(chuàng)建一個匿名的滾動進度時間線，當用戶滾動畫廊時，圖片會根據(jù)其在滾動容器中的進度逐漸淡入，透明度從0變?yōu)?，即完全可見。
.gallery {
position: relative;
height: 500px; /* 固定高度以產(chǎn)生滾動條 */
overflow-y: scroll;
}
.image-wrapper {
height: 300px; /* 圖片容器高度 */
position: relative;
}
.gallery-image {
width: 100%;
height: auto;
opacity: 0; /* 初始透明度為0，即完全透明 */
animation-name: fade-in;
animation-duration: 1s;
animation-fill-mode: forwards; /* 動畫完成后保持最終狀態(tài) */
/* 指定滾動時間線，這里使用匿名時間線 */
animation-timeline: scroll();
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.scroll-stretcher {
height: 2000px; /* 強制內(nèi)容超出容器高度，產(chǎn)生滾動條 */
}瀏覽器支持：
圖片
視圖過渡
視圖過渡是一個全新 Web API，它提供了一種更簡便的方法來在 DOM 狀態(tài)之間創(chuàng)建動畫效果，甚至可以在頁面加載之間實現(xiàn)動畫效果。在 Chromium 126 中提供了多頁面應(yīng)用的跨文檔視圖過渡支持。
例如：
圖片
假設(shè)有一個網(wǎng)頁，其中包含多個<section>元素，希望當用戶滾動頁面時，這些<section>元素能夠以不同的動畫效果進入和退出視口。
<section class="view-transition" id="section1">Section 1 Content</section>
<section class="view-transition" id="section2">Section 2 Content</section>所有<section>元素定義一個共同的view-transition-name，這樣它們就可以參與到相同的視圖轉(zhuǎn)換中。使用@keyframes定義兩個動畫效果：enterViewport和exitViewport，分別用于元素進入和退出視口時的動畫。通過animation-name將進入視口的動畫效果應(yīng)用到.view-transition類上。當用戶滾動頁面，使得<section>元素進入或退出視口時，相應(yīng)的動畫效果將被觸發(fā)。
.view-transition {
/* 定義視圖轉(zhuǎn)換名稱 */
view-transition-name: section-transition;
/* 其他樣式... */
}
/* 定義進入視口時的動畫效果 */
@keyframes enterViewport {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 定義退出視口時的動畫效果 */
@keyframes exitViewport {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(20px);
}
}
/* 應(yīng)用動畫到視圖轉(zhuǎn)換 */
.view-transition {
animation-name: enterViewport;
animation-fill-mode: both;
animation-duration: 1s;
}瀏覽器支持：
圖片
全新 UI 組件
Popover API
Popover API 是一種新的Web API，旨在簡化創(chuàng)建和管理彈出式交互的復雜性，用于在網(wǎng)頁上創(chuàng)建和管理浮動內(nèi)容（也稱為彈出框、彈出窗口或氣泡提示）的接口或技術(shù)。
在 HTML 中可以使用popover屬性將一個元素標記為彈出框，并為其設(shè)置一個 id：
<div id="simple-popover" popover>
前端充電寶
</div>可以使用一個按鈕來控制這個彈出框，使用popovertarget屬性指向彈出框的 id 即可完成綁定：
<button popovertarget="simple-popover">打開彈出框</button>還可以通過控制 popovertargetaction 屬性的值來控制 popover 的行為：hide（隱藏）、show（顯示）或默認的toggle（切換）。
上面例子的效果如下，我們可以自己定義彈出框的樣式和行為：
圖片
瀏覽器支持：
圖片
錨點定位
CSS 錨點定位 API 允許原生地將元素相對于其他元素（稱為錨點）進行定位。錨點定位提供了一種強大的工具，用于構(gòu)建復雜的用戶界面，如菜單、子菜單、工具提示、彈出框（popover）、對話框（dialog）、卡片等，這些元素需要相對于頁面上的其他元素進行精確放置。
例如，讓對話框始終放在點擊按鈕的正下方：
圖片
假設(shè)有一個按鈕（錨點），當用戶點擊該按鈕時，想要在頁面上顯示一個消息框（作為定位元素），并且該消息框應(yīng)該出現(xiàn)在按鈕的正下方。首先，需要給按鈕元素添加一個 anchor-name 屬性，為其指定一個唯一的標識符。
<button class="anchor-button" anchor-name="my-anchor">點擊我</button>然后，在 CSS 中，可以使用 position-anchor 屬性或 anchor() 函數(shù)將消息框與錨點關(guān)聯(lián)起來，并指定其位置。
.anchored-message {
position-anchor: my-anchor; /* 隱式錨點 */
position: absolute;
top: 100%; /* 相對于錨點的底部 */
left: 0; /* 相對于錨點的左側(cè) */
/* 其他樣式... */
}或者，使用 anchor() 函數(shù)進行更復雜的定位：
.anchored-message {
position: absolute;
top: anchor(bottom) + 10px; /* 相對于錨點底部下方 10px */
left: anchor(left); /* 相對于錨點左側(cè) */
/* 其他樣式... */
}瀏覽器支持：
圖片
獨占式手風琴
實現(xiàn)手風琴組件時需要將幾個<details>元素組合在一起，通過視覺分組來表明它們之間的聯(lián)系。在 Chrome 120 中，引入了一項新功能，即在<details>元素上支持name屬性。使用這個屬性時，具有相同名稱值的多個<details>元素會形成一個語義組合。該組合中最多只能打開一個元素：當打開該組合中的一個<details>元素時，之前打開的一個將自動關(guān)閉，這種手風琴稱為獨占式手風琴。
<details name="my-accordion">
<summary>Summary 1</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p>
</details>
<details name="my-accordion" open>
<summary>Summary 2</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p>
</details>
<details name="my-accordion">
<summary>Summary 3</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas delectus quibusdam, eum, aperiam sunt non dolorum pariatur molestias suscipit aut quia quas vero, illo quisquam nostrum sequi excepturi. Aliquam, obcaecati?</p>
</details>作為獨占式手風琴的一部分的<details>元素不一定需要是兄弟元素，它們可以散布在文檔任意位置。
瀏覽器支持：
圖片
:user-valid 和 :user-invalid
:user-valid 和 :user-invalid 偽類的行為類似于 :valid 和 :invalid，但只有在用戶與輸入進行了重要交互之后，才匹配表單控件。即使用戶尚未開始與頁面進行交互，必填但是空的表單控件將匹配 :invalid。只有當用戶更改輸入并將其保留在無效狀態(tài)時，該控件才會匹配 :user-invali。有了這兩個偽類，就不再需要編寫有狀態(tài)的代碼來跟蹤用戶已更改的輸入。
input:user-valid,
select:user-valid,
textarea:user-valid {
--state-color: green;
--bg: linear-gradient(45deg in oklch, lime, #02c3ff);
}
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
--state-color: red;
--bg: linear-gradient(15deg in oklch, #ea00ff, #ffb472);
}瀏覽器支持：
field-sizing: content
field-sizing用于控制表單輸入元素（如輸入框input和文本域textarea）的尺寸調(diào)整方式，當為輸入框或文本域設(shè)置field-sizing: content;時，這些元素的大小會根據(jù)用戶輸入的內(nèi)容自動調(diào)整。
textarea {
field-sizing: content;
width: 200px; /* 可以設(shè)置一個固定的寬度 */
min-height: 40px; /* 可以設(shè)置一個最小高度，以防止元素過小 */
}瀏覽器支持：
在下拉菜單中添加分隔線
在<select>元素中使用<hr>是一項小而實用的特性，用于在選擇列表中清晰分隔內(nèi)容。
<label for="major-select">Please select a major:</label> <br/>
<select name="majors" id="major-select">
<option value="">Select a major</option>
<hr>
<option value="arth">Art History</option>
<option value="finearts">Fine Arts</option>
<option value="gdes">Graphic Design</option>
<option value="lit">Literature</option>
<option value="music">Music</option>
<hr>
<option value="aeroeng">Aerospace Engineering</option>
<option value="biochemeng">Biochemical Engineering</option>
<option value="civileng">Civil Engineering</option>
<option value="compeng">Computer Engineering</option>
<option value="eleng">Electrical Engineering</option>
<option value="mecheng">Mechanical Engineering</option>
</select>效果如下：
圖片
其他特性
原生 CSS 嵌套
目前所有主流瀏覽器都支持原生 CSS 嵌套。使用 CSS 嵌套，可以編寫更少的代碼，并且代碼更易于閱讀和維護。
在沒有CSS嵌套時，只能這樣輸入完整的選擇器路徑：
.parent1 .child1,
.parent2 .child1 {
color: red;
}
.parent1 .child2,
.parent2 .child2 {
color: green;
}
.parent1 .child2:hover,
.parent2 .child2:hover {
color: blue;
}使用新的原生嵌套語法，可以將子選擇器嵌套在父選擇器中：
.parent1, .parent2 {
.child1 {
color: red;
}
.child2 {
color: green;
&:hover {
color: blue;
}
}
}瀏覽器支持：
text-wrap：balance | pretty
在開發(fā)時，我們無法預知文本的樣式和長度。但瀏覽器內(nèi)置了文本換行的智能處理機制，如text-wrap：balance和text-wrap：pretty，它們能自動優(yōu)化文本布局，確保文本塊的和諧和美觀，同時避免孤立字符和不當?shù)倪B字符使用。這些功能無需手動干預，且適應(yīng)各種語言和文本內(nèi)容。
p {
text-wrap: balance;
}瀏覽器支持：
light-dark()
light-dark() 函數(shù)能夠根據(jù)當前顏色方案自動選擇兩種顏色中的一種進行輸出，從而實現(xiàn)顏色的自適應(yīng)顯示。該函數(shù)接受兩個顏色值作為其參數(shù)。根據(jù)正在使用的顏色方案，它將輸出第一個或第二個顏色參數(shù)。
light-dark(<color>, <color>);根據(jù)規(guī)范，如果使用的顏色方案是light或未知，則該函數(shù)計算為第一種顏色的計算值；如果使用的顏色方案是dark，則計算為第二種顏色的計算值。
使用的顏色方案不僅是用戶選擇的亮暗模式，還需要根據(jù)color-scheme屬性的值確定使用的顏色方案。color-scheme屬性可以指示元素使用哪種顏色方案進行渲染，這個方案會與用戶的偏好進行協(xié)商，最終確定使用的顏色方案。因此，在使用light-dark()函數(shù)時，還需要在CSS中包含對應(yīng)的color-scheme聲明，以確保函數(shù)能夠正確工作。
:root {
color-scheme: light dark;
}
:root {
--text-color: light-dark(#333, #ccc);
}對于上面的代碼，在淺色模式下返回第一個值，在深色模式下返回第二個值。
注意：light-dark() 函數(shù)的設(shè)計初衷是為了提供一個簡單的中間解決方案，僅支持亮色和暗色的切換，并僅適用于顏色值。
瀏覽器支持：
圖片
:has() 選擇器
在過去的 20 年里，開發(fā)者們一直期待在 CSS 中加入“父選擇器”。隨著在 Chrome 105 中引入:has()選擇器，這一愿望終于得以實現(xiàn)。
例如，可以使用.card:has(img.hero)選擇那些包含英雄圖像子元素的.card元素。
.card:has(.card__media) {
grid-template-areas:
"title"
"blurb"
"author"
"media";
padding-bottom: 0;
}瀏覽器支持：
容器查詢
容器查詢可以根據(jù)元素的父元素或祖先元素的大小來設(shè)置元素的樣式。這與傳統(tǒng)的媒體查詢有所不同，媒體查詢是基于整個瀏覽器視口的大小來設(shè)置樣式的。
要想設(shè)置容器查詢，需要給被查詢的元素設(shè)置 container-type 屬性來指定容器的類型。語法如下：
container-type: inline-size;例如：
.card-layout {
container-type: inline-size;
}
@container (min-width: 768px) {
.card {
display: grid;
font-size: 3rem;
color: blue;
}
}這樣，當容器 card-layout 的寬度大于 768px 時，其子元素 card 就使用 grid 布局。
瀏覽器支持：
圖片
