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になった。

#参考文献