Chrome 133 的新功能

Rachel Andrew

以下是一些注意事項：

CSS 進階 attr() 函式

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

在以下範例中，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：捲動容器是否可在查詢方向中捲動。

新的 container-type: 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 有哪些新功能！