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

現在使用できる、強力で安定した優れたツールバーです。

Adam Argyle

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

この投稿は すべてのフロントエンド デベロッパーが 2023 年に知っておくべき昨年の 6 つの CSS スニペット。

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

:has()

対応ブラウザ

  • Chrome: 105。 <ph type="x-smartling-placeholder">
  • Edge: 105。 <ph type="x-smartling-placeholder">
  • Firefox: 121。 <ph type="x-smartling-placeholder">
  • Safari: 15.4。 <ph type="x-smartling-placeholder">

ソース

: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)) {…}

もう 1 つの高度な例は、ドキュメント全体に設定されたスタイルを変更することです。 ページの特定のチェックボックスがオンの場合:

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 個の要素:

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Codepen で試す

サブグリッドを作成する

subgrid

対応ブラウザ

  • Chrome: 117。 <ph type="x-smartling-placeholder">
  • Edge: 117。 <ph type="x-smartling-placeholder">
  • Firefox: 71。 <ph type="x-smartling-placeholder">
  • Safari: 16。 <ph type="x-smartling-placeholder">

ソース

何年もの間、フロントエンドのウェブ コミュニティは、締めくくりと仕上げを支援するためにサブグリッドを必要としていました。 これは非常に人気があり強力な 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

対応ブラウザ

  • Chrome: 120。 <ph type="x-smartling-placeholder">
  • Edge: 120。 <ph type="x-smartling-placeholder">
  • Firefox: 117。 <ph type="x-smartling-placeholder">
  • Safari: 17.2。 <ph type="x-smartling-placeholder">

ソース

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

対応ブラウザ

  • Chrome: 114。 <ph type="x-smartling-placeholder">
  • Edge: 114。 <ph type="x-smartling-placeholder">
  • Firefox: 121。 <ph type="x-smartling-placeholder">
  • Safari: 17.5。 <ph type="x-smartling-placeholder">

ソース

pretty

対応ブラウザ

  • Chrome: 117。 <ph type="x-smartling-placeholder">
  • Edge: 117。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: サポートされていません。 <ph type="x-smartling-placeholder">

ソース

text-wrap: balance がない場合、デベロッパーとコピーライターは改行ヒントを利用できます。 たとえば <wbr> 要素や &shy; などです。ほぼ負けの戦いです コンテンツの翻訳、ズーム、変更が行われた場合、それらが ラッピングヒントは、コンテンツの新しいプレゼンテーションに適した場所になります。

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

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

cqw

対応ブラウザ

  • Chrome: 105。 <ph type="x-smartling-placeholder">
  • Edge: 105。 <ph type="x-smartling-placeholder">
  • Firefox: 110。 <ph type="x-smartling-placeholder">
  • Safari: 16。 <ph type="x-smartling-placeholder">

ソース

昨年の投稿では、すべてのフロントエンド デベロッパーが 作成します。まだ学習していない方は、2024 年を成功の年にしましょう。 コンテナクエリユニットも確認します概要として 2021 年、Ahmad Shadeed はコンテナ クエリ ユニットに関する優れた記事を執筆しました。

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

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

コンテナに対する相対アニメーションと本質的アニメーションのシナリオを考えてみましょう。 子要素は、元のコンテナから完全にスライドアウトします。 コンテナのインラインサイズの 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 年にご利用いただけるすべてのユニットをご確認ください。