すべてのフロントエンド デベロッパーが知っておくべき 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 つのパネルが表示され、それぞれに画像とキャプションが付いています。各画像は、脳の処理能力がどんどん高まっている様子を表しています。最初のパネルには :has() と表示されます。2 番目のパネルには、親セレクタとして figure:has(caption) と表示されます。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 Technology Preview: supported.

Source

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

バランステキスト ラップを使用すると、この作業をブラウザに任せることができます。次の Codepen で比較できます。

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

cqw

Browser Support

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

Source

昨年の投稿では、すべてのフロントエンド デベロッパーがコンテナクエリの作成方法を知っておくべきだと提案しました。まだ学習していない場合は、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 年に利用できるすべてのユニットを確認することをおすすめします。