【CSS】2023年現在のCSS新機能をまとめて解説

こんにちは、かつコーチです。

CSSでは、近年多くの新しい機能や指定方法が導入され、

より柔軟で効率的なレイアウトやスタイリングが可能になっています。

clamp()やaspect-ratioもその一例ですが、それ以外にも、最近追加されたり、

注目されている新しい指定方法や機能がいくつかあります。

以下に、主な新しいCSS機能を紹介します。

CSS新機能一覧

概要: clamp()は、最小値・最適値・最大値の間でCSSプロパティの値を指定できる関数です。これにより、レスポンシブデザインや動的なサイズ調整が簡単になります。

font-size: clamp(1rem, 2.5vw, 3rem);

概要: aspect-ratioは、要素のアスペクト比（縦横比）を指定するためのプロパティです。従来はパディングを使ったトリックが必要でしたが、このプロパティを使えば簡単にアスペクト比を維持できます。

img {
  aspect-ratio: 16 / 9;
}

概要: min()とmax()は、指定した値のうち、最小または最大の値をCSSプロパティに適用する関数です。これにより、動的なサイズ調整がさらに簡単に行えます。

width: min(50%, 400px);

概要: これらは複数のセレクタをグループ化し、より効率的にスタイルを適用するための疑似クラスです。is()は、指定されたセレクタのうち一つでも一致すればスタイルが適用され、where()は同様の動作をしますが、優先度が低くなります。

:is(h1, h2, h3) {
  color: red;
}

概要: scroll-snapは、スクロール時に要素が自動的にスナップ（揃う）ように設定できる新しいプロパティ群です。これにより、カルーセルやスライダーなどの機能がCSSだけで実現可能です。

scroll-snap-type: x mandatory;
scroll-snap-align: start;

概要: これまでは、メディアクエリを使って画面全体の幅に応じてレイアウトを調整していましたが、コンテナクエリを使うことで、特定のコンテナ（親要素）のサイズに応じてスタイルを変更することができます。これにより、ネストされたレイアウトでも柔軟なデザインが可能になります。

@container (min-width: 400px) {
  .item {
    display: flex;
  }
}

概要: env()は、ブラウザやデバイス固有の環境値をCSSで使えるようにする関数です。特に、モバイルデバイスでの「安全領域」などを考慮したスタイリングに便利です。

padding: env(safe-area-inset-top);

CSS Gridは強力なレイアウトシステムですが、最近ではさらに柔軟に制御できる機能が追加されました。

.grid-item {
  display: grid;
  grid-template-columns: subgrid;
}

概要: backdrop-filterは、要素の背後にあるコンテンツに対してぼかしや明るさなどのフィルタを適用できるプロパティです。モダンなデザインやグラスモーフィズムを実現するのに役立ちます。

backdrop-filter: blur(10px);

概要: :focus-visibleは、ユーザーがキーボードでフォーカスを移動した場合にだけフォーカススタイルを適用する疑似クラスです。これにより、キーボードユーザビリティを向上させつつ、マウスユーザーには不要なフォーカススタイルが表示されません。

button:focus-visible {
  outline: 2px solid blue;
}

概要: has()は、親要素が特定の子要素を持っている場合にスタイルを適用できるセレクタです。JavaScriptのような親子要素の依存関係をCSSだけで解決できる機能として注目されています。

div:has(> img) {
  border: 1px solid red;
}

これらの新しいCSS機能により、デベロッパーは従来の手法よりも直感的かつ効率的に

レスポンシブデザインや動的レイアウトを実現できます。

これらのツールを活用することで、よりモダンでパフォーマンスの高いウェブデザインが可能になります。