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

すぐに使える、強力で安定した CSS をツールベルトに追加します。

Adam Argyle

すべてのフロントエンド デベロッパーは、:has() が単なる「親セレクタ」ではないことを理解し、subgrid の使用方法とその理由、組み込みの CSS 構文でネストする方法、ブラウザにヘッドライン テキストの折り返しをバランスよく行う方法、コンテナ クエリ単位の使用方法を理解する必要があります。

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

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

:has()

対応ブラウザ

• 105
• 105
• 121
• 15.4

ソース

:has() は 2023 年末にすべての主要ブラウザでリリースされました。この新しいセレクタは小さくて無害に見えますが、ゲーム、リアクティビティ、コンテンツ認識レイアウト、スマート コンポーネントなど、さまざまなユースケースで活用できます。Jhey によるこちらの記事で詳しく説明されています。

親セレクタとして :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

対応ブラウザ

• 117
• 117
• 71
• 16

ソース

長年にわたり、フロントエンド ウェブ コミュニティは、非常に人気があり強力な 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

対応ブラウザ

• 120
• 120
• 117
• 17.2

ソース

組み込みの 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

対応ブラウザ

• 114
• 114
• 121
• 17.5

ソース

pretty

対応ブラウザ

• 117
• 117
• x
• x

ソース

text-wrap: balance がないと、デベロッパーとコピーライターは、<wbr> 要素や ­ などの改行ヒントに頼ることになります。ほとんどの場合、これは無駄な作業です。コンテンツが翻訳、ズーム、変更されると、それらの折り返しヒントがコンテンツの新しい表示に適した場所にあるとは限りません。

バランステキスト ラップを使用すると、この作業をブラウザに任せることができます。比較については、次の Codepen をご覧ください。

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

cqw

対応ブラウザ

• 105
• 105
• 110
• 16

ソース

昨年の投稿では、すべてのフロントエンド デベロッパーがコンテナクエリの作成方法を知っておくべきだと提案しました。まだ学習していない場合は、2024 年にぜひ挑戦してみてください。コンテナ クエリ ユニットもぜひご確認ください。概要として、Ahmad Shadeed が 2021 年にコンテナ クエリ ユニットに関する優れた記事を作成しています。

新しいコンテナ クエリ ユニットは 6 つあります。

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 年に利用できるすべてのユニットを確認することをおすすめします。