我們即將迎接今年下半年,現在正是時候 今年, Interop 2024 提升了網路互通性。
我們的第一步
年初 Chrome 的瀏覽器支援分數為 83。
![含有 Score-Interop: 65, Investigations: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.](https://web.dev/static/blog/interop-2024-midyear/image/interop-feb.png?hl=zh-tw)
![含有 Score-Interop: 75, Investigations: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.](https://web.dev/static/blog/interop-2024-midyear/image/interop-june.png?hl=zh-tw)
今天的分數是 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>
詳情請參閱 Popover API 採用基準的相關說明。多個 我現在已經見證了 Popover 的優勢。 Tokopedia 成功大幅減少了 React 程式碼的數量 使用此功能,針對不支援的瀏覽器使用 polyfill。
使用 @property
的進階自訂屬性
@property
CSS 規則可讓您建立進階自訂屬性,
詳細資料,而非標準自訂屬性中的名稱和值。
設定允許的語法,定義這項資源可保留的資料類型
例如顏色、數字或長度接著設定屬性
繼承和初始值
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
@property
規則目前提高了 Firefox 的實驗分數。
在本月結束前 Firefox 128 出貨時,穩定分數就會提高。對話也能彙整
現已推出基準組。
詳情請參閱 @property:為 CSS 變數提供超能力。
font-size-adjust
屬性
CSS font-size-adjust
屬性可讓您修改小寫的大小
。這在適用情況下很實用
例如確保字型仍採用備用字型
內容清晰易讀,特別是在較小的字型上。
font-size-adjust
屬性目前包含在實驗分數中
而當 Chrome 和 Chrome 推出時,穩定分數就會提高
Chrome 127 這個月。同時加入 Baseline 新推出。
文字換行:平衡
使用 text-wrap: balance
會指示瀏覽器找出最佳平衡點
文字換行。此功能特別適合用於標題,
例如,標題在第二行中換行為單一字詞。
Safari 最近已支援這項功能,其他瀏覽器也正在努力修正 未通過測試,以確保這項功能在所有瀏覽器中都能正常運作。
除了這些主要功能變得可互通之外,還有許多其他 以及幾項功能每項測試都代表 您也不會遇到的 協同整合問題我們很期待看到 在年底前達到 100% 的分數