クリックするとキャレット情報が表示されます。

ボタンをクリックすると、Event Timing APIを使ってイベントの処理時間を計測します。 約50msの処理を意図的に行うため、処理時間が可視化されます。

カスタムコマンド（--zoom-in、--zoom-out、--reset）で操作しています。

ページ読み込み時のLCP（Largest Contentful Paint）を計測しています。ページを再読み込みすると新しい計測結果が表示されます。

文字と単位バーをそれぞれ4倍にしたものを表示しています。
1ricは「水」の幅、1rch は「0」の幅、1rcap は大文字Hの高さ、1rexは小文字xの高さです。

font-sizeの値を変更してみてください。chは親要素のfont-sizeに連動してサイズが変わりますが、rchは常にルート要素（16px）を基準にするため同じサイズです。
ブラウザの文字サイズ設定を変更している場合、正しく動作しないことがあります。

.article内の画像（スタイル適用対象）

.nested-content内の画像（除外される）

@scope (.article) to (.nested-content) {
  img {
    border: 3px solid var(--cyan-500);
    border-radius: var(--radius-md);
  }
}

.article（スコープルート）

.nested-content（直接の子 → 常に除外）

ラッパー要素

.nested-content（孫要素 → :scope >の時は適用される）

@scope (.article) to (:scope > .nested-content) {
  /* .nested-contentがスコープルートの直接の子の場合のみ除外 */
  img {
    border: 3px solid var(--cyan-500);
  }
}

• @scopeがONの場合、最も内側の<p>は近接性により.info-boxのスタイルが適用されます
• @scopeがOFFの場合、通常のカスケードで.warning-boxのスタイルが優先されます（後に定義されているため）

@scope (.info-box) {
  .message { color: var(--color-fg-info); background: var(--color-bg-info); }
}
@scope (.warning-box) {
  .message { color: var(--color-fg-warning); background: var(--color-bg-warning); }
}

上のエリアをスクロールすると、scroll イベントは連続して発火しますが、scrollend イベントはスクロールが完全に終了したときのみ発火します。

• アイテム 1削除
• アイテム 2削除
• アイテム 3削除
• アイテム 4削除

• View TransitionのON/OFFの切り替えはview-transition-nameをnoneに指定することで行なっています。
• View TransitionがONの時は、アイテム番号ごとのview-transition-nameを持ちます（例: item-1）。
• 各アイテムは、まとまったスタイルを付与するためにview-transition-class: item;を持ちます。

::view-transition-group(.item) {
  border-radius: var(--radius-md);
}
::view-transition-group(item-1) {
  background-color: var(--red-800);
}
::view-transition-image-pair(item-2) {
  background-color: var(--pink-800);
}
::view-transition-old(item-3) {
  background-color: var(--purple-800);
}
::view-transition-new(item-4) {
  background-color: var(--cyan-800);
}