網路平台 3 月新知

探索 2022 年 3 月穩定版和 Beta 版網路瀏覽器提供的一些有趣功能。

穩定版瀏覽器

Chrome 99Chrome 100Firefox 98Safari 15.4 已成為穩定版。這將為平台帶來一批新功能,而許多附加的功能讓三者同時支援這項功能。在這篇文章中,我特別著重介紹可提升我們互通功能的新增項目,不過請務必查看版本資訊,瞭解每個引擎新增的所有功能。

Chrome 99 和 Safari 15.4 包含 Cascade Layers@layer at-rule 會定義階層式圖層,協助您控管具體性。他們加入 Firefox,因此 Cascade Layers 現在支援三種瀏覽器引擎。如要進一步瞭解 Cascade 圖層,請參閱瀏覽器即將推出 Cascade 圖層相關說明。

瀏覽器支援

  • 99
  • 99
  • 97
  • 15.4

資料來源

Chrome 100 包含 CSS mix-blend-mode 屬性的新 plus-lighter 值。當所有或部分的像素值相同時,這個函式對兩個元素交叉淡出時非常實用。如要進一步瞭解這個解決方法,請參閱「目前無法將兩個 DOM 元素交叉淡出」一文。

瀏覽器支援

  • 100
  • 100
  • 99
  • 9.1

Safari 15.4 包含 contain 屬性,可用於納入 CSS。

瀏覽器支援

  • 52
  • 79
  • 69
  • 15.4

資料來源

此外,Safari 15.4 中還使用 accent-color,可控制部分錶單控制項使用的強調色。

瀏覽器支援

  • 93
  • 93
  • 92
  • 15.4

資料來源

Firefox 98 和 Safari 15.4 到達了對話方塊的 <dialog> 元素。

瀏覽器支援

  • 37
  • 79
  • 98
  • 15.4

資料來源

Safari 15.4 也已完成對 :focus-visible 虛擬類別的支援。這個實作上的實作工作是由 Igalia 執行。

瀏覽器支援

  • 86
  • 86
  • 85
  • 15.4

資料來源

Beta 版瀏覽器版本

「Beta 版瀏覽器」可讓您預覽瀏覽器下一個穩定版本即將推出的功能。敬請把握這個大好機會,測試及移除哪些功能,以免影響網站在全球發布前受到影響。

3 月新推出的 Beta 版已於 Chrome 101Firefox 99 版。

Chrome 101 Beta 版包含 hwb 色彩標記法。這個數字會根據色調、白色和黑暗程度指定顏色。與其他色彩標記法一樣,選用的 Alpha 元件可指定不透明度。

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

瀏覽器支援

  • 101
  • 101
  • 96
  • 15

資料來源

Firefox 99 包含 Navigator 介面的 pdfViewerEnabled 屬性。這個屬性會指出瀏覽器是否支援內嵌顯示 PDF 檔案。

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

瀏覽器支援

  • 94
  • 94
  • 99
  • 16.4

資料來源

這些 Beta 版功能很快就會在穩定版瀏覽器中推出。

網路新手系列叢書部分