探索 2022 年 3 月穩定版和 Beta 版網路瀏覽器提供的一些有趣功能。
穩定版瀏覽器
Chrome 99、Chrome 100、Firefox 98 和 Safari 15.4 已成為穩定版。這將為平台帶來一批新功能,而許多附加的功能讓三者同時支援這項功能。在這篇文章中,我特別著重介紹可提升我們互通功能的新增項目,不過請務必查看版本資訊,瞭解每個引擎新增的所有功能。
Chrome 99 和 Safari 15.4 包含 Cascade Layers。@layer
at-rule 會定義階層式圖層,協助您控管具體性。他們加入 Firefox,因此 Cascade Layers 現在支援三種瀏覽器引擎。如要進一步瞭解 Cascade 圖層,請參閱瀏覽器即將推出 Cascade 圖層相關說明。
Chrome 100 包含 CSS mix-blend-mode 屬性的新 plus-lighter
值。當所有或部分的像素值相同時,這個函式對兩個元素交叉淡出時非常實用。如要進一步瞭解這個解決方法,請參閱「目前無法將兩個 DOM 元素交叉淡出」一文。
瀏覽器支援
- 100
- 100
- 99
- 9.1
Safari 15.4 包含 contain
屬性,可用於納入 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 版功能很快就會在穩定版瀏覽器中推出。
網路新手系列叢書部分