強力で安定性の高いツールバーで、すぐにご使用いただけます。
すべてのフロントエンド デベロッパーは、:has() が「親セレクタ」以上のものであること、subgrid の仕組みと理由、組み込みの CSS 構文でネストする方法、ブラウザで見出しテキストの折り返しのバランスを取る方法、コンテナクエリ ユニットの使用方法について知っておくべきだと思います。
この投稿は、すべてのフロントエンド デベロッパーが知っておくべき昨年 2023 年の 6 つの CSS スニペットの続きです。
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
: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)) {…}
もう 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 個の要素を縦向きまたは横向きで適切に表示できるグリッド レイアウトを作成するデモを紹介します。
サブグリッドを作成する
subgrid
何年もの間、フロントエンドのウェブ コミュニティは、大人気で強力な 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
組み込みの 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
pretty
text-wrap: balance がない場合、デベロッパーとコピーライターは、<wbr> 要素や ­ などの改行ヒントを使用します。コンテンツがなんらかの形で翻訳、ズーム、変更されても、コンテンツのラッピングのヒントがコンテンツの新しいプレゼンテーションに適した場所に表示される保証はないからです。
バランスの取れたテキストの折り返しを使用すると、この処理をブラウザに任せることができます。次の Codepen で比較を確認できます。
コンテナクエリ ユニットを使用する
cqw
昨年の投稿では、すべてのフロントエンド デベロッパーにコンテナクエリの記述方法が知っておくべきだと提言しました。まだ学習していない方は、2024 年を思い切って挑戦してください。また、コンテナクエリ ユニットについてもぜひご確認ください。概要としては、2021 年に Ahmad Shadeed がコンテナクエリ ユニットに関する優れた記事を執筆しています。
次の 6 つの新しいコンテナクエリ ユニットがあります。
- インライン バリアント
cqi。 - 幅のバリエーション
cqw。 - ブロック バリアント
cqb。 - 高さのバリエーション
cqh。 cqminよりも短い方の長さのパターン。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 年で使用可能なすべてのユニットを確認することをおすすめします。