Chrome 131 的新功能

Mariko Kosaka
X

以下是一些注意事項：

我是 Marik Kosaka。讓我們深入瞭解 Chrome 131 為開發人員提供哪些新功能。

CSS 醒目顯示繼承

::selection 和 ::target-text 疑似類別的 CSS 醒目顯示繼承功能將有所變更。這麼做可建立更直覺的樣式繼承模型，並與最近新增的 ::highlight、::spelling-error 和 ::grammar-error 擬物類別保持一致。

請參考以下含有強調文字的程式碼片段。

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

在舊版 Chrome 中，即使在父級段落元素上設定 ::selection 擬類別，選取強調文字時文字顏色也不會變更為藍色。

醒目顯示的文字為粉紅色

這是因為它是使用原始元素繼承模型實作。因此，在本例中，::selection 擬似類別只會比對具有 blue 類別的元素，而本段內的元素並未具有該類別。

隨著醒目顯示繼承功能的變更，在 Chrome 131 中選取相同文字時，文字顏色會變為藍色。

以藍色醒目顯示的文字

還有幾項相關變更，請務必查看 Igalia 的 Stephen Chenney 撰寫的CSS 選取樣式繼承變更，他負責開發這項功能。

改善 <details> 和 <summary> 的樣式

您現在可以透過更多選項設定 <details> 和 <summary> 元素的結構樣式，以便建立展開式或摺疊式小工具。

本版本推出的變更可讓您使用 display 屬性，並新增 ::details-content 擬似元素，為展開和摺疊的部分設定樣式。

過去無法變更 details 元素的顯示類型。這項限制現已放寬，您可以使用格線或 Flex 版面配置。

在這個專屬摺疊示例中，由多個 details 元素組成，當其中一個 details 元素展開時，其內容會放在 summary 旁邊。

使用 Flex 版面配置的手風琴小工具

方法是在 details 元素上使用 Flex 版面配置。您也可以嘗試使用其他顯示值 (例如 grid) 來試試更多版面配置模式。

如需更詳細的說明，請參閱 Bramus 的文章「更多 <details> 樣式選項」。

@page 邊界框

新增支援頁面邊界方塊，方便你在列印網頁文件或將其匯出為 PDF 時使用。

您可以使用頁面邊界方塊定義頁面邊界區域中的內容。因此，您可以提供自訂頁首和頁尾，而非使用瀏覽器產生的內建頁首和頁尾。

您可以使用 CSS 中的 @page 規則定義頁面邊界。

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

邊界框的顯示方式和內容，是使用產生內容，在 at-rules 內指定代表 16 個邊界框的 CSS 屬性。

針對頁碼，系統也支援計數器，其中 page 代表目前頁碼，而 pages 代表總頁數。

如需更詳細的說明，請參閱 Rachel 撰寫的文章「使用 CSS 列印網頁時，在邊界加入內容 」。

還有更多獎品等著您！

當然，還有許多其他功能。

  • 支援外部 SVG 資源，適用於「clip-path」、「fill」、「stroke」和「marker」。
  • WebHID 會在專用 worker 內容中啟用。
  • 使用 font-variant-emoji CSS 屬性控管表情符號的行為。

延伸閱讀

這份報告僅涵蓋部分重點。如要瞭解 Chrome 131 的其他變更，請參閱下列連結。

訂閱

如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Mariko Kosaka，Chrome 132 一推出，我們就會在這裡告訴你 Chrome 的新功能！