Chrome 133グッズ

Chromeチームの仕事はエキサイティングでなければなりません！最新のブラウザバージョンで直接手に入れ、クールなデモを作成して新しい機能を披露する必要があります。もちろん、私はそれをまったくvy望しません！ （あなたはなぜですか？）

ポイントに戻って、Chrome 133のリリースノートを見たことがありますか？現在、ベータ版ですが、Chromeチームは無視するのが難しい一連の素晴らしい新しい記事と印象的なデモをリリースしました。私はそれらをまとめることにしました。

attr()広く使用されている関数！

しばらくの間、CSSでHTML属性を使用することができましたが、文字列のみに限定されています。 content

<h1 data-color="orange">Some text</h1>

h1::before {
  content: ' (Color: ' attr(data-color) ') ';
}

Bramusは、カスタム属性を含むCSS属性に対してChrome 133で使用する方法を示しています。たとえば、属性の値を取得して、要素の属性に使用できます。

もちろん、これは簡単な例です。しかし、それはここに3つのコンポーネントがあることを示しています：color

h1 {
  color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
}</color>

プロパティ（データカラー）

type（type（

））
arbitrage値（https://www.php.cn/link/93ac0c0dd620dc7b88e5fe05c70e15bffff）
属性は自分で定義されます。ワイルドカードをタグに挿入し、スタイル設定に使用できるようにするのは非常に便利です。
3. は、CSSが処理される値のタイプを識別するのに役立つ新機能です。数値を使用している場合は、より簡潔なライティング方法を使用できます。たとえば、属性を使用して要素のフォントサイズを設定してください。

type()属性（pxのユニット）を設定できます：

<div data-size="20">Some text</div>

arbitrage値はオプションであり、ユースケースに応じて必要とされない場合があります。 font-size

コンテナクエリのスクロールステータス！

h1 {
  font-size: attr(data-size px, 16);
}

これは素晴らしいです！粘着性の要素が「粘着性のある」状態にあるときに粘着性の要素をスタイリングする方法を望んだことがあるなら、そのような機能を持つことがどれほどクールかを知ることができます。 Adam Argyleは、アルファベットリストの古典的なパターンを使用し、ビューポートの上部に貼り付けられたときに、スタイルを文字タイトルに適用します。スナップ要素のスクロールとコンテナ要素のスクロールにも同じことが言えます。

言い換えれば、要素が「スティック」、「スナップ」、「スクロール可能」である場合、スタイルを整えることができます。

クロムブラウザで開く必要がある小さな例：

全体的なアイデア（私は今だけ多くのことを知っています）は、容器を登録することです...クエリができるコンテナ。使用しているスクロールタイプであるコンテナ用に

を設定します。この場合、要素がページの上部に「貼り付け」されるスティッキーポジショニングを使用します。

<h1 data-color="orange">Some text</h1>

コンテナはそれ自体をクエリすることができないため、基本的に貼り付けたい要素のラッパーでなければなりません。メニューは、通常、順序付けられていないリンクリストが入っている<nav></nav>要素を持っているため、少し特別です。したがって、私たちのクエリのコンテナとして<nav></nav>を使用できます。これは、ページの上部に順序付けられていないリストを実際に貼り付けているためです。

h1::before {
  content: ' (Color: ' attr(data-color) ') ';
}

貼り付けられたコンテンツが実際に含まれているため、粘着性ロジックを直接<nav></nav>に配置できます。

h1 {
  color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
}</color>

メニューの代わりに粘着性のあるフッターを使用している場合は、

を使用できます。しかし、ポイントは、stuck: bottom要素が上部に貼り付けられたら、次のように<nav></nav>ブロックにスタイルを適用できるということです。 @container

その中に他のセレクターをネストすることも機能しているようです。たとえば、ナビゲーションが粘着性の場合、メニューのリンクを変更できます。

<div data-size="20">Some text</div>

だから、はい。私が言ったように、Chrome開発チームの一員であるため、これらの機能を始めるのはクールでなければなりません。 BramusとAdamに、新しい機能を紹介し続けてくれてありがとう、そしてこのような素晴らしいデモを作るための多大な努力をしてくれてありがとう。

以上がChrome 133グッズの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。