CSS 異動 ::backdrop 繼承

Bramus

::backdrop 的歷史記錄

Fullscreen API 引入了頂層和 ::backdrop 元素等新概念。

• 「頂層」是新的堆疊層，會在檢視區中以最接近使用者的距離進行算繪。它具有可視區域的大小，並顯示在所有其他圖層上方。
• ::backdrop CSS 擬元素是一個與可視區域大小相同的方塊，會在頂層顯示的任何元素下方立即算繪。

::backdrop 原始規格的其中一個功能如下：

不會繼承任何元素，也不會被繼承。

雖然這有助於隔離 ::backdrop 的樣式，但也表示 ::backdrop 無法存取 :root 上宣告的任何自訂屬性。這會讓網頁開發人員感到困惑。

為解決這個問題，您必須在 ::backdrop 和 :root 上明確宣告自訂屬性，才能使用這些屬性：

/* Pre-Chrome 122 */
:root, ::backdrop {
  --back-color: #333;
}

::backdrop {
  background-color: var(--back-color);
}

::backdrop 的更新

為修正 ::backdrop 的問題，CSS 工作小組採用了這些概念，並在 CSS 定位版面配置規格中指定這些概念。

除了將定義移至新規格，我們也對定義進行了調整。

其中一個對網頁開發人員有直接影響的改良項目，就是 ::backdrop 元素現在是樹狀結構元素，也就是說，它會從原始元素繼承任何可繼承的屬性。

瀏覽器支援

• 122
• 122
• 120
• 17.4

這項變更可讓您覆寫特定元素的自訂屬性值，而 ::backdrop 也能存取這些值。舉例來說，與開啟的 <dialog> 元素相關聯的 ::backdrop，現在可以存取該 <dialog> 中的自訂屬性。

/* Chrome 122 and up */
:root {
  --backdrop-color: #333; /* Any ::backdrop can access this custom property */
}

dialog {
  --backdrop-color: #6300ff33; /* The ::backdrop for dialog can access this custom property */
}

::backdrop {
  background-color: var(--backdrop-color);
}

示範在頂層開啟的 <dialog>。在 Chrome 122 以上版本中，::backdrop 可以存取並使用 --backdrop-color 變數為背景著色。