2024年，一大波 Web 新功能來襲！
2024年，Web UI 正迎來其前所未有的黃金時代，瀏覽器中涌現出眾多革新的 Web 功能，它們正以前所未有的速度重塑我們構建Web應用的方式，引領著全新的 Web 體驗浪潮。接下來，本文將深入探索這些令人矚目的新功能。
全新互動體驗
滾動驅動動畫
滾動驅動動畫是一種 CSS 動畫，它將動畫的進度與滾動事件相關聯，使得動畫效果可以根據用戶滾動頁面的行為來觸發(fā)和控制。這種動畫類型利用了CSS中的animation-timeline屬性，它可以創(chuàng)建與滾動進度或視圖變化相關的自定義時間線。
例如：
圖片
滾動驅動動畫的類型包括：
- 默認文檔時間線：這是 CSS 動畫傳統(tǒng)上使用的時間線，隨著文檔加載后時間的流逝而進展。
- 滾動進度時間線：這種時間線通過滾動一個可滾動元素來進展。滾動位置轉換為進度百分比，從0%開始到100%結束。
- 視圖進度時間線：這種時間線基于元素（稱為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> <!-- 強制產生滾動條 -->
</div>為.gallery-image類設置animation-timeline屬性為scroll()，這將創(chuàng)建一個匿名的滾動進度時間線，當用戶滾動畫廊時，圖片會根據其在滾動容器中的進度逐漸淡入，透明度從0變?yōu)?，即完全可見。
.gallery {
position: relative;
height: 500px; /* 固定高度以產生滾動條 */
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; /* 強制內容超出容器高度，產生滾動條 */
}瀏覽器支持：
圖片
視圖過渡
視圖過渡是一個全新 Web API，它提供了一種更簡便的方法來在 DOM 狀態(tài)之間創(chuàng)建動畫效果，甚至可以在頁面加載之間實現動畫效果。在 Chromium 126 中提供了多頁面應用的跨文檔視圖過渡支持。
例如：
圖片
假設有一個網頁，其中包含多個<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，這樣它們就可以參與到相同的視圖轉換中。使用@keyframes定義兩個動畫效果：enterViewport和exitViewport，分別用于元素進入和退出視口時的動畫。通過animation-name將進入視口的動畫效果應用到.view-transition類上。當用戶滾動頁面，使得<section>元素進入或退出視口時，相應的動畫效果將被觸發(fā)。
.view-transition {
/* 定義視圖轉換名稱 */
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);
}
}
/* 應用動畫到視圖轉換 */
.view-transition {
animation-name: enterViewport;
animation-fill-mode: both;
animation-duration: 1s;
}瀏覽器支持：
圖片
全新 UI 組件
Popover API
Popover API 是一種新的Web API，旨在簡化創(chuàng)建和管理彈出式交互的復雜性，用于在網頁上創(chuàng)建和管理浮動內容（也稱為彈出框、彈出窗口或氣泡提示）的接口或技術。
在 HTML 中可以使用popover屬性將一個元素標記為彈出框，并為其設置一個 id：
<div id="simple-popover" popover>
前端充電寶
</div>可以使用一個按鈕來控制這個彈出框，使用popovertarget屬性指向彈出框的 id 即可完成綁定：
<button popovertarget="simple-popover">打開彈出框</button>還可以通過控制 popovertargetaction 屬性的值來控制 popover 的行為：hide（隱藏）、show（顯示）或默認的toggle（切換）。
上面例子的效果如下，我們可以自己定義彈出框的樣式和行為：
圖片
瀏覽器支持：
圖片
錨點定位
CSS 錨點定位 API 允許原生地將元素相對于其他元素（稱為錨點）進行定位。錨點定位提供了一種強大的工具，用于構建復雜的用戶界面，如菜單、子菜單、工具提示、彈出框（popover）、對話框（dialog）、卡片等，這些元素需要相對于頁面上的其他元素進行精確放置。
例如，讓對話框始終放在點擊按鈕的正下方：
圖片
假設有一個按鈕（錨點），當用戶點擊該按鈕時，想要在頁面上顯示一個消息框（作為定位元素），并且該消息框應該出現在按鈕的正下方。首先，需要給按鈕元素添加一個 anchor-name 屬性，為其指定一個唯一的標識符。
<button class="anchor-button" anchor-name="my-anchor">點擊我</button>然后，在 CSS 中，可以使用 position-anchor 屬性或 anchor() 函數將消息框與錨點關聯起來，并指定其位置。
.anchored-message {
position-anchor: my-anchor; /* 隱式錨點 */
position: absolute;
top: 100%; /* 相對于錨點的底部 */
left: 0; /* 相對于錨點的左側 */
/* 其他樣式... */
}或者，使用 anchor() 函數進行更復雜的定位：
.anchored-message {
position: absolute;
top: anchor(bottom) + 10px; /* 相對于錨點底部下方 10px */
left: anchor(left); /* 相對于錨點左側 */
/* 其他樣式... */
}瀏覽器支持：
圖片
獨占式手風琴
實現手風琴組件時需要將幾個<details>元素組合在一起，通過視覺分組來表明它們之間的聯系。在 Chrome 120 中，引入了一項新功能，即在<details>元素上支持name屬性。使用這個屬性時，具有相同名稱值的多個<details>元素會形成一個語義組合。該組合中最多只能打開一個元素：當打開該組合中的一個<details>元素時，之前打開的一個將自動關閉，這種手風琴稱為獨占式手風琴。
<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）的尺寸調整方式，當為輸入框或文本域設置field-sizing: content;時，這些元素的大小會根據用戶輸入的內容自動調整。
textarea {
field-sizing: content;
width: 200px; /* 可以設置一個固定的寬度 */
min-height: 40px; /* 可以設置一個最小高度，以防止元素過小 */
}瀏覽器支持：
在下拉菜單中添加分隔線
在<select>元素中使用<hr>是一項小而實用的特性，用于在選擇列表中清晰分隔內容。
<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ā)時，我們無法預知文本的樣式和長度。但瀏覽器內置了文本換行的智能處理機制，如text-wrap：balance和text-wrap：pretty，它們能自動優(yōu)化文本布局，確保文本塊的和諧和美觀，同時避免孤立字符和不當的連字符使用。這些功能無需手動干預，且適應各種語言和文本內容。
p {
text-wrap: balance;
}瀏覽器支持：
light-dark()
light-dark() 函數能夠根據當前顏色方案自動選擇兩種顏色中的一種進行輸出，從而實現顏色的自適應顯示。該函數接受兩個顏色值作為其參數。根據正在使用的顏色方案，它將輸出第一個或第二個顏色參數。
light-dark(<color>, <color>);根據規(guī)范，如果使用的顏色方案是light或未知，則該函數計算為第一種顏色的計算值；如果使用的顏色方案是dark，則計算為第二種顏色的計算值。
使用的顏色方案不僅是用戶選擇的亮暗模式，還需要根據color-scheme屬性的值確定使用的顏色方案。color-scheme屬性可以指示元素使用哪種顏色方案進行渲染，這個方案會與用戶的偏好進行協商，最終確定使用的顏色方案。因此，在使用light-dark()函數時，還需要在CSS中包含對應的color-scheme聲明，以確保函數能夠正確工作。
:root {
color-scheme: light dark;
}
:root {
--text-color: light-dark(#333, #ccc);
}對于上面的代碼，在淺色模式下返回第一個值，在深色模式下返回第二個值。
注意：light-dark() 函數的設計初衷是為了提供一個簡單的中間解決方案，僅支持亮色和暗色的切換，并僅適用于顏色值。
瀏覽器支持：
圖片
:has() 選擇器
在過去的 20 年里，開發(fā)者們一直期待在 CSS 中加入“父選擇器”。隨著在 Chrome 105 中引入:has()選擇器，這一愿望終于得以實現。
例如，可以使用.card:has(img.hero)選擇那些包含英雄圖像子元素的.card元素。
.card:has(.card__media) {
grid-template-areas:
"title"
"blurb"
"author"
"media";
padding-bottom: 0;
}瀏覽器支持：
容器查詢
容器查詢可以根據元素的父元素或祖先元素的大小來設置元素的樣式。這與傳統(tǒng)的媒體查詢有所不同，媒體查詢是基于整個瀏覽器視口的大小來設置樣式的。
要想設置容器查詢，需要給被查詢的元素設置 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 布局。
瀏覽器支持：
圖片
