Style Queriesを使ってコンテナ要素のスタイルを評価する

Chrome111/Edge111でStyle Queriesが使えるようになった。

Style Queriesを使うことでコンテナ要素のスタイルを評価できる。

<div class="container">
  <div class="item"><span>Item</span></div>
  <div class="item" style="--active: true"><div>Item</div></div>
  <div class="item"><span>Item</span></div>
</div>

<style>
.container {
  container-type: inline-size;
  container-name: container;
}

.item {
  container-type: inline-size;
  container-name: item;
}

/* Container Query */
@container container (max-width: 300px) {
  .item { ... }
}

/* Style Query */
@container item style(--active: true) {
  /* コンテナの --activeプロパティが true だったら以下のスタイルが適用される */
  div {
    background-color: #B4E5D9;
  }
}
@container item not style(--active: true) { ... }
</style>

デモ

追記: 2024-09-17

Safari 18でStyle Queriesが使えるようになった。Style

残すはFirefox。