HTML 也一直在高速發(fā)展，今天我們一起來(lái)看看 HTML 最近有哪些值得關(guān)注的新特性。
可以定制樣式的下拉菜單 瀏覽器為了保持向后兼容性，并不會(huì)貿(mào)然改變像 <select> 和 <option> 這些元素的樣式。這時(shí)候，一個(gè)巧妙的引入便是“選擇加入”機(jī)制，它讓開發(fā)者在可控的情況下，自由施展創(chuàng)意。起初，大家期待的解決方案是新元素 <selectmenu>，但它在漸進(jìn)增強(qiáng)的表現(xiàn)上并不理想。最終，CSS 提供了一種更加靈活的方法：
select ,::picker(select) {appearance : base-select;這種新方式讓 <select> 的內(nèi)嵌元素能夠獲得更為自由的樣式定義，為我們打開了設(shè)計(jì)選擇控件的新大門。例如，現(xiàn)在你可以在 <select> 中插入按鈕和圖像，從而創(chuàng)造出更視覺化的用戶選擇體驗(yàn)：
<select class ="country-select" > <button > <selectedoption > </selectedoption > </button > <option value ="" hidden > <figure > </figure > <span > 選擇一個(gè)國(guó)家</span > </option > <option value ="andorra" > <img src ="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Flag_of_Andorra.svg/120px-Flag_of_Andorra.svg.png" alt ="" /> <span > 安道爾</span > </option > <!-- 更多選項(xiàng) --> </select >
可以增加分割線的下拉菜單 講到 HTML 的老派元素，它們總是能以意想不到的方式令人耳目一新。就像我們熟悉的 <details> 元素通過(guò) name 屬性能實(shí)現(xiàn)手風(fēng)琴效果一樣經(jīng)典。在 <select> 菜單中，你也可以用 <hr> 元素來(lái)增加一條簡(jiǎn)單的橫線。
這聽起來(lái)是不是很酷？最初我們可能習(xí)慣通過(guò) <optgroup label="組名"> 來(lái)進(jìn)行分組，不過(guò)在一些場(chǎng)景中，簡(jiǎn)單直接的一條線反而能更好地表達(dá)層次感和視覺分隔。
比如看下面這個(gè)例子：
<select > <option > 蘋果</option > <option > 橙子</option > <option > 香蕉</option > <hr > <option > 辣椒</option > <option > 西葫蘆</option > <option > 西蘭花</option > </select > 這條線安靜地躺在菜單中，中規(guī)中矩，卻直觀地將水果與蔬菜分隔開。這樣的設(shè)計(jì)方法無(wú)需復(fù)雜的代碼，卻足以為 UI 增添別樣的細(xì)節(jié)，簡(jiǎn)約而不簡(jiǎn)單。
直接用操控 Popover 現(xiàn)在，你可以使用按鈕輕松開啟或關(guān)閉一個(gè) Popover，無(wú)需編寫一行 JavaScript 代碼。這為網(wǎng)頁(yè)交互提供了更為直觀的操作方式。
示例：
<button popovertarget ="the-popover" > 打開 Popover</button > <div popover id ="the-popover" > <button popovertarget ="the-popover" > 關(guān)閉 Popover</button > </div > 如果你希望用戶只需點(diǎn)擊 Popover 外部任意位置即可關(guān)閉它，那么只需將 popover 屬性改為 popover="auto" 即可，這種交互方式通常被稱為“輕量級(jí)消失”。
這些與按鈕關(guān)聯(lián)的目標(biāo)行為，被稱為“調(diào)用者（Invoker）”，預(yù)示著在未來(lái)幾年 HTML 將獲得更強(qiáng)大的功能。
雖然 Popover 不能像 <dialog> 那樣通過(guò)表單提交來(lái)關(guān)閉，但考慮到 Popover 并不是適合放入表單的地方，這點(diǎn)限制反而顯得無(wú)關(guān)緊要。一個(gè)有趣的小細(xì)節(jié)是，你可以將 <dialog> 設(shè)為 Popover，從而輕松獲得這種按鈕操作。
雖然對(duì)話框與 Popover 各有差異，但都非常實(shí)用。也許它們最重要的兩個(gè)特性是：它們擁有的焦點(diǎn)限制能力，以及它們被提升到網(wǎng)站渲染的“頂層”，使得無(wú)需煩惱 z-index 的調(diào)整。
目前，Popover 的位置定位基本上局限于居中或邊緣，像對(duì)話框一樣，還不支持錨點(diǎn)定位。但這種能力預(yù)計(jì)在 2026 年將實(shí)現(xiàn)跨瀏覽器的兼容。
Checkbox 輕松變身 Toggle 復(fù)選框迎來(lái)了全新的可能性 — 它們可以在不費(fèi)吹灰之力的情況下變身為 Toggle 開關(guān)。你只需簡(jiǎn)單地使用一個(gè)屬性：
<input type ="checkbox" switch >
目前這一特性僅在 Safari 瀏覽器中有效，而且尚未有正式的規(guī)范。
使用 <search> 簡(jiǎn)化搜索 在網(wǎng)頁(yè)設(shè)計(jì)中，許多人可能曾一度忘記為搜索區(qū)域正確地添加角色屬性，或者發(fā)現(xiàn)使用 <div role="search"> 不夠直觀。現(xiàn)在，HTML 提供了一種更加直接的方法：使用 <search> 標(biāo)簽。
<search > <!-- 你的搜索表單或組件 --> </search > 這個(gè)小小的標(biāo)簽為開發(fā)者提供了一種更簡(jiǎn)潔、易記的方式來(lái)標(biāo)記頁(yè)面中的搜索區(qū)域。不再需要額外的角色屬性，只需簡(jiǎn)單地將搜索相關(guān)的內(nèi)容包裹在 <search> 標(biāo)簽內(nèi)，即可保證語(yǔ)義的明確性。
不再需要 noopener noreferrer 在過(guò)去的一段時(shí)間里，開發(fā)者們往往會(huì)在使用 _blank 打開新頁(yè)面的鏈接中添加 rel="noopener noreferrer" 屬性。這種做法主要是為了防患于未然，避免在新開頁(yè)面中可能出現(xiàn)的安全問(wèn)題，比如泄露引用者信息或被釣魚攻擊。
<a href ="https://conardLi.top" target ="_blank" rel ="noopener noreferrer" 但你或許不知道，自從 2021 年開始，主流瀏覽器（其中最后一個(gè)是 Chrome）已經(jīng)自動(dòng)為 _blank 鏈接應(yīng)用該行為，這意味著這種手動(dòng)添加的方式在很多情況下已經(jīng)不再必要。
我個(gè)人在項(xiàng)目中也曾因使用代碼檢查工具（linter）而被時(shí)常提醒，繼續(xù)保持這樣的代碼習(xí)慣。為了確保代碼的安全性和兼容性，我們有必要定期審視這些工具的配置，并根據(jù)當(dāng)前的瀏覽器支持情況進(jìn)行相應(yīng)調(diào)整。別再為過(guò)去的做法感到拘謹(jǐn)，可以在確保安全的情況下，清理那些不再需要的冗余代碼，讓項(xiàng)目更加簡(jiǎn)潔高效。
聲明式 Shadow DOM 在 Web 組件的發(fā)展歷程中，過(guò)去要想使用 Shadow DOM，只能依賴 JavaScript 渲染。這種實(shí)現(xiàn)方式讓使用 Shadow DOM 的 Web 組件在服務(wù)器端渲染（SSR）上寸步難行，形成了一個(gè)關(guān)鍵性短板。然而，所有主要的 UI 框架都越來(lái)越重視 SSR，因?yàn)樗茱@著提高性能、加載速度、SEO 以及增強(qiáng)網(wǎng)頁(yè)的彈性。
隨著聲明式 Shadow DOM 的出現(xiàn)，這一局限被打破。現(xiàn)在，開發(fā)者可以實(shí)現(xiàn)完全不依賴 JavaScript 的 Shadow DOM 應(yīng)用。
聲明式 Shadow DOM 被視作一種基礎(chǔ)工具，更多時(shí)候?qū)⒂蓭?kù)或框架來(lái)封裝使用，以提升開發(fā)者的體驗(yàn)，而非手動(dòng)書寫。
過(guò)去，React 19 是最后一個(gè)完整支持 Web 組件的框架。未來(lái)，我們可能會(huì)看到框架不僅僅是支持 Web 組件，而是全面接受和擁抱它們。也許不久的將來(lái)，一個(gè)類似于 Next.js 的 Web 組件框架將應(yīng)運(yùn)而生。
Import Maps 導(dǎo)入模塊 在 JavaScript 開發(fā)中，我們習(xí)慣了用這樣的方式來(lái)導(dǎo)入模塊：
import React from "react" ;乍一看，這似乎是 ES 模塊的代碼。但如果你仔細(xì)觀察，會(huì)發(fā)現(xiàn)字符串里的路徑既不是絕對(duì) URL，也不是相對(duì)路徑。我們只是習(xí)慣這么寫，因?yàn)?JavaScript 打包工具會(huì)識(shí)別它為 npm 包，并自動(dòng)從 node_modules 文件夾中查找。
然而，如今情況發(fā)生了變化。通過(guò) HTML 的 Import Maps，我們可以將諸如 "react" 這樣的值映射到實(shí)際的 URL 上，從而直接在瀏覽器中導(dǎo)入。
舉個(gè)例子，如果你從一個(gè)包含如下 Import Map 的 HTML 文件中執(zhí)行上述 JavaScript：
<script type ="importmap" > "imports" : {"react" : "https://esm.sh/react@18" ,"reactdom" : "https://esm.sh/react-dom@18" </script > 那么，這段代碼將能夠從指定的位置導(dǎo)入 React 和 React DOM，而不需要借助打包工具。這樣一來(lái)，即使省去繁雜的工具配置，依然可以保持模塊導(dǎo)入的抽象化。
讓頁(yè)面靜止：inert 屬性 在前端開發(fā)中，有時(shí)我們需要將某些元素暫時(shí)“隱藏”起來(lái)，從用戶視角和交互上完全忽略。這時(shí)，新的 inert 屬性就派上了用場(chǎng)。通過(guò)簡(jiǎn)單地設(shè)置元素的 inert 屬性，整個(gè)元素及其子元素會(huì)從交互中消失。它們無(wú)法被點(diǎn)擊、聚焦，也會(huì)從可訪問(wèn)性樹中移除，甚至頁(yè)面的“查找”功能也無(wú)法選中其中的文本。
這項(xiàng)功能在構(gòu)建復(fù)雜交互時(shí)顯得尤其有用。例如，在一個(gè)多步驟的表單中，可以將所有步驟預(yù)先放在 DOM 中，但將不當(dāng)前步驟的部分設(shè)置為 inert，確保用戶無(wú)法誤用到未來(lái)或已完成的步驟，這樣的做法會(huì)極大提升用戶體驗(yàn)和流程的嚴(yán)謹(jǐn)性。
有人可能會(huì)想到用這功能來(lái)實(shí)現(xiàn)模態(tài)框（modal），而 HTML 中的 <dialog> 標(biāo)簽為此提供了天然支持，使得構(gòu)建和管理模態(tài)框變得更加簡(jiǎn)單和靈活，只需適當(dāng)?shù)厥褂眉纯伞?/p>
多頁(yè)面視圖過(guò)渡 在以往的前端開發(fā)中，頁(yè)面之間的跳轉(zhuǎn)常常是直接刷新導(dǎo)致的生硬切換。然而，現(xiàn)在通過(guò)加入簡(jiǎn)單的 CSS 規(guī)則，我們可以實(shí)現(xiàn)流暢的多頁(yè)面視圖過(guò)渡：
@view-transition {navigation : auto ;一旦啟用這一特性，常規(guī)點(diǎn)擊鏈接導(dǎo)致的新頁(yè)面跳轉(zhuǎn)（在同一域名內(nèi)）將能具備視圖過(guò)渡效果。默認(rèn)情況下，這將為頁(yè)面切換添加淡入淡出的效果，令用戶的瀏覽體驗(yàn)更加順滑。同時(shí)，這也為開發(fā)者提供了豐富的動(dòng)畫控制，能在頁(yè)面加載之間設(shè)計(jì)出更加吸引人的過(guò)渡效果。
雖然視圖過(guò)渡依賴于 CSS 的開啟，但其真正的魅力和實(shí)用性更多地體現(xiàn)在 HTML 的應(yīng)用中。想象一下如下代碼：
<!-- 首頁(yè) --> <div class ="card" > <h3 style ="view-transition-name: post-title-087afd;" > 博客文章標(biāo)題</h3 > <p > ...</p > <a href ="/blog-post" > 閱讀完整文章《博客文章標(biāo)題》</a > </div > <!-- 博客文章頁(yè) --> <article > <h1 style ="view-transition-name: post-title-087afd;" > 博客文章標(biāo)題</h1 > <p > ...</p > </article > 在這個(gè)例子中，我們將“卡片”視作一種從數(shù)據(jù)中生成的組件，并且這種組件可能是頁(yè)面上的眾多之一。因此，使用唯一的 view-transition-name 是實(shí)現(xiàn)細(xì)膩過(guò)渡效果的關(guān)鍵，而最好的介入點(diǎn)無(wú)疑是在 HTML 之中。
響應(yīng)式視頻 現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中，響應(yīng)式圖像已經(jīng)是提升網(wǎng)站性能和用戶體驗(yàn)的常用技術(shù)。通過(guò) HTML 提供的 <picture> 元素，我們可以靈活地控制 <source> ，根據(jù)不同條件切換源圖像，實(shí)現(xiàn)了內(nèi)容的最佳展示。這個(gè)強(qiáng)大的概念原本源自 <video> 標(biāo)簽，但由于一些原因，它曾從大多數(shù)瀏覽器中消失。然而，如今得益于 Scott Jehl 和他的團(tuán)隊(duì)的努力，這一功能榮耀歸來(lái)。
借助 media 屬性，我們能夠?yàn)橐曨l源添加條件控制。雖然在實(shí)踐中，更多的可能是用于寬度查詢，但它幾乎能處理任何媒介特性。以下是一個(gè)簡(jiǎn)單的例子：
<video autoplay controls playsinline muted loop > <source media ="(orientation: landscape)" src ="sunset-landscape-1080.mp4" > <source src ="sunset-portrait-1080.mp4" > </video > 在這個(gè)例子中，我們根據(jù)設(shè)備的方向進(jìn)行視頻選擇：在橫向（landscape）模式下加載一個(gè)視頻文件，而在其他情況加載另一個(gè)。這使得視頻內(nèi)容可以根據(jù)用戶的設(shè)備特性進(jìn)行動(dòng)態(tài)調(diào)整，不僅保證了視覺效果的一致性，也顯著優(yōu)化了網(wǎng)絡(luò)性能。
詳細(xì)了解請(qǐng)看這個(gè)例子：https://www.htmhell.dev/adventcalendar/2024/19/
利用 <details> 標(biāo)簽創(chuàng)建交互式手風(fēng)琴效果 在網(wǎng)頁(yè)設(shè)計(jì)中， <details> 和 <summary> 標(biāo)簽已經(jīng)被廣泛使用，以便創(chuàng)建簡(jiǎn)潔的折疊內(nèi)容。自 2016 年以來(lái)，瀏覽器對(duì)這對(duì)標(biāo)簽的支持已經(jīng)成熟，不過(guò)近來(lái)這些功能又有了新的增強(qiáng)和清理。
開發(fā)者現(xiàn)在可以通過(guò)使用 name 屬性將 <details> 元素組合在一起，從而實(shí)現(xiàn)“獨(dú)占”手風(fēng)琴效果——即一次只能打開一個(gè)內(nèi)容塊：
<details name ="group" > <summary > 第一項(xiàng)</summary > ... </details > <details name ="group" > <summary > 第二項(xiàng)</summary > ... </details > <details name ="group" > <summary > 第三項(xiàng)</summary > ... </details > <details name ="group" > <summary > 第四項(xiàng)</summary > ... </details > 雖然有些人認(rèn)為一次只能打開一個(gè)是反用戶體驗(yàn)的，因?yàn)樗鼤?huì)自動(dòng)關(guān)閉用戶可能想保持打開的內(nèi)容，但在特定的網(wǎng)頁(yè)設(shè)計(jì)中這一特性可能會(huì)很有效。然而，使用“手風(fēng)琴”這個(gè)術(shù)語(yǔ)來(lái)描述這種模式還是頗為恰當(dāng)?shù)摹Ｍ瑫r(shí)，我們也必須注意到，使用這種模式在可訪問(wèn)性上可能存在一些問(wèn)題。例如，用于常見問(wèn)題解答部分時(shí)，如果每個(gè)問(wèn)題通常會(huì)作為類似 <h3> 這樣的標(biāo)題，那么 <summary> 會(huì)將這種語(yǔ)義抹去，使其變成一個(gè)“按鈕”。這種做法在語(yǔ)義上不夠理想。
此外， <details> 元素可以在 Flexbox 布局中使用，表現(xiàn)得體。然而，僅最近這些表現(xiàn)有所改進(jìn)。
在 CSS 方面，現(xiàn)在引入了一個(gè)新的選擇器 ::details-content，幫助我們?cè)L問(wèn)和處理 <details> 中的 HTML 內(nèi)容。這使得創(chuàng)建帶有動(dòng)畫效果的折疊內(nèi)容變得更加簡(jiǎn)便，只需利用 HTML 和 CSS 即可實(shí)現(xiàn)開關(guān)動(dòng)畫。
閱讀原文：原文鏈接
400 186 1886
