すべてのフロントエンド デベロッパーが知っておくべき 5 つの CSS スニペット（2024 年）

ツールベルトにふさわしい、強力で安定した CSS を今すぐ使用できます。

Adam Argyle

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

この記事は、昨年の「すべてのフロントエンド デベロッパーが知っておくべき 6 つの CSS スニペット（2023 年版）」の続編です。

CSS:has(.potential-beyond-being-a-parent-selector)

:has()

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

:has() が 2023 年末にすべての主要ブラウザに実装されました。この新しいセレクタは小さくて無害に見えますが、ゲーム、リアクティビティ、コンテンツ認識レイアウト、スマート コンポーネントなど、さまざまなユースケースをアンロックできることに驚くでしょう。詳しくは、Jhey の記事をご覧ください。

4 つのパネルが表示され、それぞれに画像とキャプションが表示されています。各画像は、脳の活動が徐々に高まっている様子を示しています。1 つ目のパネルには「:has()」と表示され、2 つ目のパネルには「figure:has(caption) as a parent selector」と表示されます。3 つ目のパネルには、数量セレクタとして .layout:has(> :nth-child(5)) が表示されています。4 つ目のパネルには、条件付きの件名変更セレクタとして html:has(#checked) .new-subject と表示されています。

以下に、親セレクタとして :has() を使用する例をいくつか示します。通常、セレクタのサブジェクトは ul li のように末尾にあります。ここで、li はサブジェクトであり、スタイルを取得します。このため、この名前が付けられました。:has() を使用すると、セレクタの先頭にある要素がサブジェクトになります。次の例では、クラス .icon の要素が内部にある場合、ボタンにギャップがあります。カード内に画像がある場合、カードの向きが変わります。

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

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

長い間望まれていたセレクタは、アイテムの数に基づいてレイアウトを変更するものです。:has() では、子の数をクエリしながらコンテナをサブジェクトとして保持できるため、これが可能になりました。

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

別の高度な例として、ページ上の特定のチェックボックスがオンになったときに、ドキュメント全体に設定されたスタイルを変更する例を示します。

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

これらはセレクタの対象を変更しない簡単なユースケースです。このような例だけを見ると、:has() は親セレクタに限定されると思われるかもしれません。ただし、次の例を考えてみましょう。これらは共通の祖先に基づいて何かをチェックし、セレクタの対象をページのより深い場所にある子要素にピボットします。

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

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

次の例では、サイドナビゲーションに .--is-open クラスがある場合に、メイン コンテンツ領域をスライドアウトします。

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

:has() を親セレクタとして、:has() を数量クエリとして、コンテナクエリを使用して、縦向きまたは横向きで 1 ～ 12 個の要素をエレガントに表示できるグリッド レイアウトを作成する楽しいデモを次に示します。

Codepen で試す

サブグリッドを作成する

subgrid

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

長年にわたり、フロントエンド ウェブ コミュニティは、非常に人気があり強力な CSS グリッド レイアウト エンジンを完成させるために、サブグリッドを求めてきました。現在、この機能は 3 つの主要なエンジンすべてで利用できます。

概要については、こちらでサブグリッドの詳細をご確認ください。

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

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

CSS の方法でネストする

nesting

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Source

組み込みの CSS ネストは、2023 年にすべての主要ブラウザで利用可能になりました。ウェブサイトを更新して、ネストをコンパイルするビルドプロセスを削除し、より小さなスタイルシートを配信するようになりました。ネストされたスタイルシートは小さく、すべてのブラウザのデベロッパー ツールで表現できます。

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;
  }
}

ブラウザに広告見出しのバランス調整を許可する

balance

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source

pretty

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: not supported.
  • Safari: 26.

Source

text-wrap: balance がないと、デベロッパーやコピーライターは、<wbr> 要素や &shy; などの改行ヒントに頼ることになります。コンテンツが翻訳、拡大縮小、変更されると、そのコンテンツの新しい表示でラッピング ヒントが適切な場所に表示される保証はないため、ほとんどの場合、この方法はうまくいきません。

バランスの取れたテキストの折り返しを使用すると、この作業をブラウザに任せることができます。次の Codepen で比較を確認できます。

コンテナ クエリ単位を使用する

cqw

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

昨年の投稿では、すべてのフロントエンド デベロッパーがコンテナ クエリの書き方を知っておくべきだと述べました。まだ学習していない場合は、2024 年に思い切って学習を始め、コンテナ クエリ単位も確認してみてください。概要として、Ahmad Shadeed 氏が 2021 年にコンテナ クエリ単位に関する優れた記事を執筆しています。

次の 6 つの新しいcontainer query 単位があります。

  1. インライン バリアント cqi。
  2. 幅のバリアント cqw。
  3. ブロック バリアント cqb。
  4. 高さのバリエーション cqh。
  5. 長さが小さい方のバリエーション cqmin。
  6. 長さが大きい方のバリアント cqmax。

コンテナに対する相対アニメーションと固有アニメーションのシナリオを検討します。100cqi（コンテナのインライン サイズの 100%）を使用してコンテナから完全にスライドする子要素。

@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;
    }
  }
}

これらのユニットを初めて使用する場合は、2024 年に利用可能なすべてのユニットを確認することをおすすめします。