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 Working Group 採用了這些概念，並在 CSS 定位版面配置規格中說明這些概念。

除了將定義移至新規格外，定義也經過修正。

對網頁程式開發人員有直接影響的修正項目，::backdrop 元素現在是「樹狀結構」元素，意味著它繼承來源元素的任何可繼承屬性。

這項變更生效之後，你可以覆寫特定元素的自訂屬性值，::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);
}