編集

CSSコンテナクエリがBaseline Widely availableに

#CSS #Baseline

2023年にすべての主要ブラウザエンジンに導入されたCSSコンテナクエリがBaseline Widely availableになった。コンテナクエリを利用することで、デバイスの画面サイズだけでなく要素のサイズに基づいたスタイルの変更が可能になり、よりフレキシブルでスタイルがカプセル化された実装が可能になる。

css
.sidebar {
  container-name: main-sidebar;
  container-type: inline-size;
}

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

またcolor-gamutメディアクエリと:autofill擬似クラスもBaseline Widely availableになった。

出展：August 2025 Baseline monthly digest

編集