気になったので、CSS4についてちょこっと調べてみた

ついこの間までHTML5/CSS3とか言ってたのに、最近周りでは"CSS4"とやらの話がちらほら。
気になったので少しだけ調べてみた。

CSS4？なにそれおいしいの？

結構おいしそう。
届きそうで届かなかった、ちょっと痒い所をかけるようになった感じです。
ただ、CSSが「要素ごとにセレクタを定義してずらーっと書いていく」という自分のような初心者イメージだけでは少しややこしいかも。

「ここが美味しい」例１）:matches()

これまで、「CSSを書く」といったら、各種要素を片っ端から列挙していく単純作業感がありました。
が、CSS4で新規に追加された:matches()を利用すれば、恐ろしくスッキリ記述できるようです。

main.css（これまでのCSS）

div#wrapper .content title h1,
div#wrapper .content title h2,
div#wrapper .content title h3 {
    color: #FF0000;
    margin-left: 15px;
}

main.css（CSS4での記述）

div#wrapper .content title:matches(h1, h2, h3) {
    color: #FF0000;
    margin-left: 15px;
}

見るからにすっきりしましたね。

「ここが美味しい」例２）"?"セレクタ

「この要素の下に、〇〇がある場合にだけ、表示を変えたい」
という、頭がこんがらがりそうな要求も、CSSで簡単に書けるようになりました。

index.css（例：子要素として"required"が含まれる場合のみ、表示を変えたい。）

div#wrapper .content .body ul ?li required {
    color: #FF0000;
}

この程度の内容であれば、別で定義したほうが後々便利じゃないかという声もありそうですが、読みやすい・使いやすいように適宜選択が必要ですね。

注意点

とはいえ、CSS4はまだまだブラウザ側の対応もまちまちなようで、対応状況・制限事項などを確認の上で利用する必要がありそうです。