Chrome 133 の新機能

Rachel Andrew

次の説明をお読みください。

CSS の高度な attr() 関数

この機能では、既存の attr() 関数に CSS レベル 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 Developers YouTube チャンネルに登録してください。新しい動画が公開されるたびにメール通知が届きます。

Chrome 133 がリリースされたら、Chrome の新機能についてお知らせします。