最近のCSSは進化が早い！モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ

Post on:2024年1月24日

:has()疑似クラスがすべてのブラウザにサポートされました

まずは、:has()疑似クラスがすべてのブラウザにサポートされました。今まではFirefoxを除くすべてのブラウザにサポートされていましたが、2023年12月19日にリリースされたFirefox 121（リリース情報）で、:has()疑似クラスがサポートされました。

今年は、:has()疑似クラスを使用する機会も増えそうです。

CSSの:has()疑似クラスの便利な使い方を徹底解説

:has()疑似クラスを使用するとさまざまなセレクタを条件式のように記述できます。

/* figcaptionがあるfigure要素を選択 */
figure:has(> figcaption) { ... }

/* svgの直接の子孫がないa要素を選択 */
a:not(:has(> svg)) { ... }

/* inputの直接の兄弟があるlabel要素を選択 */
label:has(+ input) { … }

/* 子孫のimgにaltがないarticle要素を選択 */
article:has(img:not([alt])) { … }

/* DOM内で何らかの状態が存在するdocumentElementを選択 */
:root:has(.menu-toggle[aria-pressed=”true”]) { … }

/* 子の数が奇数の.containerを選択 */
.container:has(> .container__item:last-of-type:nth-of-type(odd)) { ... }

/* ホバーされていないグリッド内のすべてのアイテムを選択 */
.grid:has(.grid__item:hover) .grid__item:not(:hover) { ... }

/* カスタム要素<todo-list>を含むコンテナを選択 */
main:has(todo-list) { ... }

/* 直接のhrの兄弟があるp要素内のすべてのa要素を選択 */
p:has(+ hr) a:only-child { … }

/* 複数の条件を満たすarticle要素を選択 */
article:has(>h1):has(>h2) { … }

/* h1の後にh2が続くarticle要素を選択 */
article:has(> h1 + h2) { … }

/* インタラクティブな状態が発生したときに:rootを選択 */
:root:has(a:hover) { … }

/* figcaptionがないfigureに続くp要素を選択 */
figure:not(:has(figcaption)) + p { … }

/* figcaptionがあるfigure要素を選択 */

figure:has(> figcaption) { ... }

/* svgの直接の子孫がないa要素を選択 */

a:not(:has(> svg)) { ... }

/* inputの直接の兄弟があるlabel要素を選択 */

label:has(+ input) { … }

/* 子孫のimgにaltがないarticle要素を選択 */

article:has(img:not([alt])) { … }

/* DOM内で何らかの状態が存在するdocumentElementを選択 */

:root:has(.menu-toggle[aria-pressed=”true”]) { … }

/* 子の数が奇数の.containerを選択 */

.container:has(> .container__item:last-of-type:nth-of-type(odd)) { ... }

/* ホバーされていないグリッド内のすべてのアイテムを選択 */

.grid:has(.grid__item:hover) .grid__item:not(:hover) { ... }

/* カスタム要素<todo-list>を含むコンテナを選択 */

main:has(todo-list) { ... }

/* 直接のhrの兄弟があるp要素内のすべてのa要素を選択 */

p:has(+ hr) a:only-child { … }

/* 複数の条件を満たすarticle要素を選択 */

article:has(>h1):has(>h2) { … }

/* h1の後にh2が続くarticle要素を選択 */

article:has(> h1 + h2) { … }

/* インタラクティブな状態が発生したときに:rootを選択 */

:root:has(a:hover) { … }

/* figcaptionがないfigureに続くp要素を選択 */

figure:not(:has(figcaption)) + p { … }

詳しくは、CSSの:has()疑似クラスの便利な使い方のまとめをご覧ください。

ほかにも、いろいろ便利なスタイルを:has()疑似クラスで定義できます。

CSS :has()擬似クラスを使った便利なセレクタ、子の数に基づいて親要素のスタイルを定義

知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる

CSSのコンテナクエリ

CSSのコンテナクエリが登場したのは2022年ですが、2023年2月にすべてのモダンブラウザの安定版でサポートされました。

