Chrome 133 的新功能

Rachel Andrew

以下是一些注意事項：

CSS 進階attr()函式

這項功能會新增至現有的 attr() 函式，以及 CSS Level 5 中指定的函式。這可讓您使用 <string> 以外的型別，以及所有 CSS 屬性 (除了現有的虛擬元素內容支援)。

在下列範例中，div 的 color 屬性值會使用 data-color 屬性的值。系統會使用 attr() 和 type()，將這項屬性值剖析為 <color>。備用值設為 red。

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

詳情請參閱「CSS attr() 升級」一文。

CSS 捲動狀態容器查詢

使用容器查詢，根據容器的捲動狀態設定容器後代的樣式。

查詢容器可以是捲動容器，也可以是受捲動容器捲動位置影響的元素。您可以查詢下列狀態：

  • stuck：固定位置的容器會固定在捲動方塊的其中一個邊緣。
  • snapped：目前已水平或垂直對齊捲動對齊容器。
  • scrollable：捲動容器是否可朝查詢方向捲動。

新增容器類型：scroll-state可查詢容器。例如：

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

如要瞭解詳情並查看一些範例，請參閱「CSS 捲動狀態查詢」。

CSS text-box、text-box-trim 和 text-box-edge

text-box-trim 屬性會指定要裁剪的側邊 (上方或下方)，text-box-edge 屬性則會指定裁剪邊緣的方式。

這些屬性可讓您使用字型指標精確控制垂直間距。

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

瞭解如何在 CSS text-box-trim 中使用這些新屬性。

還有其他眾多資源！

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

  • Animation.overallProgress可讓您輕鬆且一致地瞭解動畫在疊代期間的進度，無論時間軸的性質為何。
  • Node.prototype.moveBefore 可讓您在 DOM 樹狀結構中移動元素，不必重設元素狀態。
  • FileSystemObserver 介面會通知網站檔案系統的變更。
  • 您可以使用 PublicKeyCredential getClientCapabilities() 方法，判斷使用者的用戶端支援哪些 WebAuthn 功能。

如要詳細瞭解這些功能和 Chrome 的許多其他新功能，請參閱 Chrome 133 的完整版本資訊！

延伸閱讀

這僅涵蓋部分重點。如需 Chrome 133 的其他變更，請參閱下列連結。

訂閱

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

Chrome 133 版發布後，我們會立即在此說明 Chrome 的新功能！