Web 開発者向け Chrome ベータ版の更新情報を引用

Chrome 133ベータには、Web開発者向けのエキサイティングな更新が詰まっています！ この投稿は、知っておくべき重要な改善を強調しています。すぐにすべてを習得する必要はありませんが、これらの機能に精通していると、必要に応じて活用することができます。 リリースノートを定期的にチェックすることは、育てるのに大きな習慣です。

1. :open
この新しい擬似クラスは、オープン状態の要素のスタイリングを簡素化します。

、

、および目に見えるピッカーのある要素（<dialog>など）で動作します。 <details><select>コードの例：

<code class="language-css">/* Style open dialogs/details */
:open {
  border: 2px solid blue;
}

/* Style selects with active picker */
select:open {
  background: #f0f0f0;
}</code>

および
2. ：scroll-state: stuck scroll-state: snapped これらのプロパティは、スクロールスナップ動作に基づいてスタイリングを有効にします。
状態は、要素が所定の位置に固定されているときにスタイルを適用しますが、

は、要素が指定された位置にスナップするときにスタイルを適用します。スクロール駆動型のアニメーションに最適です。

stucksnappedコードの例：

<code class="language-css">/* Define a sticky element with scroll-state container */
.sticky-element {
  container-type: scroll-state;
  position: sticky;
  top: 0;
}

/* Apply styles when the element is stuck to the top */
@container scroll-state(stuck: top) {
  .sticky-element {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
}</code>

：
3. text-box-trim この長年の機能により、テキストボックス内のテキストの周りの余分なスペースを正確に制御できます。
および

トリミングのオプションを提供します

x-heightコードの例：cap-height

ポップオーバー属性値：

<code class="language-css">/* Trim text at x-height */
.text-trim {
  text-box-trim: x-height;
}

/* Trim at cap height */
.heading {
  text-box-trim: cap-height;
}</code>

4. 属性は
、

、および

値を提供し、ツールチップと同様のUI要素コントロールを強化します。 popover automanualDOM STATE保存モード：hint

5. 新しいプリミティブにより、内部状態をリセットせずにDOM要素を移動できます。

拡張

関数：node.prototype.moveBefore

6. 関数は、カスタムプロパティを含むフォールバック値をサポートするようになりました。 attr()コードの例：

このChrome 133ベータリリースは、Web開発者に大幅な改善を提供します。 より詳細な情報を得るために、公式のリソースを最新の状態に保ちます。 この情報をネットワークと共有することを検討してください！ さらに議論するために、LinkedIn、Medium、およびBlueskyで私とつながります。

以上がWeb 開発者向け Chrome ベータ版の更新情報を引用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。