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 の新機能についてお知らせします。