瞭解 2022 年 3 月期間,穩定版和 Beta 版網頁瀏覽器推出的幾項實用功能。
穩定版瀏覽器
Chrome 99、Chrome 100、Firefox 98 和 Safari 15.4 已於 3 月穩定運作。這項更新為平台帶來一整套新功能,其中許多新增功能可在所有三個瀏覽器引擎中使用。在這篇文章中,我會著重介紹可跨瀏覽器互通的新增功能,但請查看發布說明,瞭解各個引擎新增的所有功能。
Chrome 99 和 Safari 15.4 包含分層連結。@layer
at-rule 定義了層疊層級,可協助您控制特定性。這些元件會加入 Firefox,因此現在,這三種瀏覽器引擎都能使用 Cascade Layers。如要進一步瞭解層疊式圖層,請參閱「層疊式圖層即將在瀏覽器中推出」一文。
Chrome 100 為 CSS mix-blend-mode 屬性提供 plus-lighter
的新值。當所有或部分像素皆具有相同值時,您可以使用這個值來交錯淡出兩個元素。如要進一步瞭解這個解決方案解決的問題,請參閱「目前無法交叉淡出任何兩個 DOM 元素」。
瀏覽器支援
Safari 15.4 包含 contain
屬性,可讓 CSS 納入 CSS。
Safari 15.4 也提供 accent-color
,可控制部分表單控制項使用的重點顏色。
Firefox 98 和 Safari 15.4 導向了代表對話方塊的 <dialog>
元素。
Safari 15.4 也完成了對 :focus-visible
擬似類別的支援。這項作業的實作工作是由 Igalia 提供。
Beta 版瀏覽器
瀏覽器 Beta 版可讓您預覽瀏覽器下一個穩定版的內容。在正式發布前,您可以測試可能會影響網站的新功能或移除項目。
3 月的最新 Beta 版為 Chrome 101 和 Firefox 99。
Chrome 101 Beta 版包含 hwb 色彩符號。這項屬性會根據色調、白度和黑度指定顏色。和其他色彩標記法一樣,選用的 Alpha 元件會指定不透明度。
h1 {
color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}
Firefox 99 包含 Navigator 介面的 pdfViewerEnabled
屬性。此屬性指出瀏覽器是否支援以內嵌方式顯示 PDF 檔案。
if (!navigator.pdfViewerEnabled) {
// The browser does not support inline viewing of PDF files.
}
這些 Beta 版功能很快就會納入穩定版瀏覽器。
網路系列新作精選內容