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

UX MILK編集部

モノづくりのヒントになるような記事をお届けします。

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

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

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

カスタムプロパティ(Level 1)

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

変数の宣言

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

:root {
  --main-color: #06c;
  --accent-color: #006;
}

変数の呼び出し

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

h1 {
  color: var(--main-color);
}

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

ブラウザサポート
ブラウザ 対応バージョン
IE ×
Firefox 31 以上
Chrome 49 以上
Safari 9.1 以上

セレクタ(Level 4)

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

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

:matches(s1, s2)

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

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

section h2,
.section h3 {
    font-weight:600;
}

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

section:matches(h1, h2) {
    font-weight:600;
}
ブラウザサポート
ブラウザ 対応バージョン
IE ×
Firefox 4以上(-moz-が必要)
Chrome 15以上(-webkit-が必要)
Safari 5.1以上(-webkit-が必要)

:not(s1, s2)

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

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

section *:not(h2, h3){/* プロパティ */}

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

ブラウザサポート
ブラウザ 対応バージョン
IE ×
Firefox ×
Chrome ×
Safari 9.1以上

:has(rs1, rs2)

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

/* img を子に持つ a 要素のみに合致します。*/
a:has(> img)

/* 別の li 要素が直後に続く li 要素に合致します。 */
li:has(+ li)

/*h1, h2を含むsection要素に合致します。*/
section:has(h1, h2)

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

ブラウザサポート
ブラウザ 対応
IE ×
Firefox ×
Chrome ×
Safari ×

カラー(Level4)

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

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

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

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

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


イベント

2017/12/05(火)
Design Thinking Square