CSS 選項樣式的沿用設定變更

Stephen Chenney

發布日期：2024 年 10 月 8 日

自 Chrome 131 起，::selection 和 CSS 醒目顯示的沿用設定將有所異動 ::target-text 虛擬類別。這是為了建立更直觀的模型 沿用之前新增的 ::highlight、::spelling-error 和 ::grammar-error 虛擬類別。本文將說明相關異動 可能對多數網站造成顯著影響。

選取樣式

設定所選文字的外觀樣式，能傳達給使用者的含意，例如 或無法選取所有文字。 例如 GitHub，以不同顏色選取與所選目錄的程式碼 成本中心的架構

CSS 支援使用 ::selection 虛擬元素設定選取樣式，這類虛擬元素又稱為醒目顯示虛擬元素。這些虛擬元素可控制不同使用者的文字顯示方式 瀏覽器或指令碼導向的動作除了選取的內容外，你還可以設定拼寫樣式 錯誤 (::spelling-error)、文法錯誤 (::grammar-error)、網址內嵌文字 目標 (::target-text) 和指令碼產生的醒目顯示 (::highlight)。

與所有 CSS 屬性集合一樣，沿用行為 也就是設計網站時必須考慮的重點一般來說，開發人員預期 CSS 屬性會透過 DOM 元素樹狀圖繼承 (例如 font)，或是完全不繼承 (例如 background)。

Chrome 131 的選取行為變更

請參考以下文件片段：

p {
  color: red;
}

.blue::selection {
  color: blue;
}

<p class="blue">Some <em>emphasized</em> text that one would expect to be blue</p>

片段的樣式宣告會修改所選文字的顏色。 有一個規則符合所有元素，另一個則符合 "blue" 類別的元素。 在 Chrome 130 以下版本中選取時，會產生以下結果：

在 Chrome 131 中選取後，結果會變成這樣：

事過境遷，選取屬性的繼承行為過去是透過原始元素繼承實作，選取內容會使用與所選元素相符的 ::selection 屬性。Chrome 130 以下版本採用這個模式，其中 強調文字沒有相符的 ::selection，因為 .blue::selection 只會比對元素與 "blue" 類別，但該類別缺少 <em> 元素。

Chrome 131 版會啟用新的行為，讓元素沿用以下設定的選取行為： 由家長決定在上述範例中，<em> 元素沒有與自身相符的 ::selection，因此會繼承 <p> 元素的選取顏色。這是 稱為 CSS 醒目顯示繼承 啟用實驗性 Web Platform 功能 chrome://flags。

依賴選取屬性不繼承的網站，可能會看到所選文字的顯示方式有所變更，但錯誤回報的證據顯示，這種行為的用途很少。

選取 CSS 自訂屬性仍可正常運作

許多網站透過使用 CSS 自訂值來模擬 CSS 的沿用機制 資源。自訂屬性是透過元素樹狀結構沿用而來， 「繼承自父項」並傳送給下列程式碼片段：

:root {
   --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text that is blue</p>

這是同時在 Chrome 130 和 131 中選取的結果：

在這裡，每個元素都會透過元素樹狀結構繼承 --selection-color 屬性的部分值，並在選取文字時使用此顏色。元素 選取 .blue 類別及其子系時，其子系會呈現藍色，而其他 元素會呈淺綠色。許多網站都使用這項技巧，也是 Stack Overflow 建議的方法。

為維持相容性，CSS 高亮顯示繼承模式會指定 ::selection (以及其他 CSS 高亮顯示的虛擬元素) 從其原始元素 (即所套用的元素) 繼承自訂屬性值。使用這種方法的網站應該不會受到 Chrome 131 的異動影響。

系統會忽略在 ::selection 虛擬元素本身中定義的自訂屬性 避免相互衝突的繼承行為您必須在元素本身上定義屬性，然後在擬似元素中參照這些屬性。

::selection 的通用選取器停用醒目顯示繼承

未使用 CSS 自訂屬性的網站可能已經使用通用選取器 設定選取的文字顏色。例如下列 CSS：

::selection /* = *::selection (universal) */ {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

在 Chrome 130 (及更早版本) 和 Chrome 131 (及以上版本) 中選取這項設定後，會得到以下結果：

由於通用選取器會比對 <em> 元素，並套用通用醒目顯示顏色淺綠色，因此 CSS 醒目顯示繼承功能不會導致第二個強調文字從其父項繼承藍色。

如要享有 CSS 醒目顯示繼承的優點，請將通用選取器變更為只比對根節點，然後由子項繼承：

:root::selection {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

Chrome 131 顯示的結果如下所示：

如果您的網站會修改所選顏色，但未使用自訂屬性， 可能有 ::selection 虛擬的通用選取器。優良 不會因為這項更新讓網站在 Chrome 中無法正常運作，但您還是可以 也錯過強調繼承的好處

::target-text樣式將一併變更

本文所述的所有行為和變更都會套用至 ::target-text 擬物元素，就像套用至 ::selection 一樣。多種用途 單一網站的指定文字樣式功能有限；這個功能是全新的 ，這就不太可能改變網站的::target-text行為。

異動原因

當其他精選虛擬元素還在開發階段時 已解析群組，以透過醒目顯示繼承模型實作繼承。 這是 ::selection 擬元素規格中的做法，但瀏覽器並未實作。非所選項目 虛擬元素會使用醒目顯示繼承，而虛擬元素會沿用該虛擬元素 就像是資源一樣也就是說，元素會從文件父項繼承高亮顯示的虛擬元素。

為維持一致性 群組重新支援醒目顯示 ::selection 的沿用設定，以及 瀏覽器正在努力推出新的行為，同時避免在 現有網站。

立即試用

下列 CodePen 示範了變更內容。請在 Chrome 131 中試用。