コンテナクエリは今までのメディアクエリのスクリーンベースではなく、親コンテナをベースにして子要素のスタイルを定義できます。レイアウトやコンポーネントだけでなく、レスポンシブ対応のフォントサイズにも大活躍です。

CSS コンテナクエリの準備はできてる？安定版のブラウザにサポート、ポリフィルも大幅にアップデートされました

コンテナクエリで実装する最初のステップは、containerプロパティを追加することです。コンポーネントは親の幅に応じて変化するので、ページ全体ではなく、影響を受けるエリアのみを再描画するようにブラウザに伝える必要があります。

CSS コンテナクエリ（@container）の基礎知識と便利な使い方を解説

さらにコンテナクエリは、:has疑似クラスを使用すると強力になります。

CSSのスタイルクエリ

コンテナクエリだけでなく、CSSのスタイルクエリも2023年にすべてのモダンブラウザの安定版でサポートされました。スタイルクエリとは、親要素のスタイルに応じて子要素のスタイルを設定できる新機能です。

親要素のサイズによるクエリはコンテナクエリですが、スタイルクエリは親要素のスタイル値によるクエリになるため、たとえば複数のバリエーションを持つ再利用可能なコンポーネントが簡単に実装できます。

CSSのスタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用

スタイルクエリを使用したUIコンポーネントの実装例などは、下記をご覧ください。

CSS スタイルクエリ（@container style()）の基礎知識と便利な使い方を解説

CSSのネスト

そして、CSSのネストもすべてのモダンブラウザの安定版でサポートされました。

ネストはSassなどのCSSプリプロセッサですでに使用している人も多いと思いますが、CSSのネストは仕様が少し異なります。とは言え、CSSでネストが使用できるようになるのは、嬉しいことですね。

CSSのネストは、セレクタを繰り返す必要性を減らし、関連する要素のスタイルルールを同じ場所に配置することで、デベロッパーを支援します。

CSSのネストがついにブラウザで使用できるようになった！基礎知識、便利な使い方を詳しく解説

また、Chrome 120でCSSネストがより分かりやすい構文もサポートされ、記述方法が簡単になりました。

朗報！これでCSSネストの記述方法がより簡単になります

CSSの@scopeはセレクタの適用範囲を設定できる

CSSのネストもこれまでの記述方法が大きく変わるものですが、@scopeも記述方法に大きな影響を与える新機能です。

たとえば、下記のHTMLにはimgが2つあります。@scopeを使用すると、1つ目の.media-object直下のimgにのみスタイルを適用できます。.content内のimgはターゲットにされません。

CSSの新機能@scopeが便利すぎる！セレクタの適用範囲を設定できる、@scopeの基礎知識と使い方

上記のように上限と下限があるスコープは、ドーナツスコープ〔donut scope〕と呼ばれます。また、@scopeで使用するセレクタの詳細度は、含まれるセレクタの詳細度に影響を受けません。詳しくは、下記をご覧ください。

CSS @scopeの基礎知識と使い方を解説、セレクタの適用範囲を設定できる

CSSで三角関数が使用できるようになった

2023年、CSSの大きな話題の一つが三角関数が使用できるようになったことです。今まではcalc()関数をはじめ、min(), max(), clamp()などの関数でしたが、ついに三角関数もChrome, Edge, Safari, Firefoxのすべてにサポートされました。

CSSで使用できる三角関数は、sin(), cos(), tan(), asin(), acos(), atan(), atan2()です。

2023年はCSSで三角関数「sin(), cos(), tan()」が主要ブラウザのすべてで使用できるようになるぞ！

CSSで三角関数をどこに使うのか。たとえば、今まではかなり複雑なCSSやJavaScriptが必要だった斜めのレイアウトがシンプルなCSSで実装できます。ほかにも、要素を円軌道で移動させたり、メビウスの輪なんかも実装できます。また、かなり高度になりますが、CSSの三角関数でスクリーンサイズやフォントサイズを取得することもできます。