CSS4 :matches の使い方とブラウザ対応状況

2015-11-23

まだ CSS3 も IE がやっと対応したのに話が早いですが、CSS4 の草案自体はだいぶ前に発表されていて部分的には各ブラウザ対応が進んでいます。

CSS4

まだまだ草案の状態なのでこれから変化、消滅等起こると思うのですが :matches セレクターについてまとめてみます。

:matches

CSS3まで

article h2, footer h2, aside h2 {
    color: red;
}

CSS4

:matches(article, footer, aside) h2 {
    color: red;
}

article と footer と aside を :matches でひとまとめに出来るってことですね。何度も h2 を書く必要がなくなり、CSS の視認性があがり、かつ文字数が減りコンパクトになります。

また : （コロン）が付いている通り擬似セレクタ（ :first-child など）と同じようにこんな使い方も出来ます。

CSS3まで

body.home, body.archives, body.tag {
    color: red;
}

CSS4

body:matches(.home, .archives, .tag) {
    color: red;
}

かなり見やすくなって分かりやすいです。子孫セレクタとしても使えるし、body.class のようにくっついてるセレクタにも使えて便利です。

ただし、ブラウザの対応状況はまだバラバラで、

IntenetExplorer11　なし

FireFox　一応あり

GoogleChrome　一応あり

Opera　一応あり

Safari　対応

上記の「一応あり」とは、「:matches」という表記では各ブラウザ対応しておらず

CSS

/*FireFox*/
:-moz-any(article, footer, aside) h2 {
    color: red;
}

/*GoogleCrome,Opera,Safari*/
:-webkit-any(article, footer, aside) h2 {
    color: red;
}

と全てのブラウザがベンダープレフィックス（-moz-、-webkit-）つきで、且つ :matches ではなく :any という別のセレクタ名になっています。どのブラウザも更新日現在では :matches では対応しておらず、全て :any での対応となってます。

お使いのブラウザが :matches もしくは :any に対応してるかどうか分かるように当ブログのフッター（一番下）に細工を入れました。

:matches :any 対応

ex4

:matches :any 非対応

ex2

対応しているブラウザはフッターのタイトル文字が赤くなります。対応していない場合は黒色です。

現状の対応状況を考えると意味がありませんが、仮に無理やり使った場合の書き方は

CSS:matches :any

/*IE11含む未対応ブラウザ用*/
article h2, footer h2, aside h2 {
    color: red;
}

/* :matches */
:matches(article, footer, aside) h2 {
    color: red;
}

/*FireFox*/
:-moz-any(article, footer, aside) h2 {
    color: red;
}

/*GoogleCrome,Opera*/
:-webkit-any(article, footer, aside) h2 {
    color: red;
}

と全て併記する形になり、せっかく「コンパクトに記述できる」利点が何もありません。

:matches の現状

今の状態では使えるけれど使う必要なし。

参考：Selectors Level 4