変数やセレクタが便利に！CSS4などで追加される新機能とは

現在、HTMLやCSSの標準仕様を策定するW3Cでは、いくつかの新しいモジュール（Level1）と既存モジュールのCSS4（Level4）が策定中となっています。今回はこれらの新しい仕様の中から、特に便利そうなものを紹介します。

また正確には、CSS4は存在しないとされていますが、便宜上わかりやすくするためにLevel4のモジュールをCSS4とここでは呼称しています。

※ 以下の情報は「CSS Working Group Editor Drafts」を参考にしています。また、草案段階なので仕様が変更・削除される可能性があります。

カスタムプロパティ（Level 1）

カスタムプロパティは、CSSにおけるユーザー定義変数です。SassなどのCSSプリプロセッサを使えば変数が使えますが、これによってCSSネイティブで変数を扱えるようになります。

変数の宣言

変数の宣言は、 --変数名 : 値という書式です。変数は、大文字と小文字が区別されます。

変数の呼び出し

変数の呼び出しは、 var(--変数名)という書式です。

現在、W3Cの勧告候補となっていますが、IEとEdgeでサポートされていないので、実務で使う場合はしばらくSassなどを使うことになりそうです。

セレクタ（Level 4）

現在、仕様の策定が進められているセレクタ Level4で追加される新しいセレクタの中から、特に便利そうなものをピックアップして紹介します。また、このほか:any-link, :dropなどのセレクタも検討されています。

まだ草案段階ですが、一部のセレクタは先行してブラウザでのサポートがされてきています。

:matches(s1, s2)

s1, s2の両方もしくは、どちらか一方に合致する要素を指定します。s1,s2には、HTML要素や擬似要素を指定できます。これによって、セレクタをより簡潔に記述できるようになります。

例えば、複数の要素を指定する場合は、CSS3では以下のようにカンマで区切って記述します。

これが、:matchesを使うと以下のように簡潔に指定することができます。

:not(s1, s2)

:notはCSS3からありますが、CSS4からはカンマ（,）区切りで複数の要素を指定できるようになります。

以下の例の場合、section要素以下のh2,h3以外の全ての要素にプロパティが適用されます。

:not()は、主要ブラウザでサポートされていますが、複数指定する:not(s1, s2)はまだサポートしていないブラウザがほとんどです。

:has(rs1, rs2)

rs1, rs2 のいずれかの要素を含むもの、またはセレクタに合致する要素を指定します。

2016年8月3日付の編集者草案として新しく追加されたセレクタなので、現在サポートしているブラウザはありません。

カラー（Level4）

カラーモジュールでは、色の指定方法についての拡張が検討されています。下記以外にも、color()関数やcolor-mod()関数などの仕様が検討されています。まだ草案段階なので、実際に使えるようになるのはまだまだ先になりそうです。

16進数カラーコードでの透過

CSS4からは、16進色でも透過度を表すことができるようになります。従来は、６桁の16進数だったものが8桁になり、末尾の2桁が透過度を表します。

例えば、#0000ffccは， rgba(0, 0, 255, 0.8) と同じ少し透過された青を表現します。

透過に関しては、rgba()などで透過度を表すアルファ値を数値だけでなくパーセントでも指定可になる変更が検討されています。