CSS革命CSS1の勧告から30年。
CSSはただの装飾から、
思考する生命体へと変貌。

この1~2年、CSSの進化がめざましく、なんか革命でも起きてんの？と感じる毎日です。(まあ、ChatGPT以降がほぼ革命といってもいいんですが)
それは疑似セレクタのhas()を調べてて、『あれ！今までのCSSと違う』っと感じたことが発端です。
この気になるCSS、厳密にはCSS Selectors Level 4 仕様以降のCSS、いわゆるモダンCSSということなんだけど…。
何が違うって、子要素の状態変化や種類に応じて親要素のスタイルを随時変更可能、つまり設定された要素が周囲の状況を自分で判断し、自律的に振る舞うようになっています。
(そもそも子要素が親要素を制御できる事がもはや革命なんですが。)
平たく言えばCSSのIF文。AIは大げさでも、ロジックを持った、考え始めたといっても言い過ぎじゃないです。
で、よく調べてみると他にもたくさんのセレクタ、プロパティやアットルールがあることがわかりました。今回はそれらをご紹介します。

新しいCSSは範囲が広く、そのまま追うと混乱します。まずは役割別に整理すると、構造が見えてきます。
以下より5つに区分けした項目をひとつづつ、解説します。

たとえば疑似クラスのhas()は、CSSのIF文。『もしも子要素に小見出しがあるならマージンを小さく！』というような条件分岐が可能です。フォーム入力支援や状態判定なども含め、CSSは明確に“考える領域”へ踏み込んでいます。
※　ロジック（処理の内容や手順、論理的な構造）

これまでレスポンシブとは大きい画面のPCと小さい画面のスマホを区分けするための考え方でした。しかし、近年は折り畳みスマホやピクセル解像度の進化でPCとの区別がつかなくなり、PC=大きい画像、スマホ＝小さい画像という観念が崩れ去りました。現在、画面横幅の違いだけではレスポンシブの設計は困難になっています。
そのためCSSは、画面のアスペクト比という環境そのものを捉える設計へと進化しています。

詳細度というのはあまり馴染みのない言葉ですが、CSSのスタイルの優先順位のことです。その領域にも新たに切り込んできたのが:where（）、:is()などの疑似クラスです。特に:where()はもっとも地味な存在にみえて、これこそが革命と呼ぶにふさわしい存在です。
これまでのセレクタの長い積み重ねの呪縛から解放してくれる魔法の呪文です。

フォーム入力関連は昔からある:checked + labelをはじめ:disabled、:valid / :invalidなど、JSが必須だったバリデーションがCSSだけで完結。さらに:focus-visibleや:placeholder-shownなど。
さらに、デザイン面においても、color-mix(), color-schemeなどの登場により、これまで手作業やJSが必須だった作業がCSSだけで完結、いわゆるネイティブ化が進んだといえます。

もともとグリッドはそれまでの（flex系など）線で制御していたレイアウトを面に進化させた画期的な機能でしたが、さらに設計しやすく進化しました。また、自動でコラムを生成するcolumns, writing-modeなど、もはやプロパティというよりエンジンと呼べるようなものまで登場してます。

新しい機能にはブラウザが対応していないことも多いです。その判定を機能で選別できるように登場した@supportsも、自然の流れなんでしょう。

また、進化しているのはCSSだけではないです。jsはもちろん、htmlまでもが次元違いの進化をしています。
例えばデバイス別に画像のアスペクト比が違う場合など、これまでは別途デバイスを選別する専用プログラムが必要でした。
それが現在はそれらを全てブラウザが（HTMLの正しい記述で）やってくれます。
面倒な作業は全部ブラウザが受け持つ次元にまでブラウザ自体も進化しているわけです。

これらとCSSを組み合わせることで、これまでJSなどを何段階にも分けて組みこんで実現していたことが非常に簡単に実装可能になってきました。
さらにいうと、このCSSの進化を見ると、もはやJSは不要とまで勘違いしてしまいそうだけど、そうではなくJSと密接に連携させることでこれまで以上に密度の高い機能、処理が少ない手数で可能になります。JS自体も高度に進化していますので、連携させるとさらに効率の良い快適なユーザビリティが実現します。

CSSの体系的な区分の後は個別の解説へと進めます。
その第一弾として、ロジックを持った:has()ではなく、まさかの:where()から
では、こうご期待。