互通性 2024 年中旬更新

隨著今年進入下半年,是時候來看看 Interop 2024 如何改善今年的網頁互通性。

今年初,Chrome 實驗版瀏覽器的支援分數為 83 分。

資訊主頁顯示分數:Interop: 65、Investigations: 0、Chrome Canary: 83、Edge Dev: 82、Firefox Nightly: 80、Safari Technology Preview: 79。
2024 年 2 月的 Interop 2024 資訊主頁。
資訊主頁顯示分數:Interop: 75、Investigations: 5、Chrome Canary: 90、Edge Dev: 89、Firefox Nightly: 87、Safari Technology Preview: 88。
2024 年互通性資訊主頁 (2024 年 6 月底)。

目前的分數為 90,穩定版瀏覽器的分數則是 85,這是在 6 月發布 Chrome 126 後的結果。整體實驗性互通分數提高了 10 分,這篇文章將分享一些有助於提升分數的功能。

彈出式視窗

彈出式視窗已於 2024 年 4 月成為「新推出」基準的一部分。彈出式視窗很有趣,因為您需要建構的許多 UI 功能,例如選單、工具提示、用於選取的疊加層,以及教學 UI,都是彈出式視窗的一種。在彈出式視窗推出前,建立任何這類功能都需要大量自訂程式碼。程式碼可確保不會一次開啟多個元素,或在使用者按一下元素外部時啟用輕量式關閉功能。您也可能會遇到 z-index 的問題,無法確保 UI 元素會顯示在介面其他元素之上。

Popover API 包含所有這些功能和更多功能,可節省開發時間,並協助您建立效能更高且更易於存取的介面。舉例來說,下列程式碼會建立具有輕型關閉功能的彈出式視窗,當您開啟時,系統會自動關閉其他彈出式視窗。

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

如要進一步瞭解,請參閱「Popover API 在 Baseline 中上線」一文。許多應用程式都已體驗到 Popover 的優點。Tokopedia 善用這項功能,在非支援的瀏覽器上使用 polyfill,因此大幅減少 React 程式碼的數量

使用 @property 的進階自訂屬性

@property CSS 規則可讓您建立進階自訂屬性,提供比標準自訂屬性更詳細的名稱和值。設定允許的語法,定義此屬性可保留的資料類型,例如顏色、數字或長度。接著設定屬性是否會繼承,以及初始值。

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

@property 規則目前可改善 Firefox 的實驗分數,並在 Firefox 128 於本月稍晚推出時提升穩定分數。並與「Baseline Newly Available」彙整。

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

如要進一步瞭解,請參閱「@property:為 CSS 變數提供超能力」。

font-size-adjust 屬性

您可以使用 CSS font-size-adjust 屬性,修改小寫字母相對於大寫字母的大小。這在可能發生字型備用情況的情況下特別實用,因為這有助於確保備用字型仍可讀取,尤其是在字型大小較小的情況下。

font-size-adjust 屬性目前已納入 Chrome 實驗分數,但在本月推出的 Chrome 127 時,這項屬性會提高穩定分數。並加入「新推出」基準。

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

text-wrap: balance

使用 text-wrap: balance 可指示瀏覽器找出文字的最佳平衡換行方式。這項功能特別適合用於標題,例如可避免標題在第二行中以單字結尾。

Safari 最近已開始支援這項功能,其他瀏覽器也正在努力修正失敗的測試,確保這項功能可在所有瀏覽器上正常運作。

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source


除了這些主要功能可互通外,我們也改善了許多其他功能。每項通過的測試都代表您不會遇到的互通性問題。我們很期待在年底前看到這個分數能達到 100%。