可用性#
在 2024 年，目標是所有瀏覽器都以相同的方式創建 accessible names 和 computed roles
display: contents;![[Pasted image 20240215135029.png]]
默認情況下只有 grid 的直接子元素可以參與 grid 布局
使用 display: contents ，可以將網格容器的子節點放置在網格上。這允許更多的語義標記，這對可訪問性非常有用。標記越有意義，輔助技術可以向其用戶提供的詳細信息就越多。但是，有一點需要注意：當前支持 display: contents 的任何瀏覽器都不會將具有該屬性的元素與其原始角色公開給可訪問性樹。
tip:
可訪問性的基礎是標籤的語義化，關注可訪問性的同時也在優化 DOM 結構使其更加現代化，也更有助於屏幕閱讀器等非直接視覺訪問的支持
嵌套 CSS#
當前的主流瀏覽器引擎都已經支持嵌套，但是實現標準規範略有差異，2024 年 interop 將會推進所有引擎以相同的方式支持嵌套，並且實現規範功能的覆蓋
tip
原生支持嵌套，有助於大量減少編譯出的 CSS 文件體積，這將原來預處理器的功能放到了引擎層面實現，隨著 CSS 高級特性的推進，預處理器遲早要被替代，如果你的項目重視 CSS 體積和網絡訪問速度，可以逐步將預處理的 CSS 功能進行替換，但是需要注意的是在規範推進和當前兼容之間找到平衡點
Custom Properties 自定義屬性#
允許在 CSS 中自定義屬性名，這可能會催生一些高級定義庫的誕生
支持 CSS 自定義屬性名，這項工作在 interop2023 中被包含，2024 的目標是完全可用
@property
Declarative Shadow DOM 使用 HTML 声明 shadow Dom#
這將有助於在 ssr 模式下使用 shadow dom，過去 shadow dom 和 ssr 結合是一件很困難的事因為沒有辦法生成 shodosrootmode
<host-element>
<template shadowrootmode="open">
<slot></slot>
</template>
<h2>Light content</h2>
</host-element>
這還將有助於避免未樣式化內容閃爍.
Chrome 111 和 Edge 111 中提供了較新的 shadowrootmode 屬性和流式傳輸行為。
font-size-adjust#
font-size-adjust CSS 屬性定義字體大小應取決於小寫字母，而不是大寫字母。在字體較小時，字體的可讀性主要由小寫字母的大小決定，通過此選項即可進行調整。
這項工作包括對 font-size-adjust 屬性的基本支持、對 from-font 關鍵字的支持以及對雙值語法的支持（這允許開發人員根據另一個指標來調整大小，而不僅僅是 x-height）。Firefox 和 Safari 都支持基本和 from-font 兩個值。Chrome 實現需要更新。
HTTP(S) URLs for WebSocket#
用於解決強制使用 ws: 和 wss: 不可以使用相對 URL 的問題當前 WebKit 已經採用，2024 推進到其他引擎
IndexedDB 索引數據庫#
推進 IndexDB version3 的規範實現
Layout 布局#
推進 flexbox、grid 和 subgrid。在某些情況下失效的問題
Pointer and mouse events#
指針事件是為指針設備觸發的 DOM 事件。它們旨在創建單個 DOM 事件模型來處理指向輸入設備，例如鼠標、筆 / 觸筆或觸摸（例如一個或多個手指）。
2024 推進更完善的測試
Popover#
推薦原生 dialog 標籤和 popover API 的測試問題，Firefox 即將發布，Chrome 和 Safari 已經實現
Relative Color Syntax 相對顏色算法#
基於一種顏色 使用 from 和 calc () 進行相對顏色映射，這將會更貼近真實設計，將會對未來項目的 UI 設計改變很大
HTMLVideoElement.requestVideoFrameCallback()#
高效的視頻處理 API，該回調在將新視頻幀發送到合成器時在渲染步驟中運行。這樣可以對視頻進行高效的每視頻幀操作，例如視頻處理和繪制到畫布、視頻分析或與外部音頻源同步。
這將會推進網頁視頻渲染的功能
Scrollbar styling 滾動條樣式#
重點關注 scrollbar-gutter 這個屬性，用於提前保留滾動條寬度，防止布局跳動
@starting-style and transition-behavior#
定義動畫起始和離散動畫啟用過度
Text directionality 文本方向性#
text-wrap: balance#
文本換行的新屬性值，主要用於標題和簡短文本的平衡
URL#
url 的範圍遠不止我們平時使用的這部分，還有解析特殊 url 行為並沒有被很好的支持，2024 會繼續推進