CSS4 :matches の使い方とブラウザ対応状況
まだ CSS3 も IE がやっと対応したのに話が早いですが、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 対応
:matches :any 非対応
対応しているブラウザはフッターのタイトル文字が赤くなります。対応していない場合は黒色です。
現状の対応状況を考えると意味がありませんが、仮に無理やり使った場合の書き方は
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 の現状
今の状態では 使えるけれど使う必要なし。