互通性 2024 年中旬更新

Rachel Andrew

我們即將迎接今年下半年，現在正是時候 今年， Interop 2024 提升了網路互通性。

我們的第一步

年初 Chrome 的瀏覽器支援分數為 83。

2024 年 2 月的 Interop - 資訊主頁。

，瞭解如何調查及移除這項存取權。

2024 年 6 月底的互通性資訊主頁。

今天的分數是 90，分數為 85 的穩定瀏覽器分數 Chrome 126 版整體實驗互通性分數越來越高 獲得 10 分，這篇文章分享了一些對 該分數

彈出式視窗

彈出式視窗已在 2024 年 4 月成為 Baseline 新推出的一部分。彈出式視窗為 因為需要建構許多 UI 功能，所以效果很不錯，例如 選單、工具提示、選取選項和教學 UI 的重疊元素等 彈出式視窗。從彈出式視窗建立前，建立下列任一功能需要大量自訂 再也不是件繁重乏味的工作確保未同時開啟多個元素的程式碼 當使用者在元素外點擊時關閉廣告。您也可以 我們無法順利使用 z-index，確保 UI 元素會保持在 存取 API

所有相關功能和其他功能都已經在 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>

瀏覽器支援

• 114 人
• 114 人
• 125 人
• 17 分

資料來源

詳情請參閱 Popover API 採用基準的相關說明。多個 我現在已經見證了 Popover 的優勢。 Tokopedia 成功大幅減少了 React 程式碼的數量 使用此功能，針對不支援的瀏覽器使用 polyfill。

使用 @property 的進階自訂屬性

@property CSS 規則可讓您建立進階自訂屬性， 詳細資料，而非標準自訂屬性中的名稱和值。 設定允許的語法，定義這項資源可保留的資料類型 例如顏色、數字或長度接著設定屬性 繼承和初始值

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

@property 規則目前提高了 Firefox 的實驗分數。 在本月結束前 Firefox 128 出貨時，穩定分數就會提高。對話也能彙整 現已推出基準組。

瀏覽器支援

• 85 人
• 85 人
• 128 人
• 16.4

資料來源

詳情請參閱 @property：為 CSS 變數提供超能力。

font-size-adjust 屬性

CSS font-size-adjust 屬性可讓您修改小寫的大小 。這在適用情況下很實用 例如確保字型仍採用備用字型 內容清晰易讀，特別是在較小的字型上。

font-size-adjust 屬性目前包含在實驗分數中 而當 Chrome 和 Chrome 推出時，穩定分數就會提高 Chrome 127 這個月。同時加入 Baseline 新推出。

瀏覽器支援

• 127 人
• 127 人
• 3 分
• 16.4

資料來源

文字換行：平衡

使用 text-wrap: balance 會指示瀏覽器找出最佳平衡點 文字換行。此功能特別適合用於標題， 例如，標題在第二行中換行為單一字詞。

Safari 最近已支援這項功能，其他瀏覽器也正在努力修正 未通過測試，以確保這項功能在所有瀏覽器中都能正常運作。

瀏覽器支援

• 114 人
• 114 人
• 121 人
• 17.5 分

資料來源

---

除了這些主要功能變得可互通之外，還有許多其他 以及幾項功能每項測試都代表 您也不會遇到的 協同整合問題我們很期待看到 在年底前達到 100% 的分數