2024年の実装に役立つCSSの新機能と使い方のまとめ

Post on:2024年1月16日

はじめに

フロントエンドのすべてのデベロッパーは、:has()疑似クラスが「親セレクタ」以上の機能があること、subgridの効果的な使用方法、組み込みのCSS構文でネストする方法、見出しテキストの折り返しのバランスをブラウザに任せる方法、コンテナクエリ単位の使用方法などを知っておくべきだと思います。

この記事では、これらの機能を使用した2024年に役立つCSSのスニペットを紹介します。

:has()疑似クラス（そのポテンシャルは親セレクタ以上）

:has()疑似クラスは2024年現在、すべてのブラウザにサポートされています。

:has()疑似クラスのサポートブラウザ

:has()疑似クラスは小さくて無邪気に見えるかもしれませんが、さまざまなコンテンツ、レイアウト、コンポーネントなど、このセレクタが効果を発揮する使用例がたくさんあります。Jheyの記事（翻訳: CSSの:has()疑似クラスの便利な使い方のまとめ）で説明されている使用例を見るときっと驚くでしょう。

まずは、:has()疑似クラスを親セレクタとして使用する例を紹介します。通常、セレクタの主語はul liのように末尾にあり、liが主語になってスタイルを取得します。:has()を使用すると、セレクタの先頭にある要素が主語になります。

下記のCSSでは、ボタンの中に.iconというクラスを持つ要素があり、gapでボタンの内部に隙間を与えています。また、カードの中に画像がある場合、カードの向きが変わります。

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

button:has(.icon) {

gap: 1ch;

}

.card:has(img) {

grid-auto-flow: row;

}

セレクタで長い間望まれていたことは、アイテムの数に基づいてレイアウトを変更することです。has()を使用すると、コンテナを主語にしながら子の数をクエリにできるので、これが可能になりました。

main:has(> :nth-child(5)) {…}

1	main:has(> :nth-child(5)) {…}

1つ上のレベルの使用例として、ページ上の特定のチェックボックスが有効になっているときに、ドキュメント全体に設定されているスタイルを変更できます。

html:has(#dark-mode:checked) {…}

1	html:has(#dark-mode:checked) {…}

これらの使用例だけを見ていると、:has()は親セレクタであることに限定されていると思うかもしれません。しかし、下記の使用例を見てください。共通の祖先に基づいて何をチェックし、セレクタの主語をページのより深い場所にある子にピボットします。

これは、フォームの入力が無効な場合にエラー要素を表示します。

form:has(:user-invalid) .error {
  display: block;
}

form:has(:user-invalid) .error {

display: block;

}

そしてこれは、#sidenavに.--is-openがある場合にメインコンテンツエリアをスライドアウトさせます。

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

html:has(#sidenav.--is-open) main {

translate: -320px;

}

最後は視覚的にも楽しいBento UIです。:has()を親セレクタとして使用し、:has()と数量クエリとコンテナクエリを使用して、1-12個の要素を縦・横向きにグリッドレイアウトします。

See the Pen
Always great grid - CSS grid + :has() + view transitions by coliss (@coliss)
on CodePen.

:has()疑似クラスについて、さらに詳しく知りたい人はこちらをどうぞ。

朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ

subgridでカード内のテキストを簡単に揃えることができる

subgridは2023年10月にChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、主要ブラウザのすべてで利用できます。

subgridのサポートブラウザ

長年に渡り、フロントエンドのコミュニティでは、パワフルなCSS Gridレイアウトエンジンを完成させるためにsubgridを求めてきました。概要はAdam Argyleの記事（翻訳: CSSのサブグリッド（subgrid）の基礎知識と使い方）をご覧ください。

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

body {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

> article {

display: grid;

grid-row: span 4;

grid-template-rows: subgrid;

}

See the Pen
subgrid content alignment by coliss (@coliss)
on CodePen.

CSSのsubgridについて、さらに詳しく知りたい人はこちらをどうぞ。

CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！

CSSでネストをする

CSSのネストは、2023年8月に主要ブラウザのすべてで利用可能になりました。

CSSネストのサポートブラウザ

さっそく私はWebサイトをアップデートして、ネストをコンパイルするビルドプロセスを削除し、スタイルシートを記述したファイルをより軽量にしました。そうです、CSSのネストを使用するとCSSはより軽量になり、もちろんすべてのブラウザのデベロッパーツールも対応しています。

CSSのネストの概要と構文の詳細については、Adam Argyleの記事（翻訳: CSSのネストがついにブラウザで使用できるようになった！基礎知識、便利な使い方を詳しく解説をご覧ください。

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

.you {

.can-totally-ship-this {

&.if-you-wanted {

/* it's VERY MUCH like SCSS */

&:is(:hover, :focus-visible) {

/* put a bird on it */

}

.for-theming {

@media (prefers-color-scheme: dark) {

/* you can nest media queries */

}

/* or for theming with [data-theme="dark"] */

.button {

background: black;

color: white;

/* nest and do more than just append, flip it and reverse it */

[data-theme="dark"] & {

background: white;

color: black;

}

CSSのネストについて、さらに詳しく知りたい人はこちらをどうぞ。

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

見出しテキストの折り返しのバランスをブラウザに任せる

text-wrap: balance;は、Safariを除くすべてのブラウザにサポートされています。

text-wrap: balance;のサポートブラウザ

text-wrap: pretty;は、SafariとFirefoxを除くすべてのブラウザにサポートされています。

text-wrap: pretty;のサポートブラウザ

text-wrap: balance;がなければ、デベロッパーやコピーライターは<wbr>やなどの改行ヒントに頼らざるを得ません。さらに、そのコンテンツが翻訳されたり、ズームされたりすると、改行ヒントがコンテンツの新しい表示に対して正しい位置にある保証がなくなるため、これはほとんど負け戦になります。

バランスの取れたテキストの折り返し（text-wrap: balance;）を使用すると、この作業をブラウザに任せることができます。

See the Pen
balanced vs pretty vs not #CSSWrapped2023 by coliss (@coliss)
on CodePen.

text-wrap: balance;について、さらに詳しく知りたい人はこちらをどうぞ。

テキストの行のバランスを調整するCSSの新機能「text-wrap: balance;」の基礎知識と使い方

CSSの新機能！テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方

コンテナクエリ単位

コンテナクエリ単位（cqi, cqw, cqb, cqh, cqmin, cqmax）も2024年現在、すべてのブラウザにサポートされています。

コンテナクエリ単位のサポートブラウザ

コンテナクエリ単位は去年の時点ですべてのデベロッパーは知っておくべきだと提案しましたが、もしまだ学んでいないのであれば、これから取り組んでみてください。コンテナクエリの概要はAhmad Shadeedの記事（翻訳: CSSの新しい単位がすごく便利！コンテナベースの相対単位「コンテナ単位（qw, qh）」の基礎知識と使い方）がお勧めです。

コンテナクエリ単位には、6つの単位があります。

cqi: インラインのバリエーション
cqw: 幅のバリエーション
cqb: ブロックのバリエーション
cqh: 高さのバリエーション
cqmin: 小さい方の長さのバリエーション
cqmax: 大きい方の長さのバリエーション

たとえば、コンテナに対する相対アニメーションと固有アニメーションのシナリオを考えてみましょう。100cqiつまりコンテナのインラインサイズの100%を使用して、コンテナから完全にスライドアウトする子要素です。

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

@keyframes slide-out-of-container {

to {

translate: -100cqi;

}

コンテナの向きに対応したタイポグラフィを備えたカードで、コンテナが横向きの場合は半分のサイズになります。

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}