編集

Chrome 142リリース

#Chrome #CSS

Chrome 142がリリースされた。主な新機能として、スクロールマーカー用の:target-beforeと:target-after疑似クラス、スタイルコンテナクエリとif() CSS関数での範囲構文サポート、interestfor属性が追加された。

出展：Chrome 142 の新機能

#:target-beforeと:target-after疑似クラス

スクロールマーカーを制御するための新しい疑似クラスが追加された。これらの疑似クラスは、同じスクロールマーカーグループ内でアクティブマーカー（:target-currentに一致）の前後のスクロールマーカーに一致する。フラットツリーの順序で決定され、スクロールナビゲーションの視覚的フィードバックを提供する。

css

.carousel {
  /**... */
  scroll-marker-group: after;
  counter-reset: count;
  &::scroll-marker-group {
     /**... */
     margin-block-end: 80px;
  }
  > .carousel-item {
      /**... */
     counter-increment: count;
     &::scroll-marker {
        /**... */
      content: counter(count);
      &::scroll-marker:target-before {
          background-color: gray;
      }
      &::scroll-marker:target-current {
          background-color: coral;
      }
      &::scroll-marker:target-after {
          background-color: lightgray;
      }
    }   
  }
}
100
101
102
103
104
105

#スタイルコンテナクエリとif()関数での範囲構文

スタイルクエリが完全一致を超えて拡張され、比較演算子を使用した範囲構文がサポートされた。カスタムプロパティ、リテラル値、置換関数の値を比較できる。

css
/* カスタムプロパティをリテラル長と比較 */
@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

/* 2つのリテラル値を比較 */
@container style(1em < 20px) {
  /* ... */
}

if()関数でスタイル範囲を使用する例：

css
.item-grid {
  background-color: if(
    style(attr(data-columns, type<number>) > 2): 
      lightblue; 
    else: 
      white
  );
}

比較は数値型（<length>、<number>、<percentage>、<angle>、<time>、<frequency>、<resolution>）に限定され、両側が同じデータ型に解決される必要がある。

#interestfor属性

<button>要素と<a>要素にinterestfor属性が追加された。ユーザーが要素に関心を示したときに、ターゲット要素でアクションをトリガーする。

html
<style>
[popover] {
  display: none;
  position-area: bottom;
  margin: initial;
  &:popover-open{
    display: inline-block;
  }
}
</style>
<button interestfor="popover1">サンプル</button>
<div id="popover1" popover>ポップオーバーコンテンツ</div>
ポップオーバーコンテンツ

ユーザーエージェントは、ホバー、キーボード操作、長押しなどで要素への関心を検出する。関心が示されたり失われたりすると、ターゲットでInterestEventが発生する。ポップオーバーの表示や非表示など、ポップオーバーのデフォルトアクションに使用可能。

編集