メモログ

Native CSS feature detection via the @supports rule - Dev.OperaとOpera Developer News - Why use @supports instead of Modernizr?とFeature queries: the ‘@supports’ ruleについての話。

1
2
3
4
5

@supports (display:flex) {
  section { display: flex }
  ...
}

@supportsは、上記のような感じで「(property:value)」と指定して、そのプロパティと値をブラウザがサポートしている場合のみ、{}内のCSSが適用されるというもの。at-ruleなので、@supportsを使用できないブラウザでは、{}内は無視される（このへんの詳細はCSSのエラーの扱い方 - メモログを参照）。サポート状況はCan I use CSS Feature Queriesによると、現時点ではOpera（とFirefox Aurora）のみなので、実用にはまだ時間がかかりそう。

@supportsの指定では「and」と「or」を使って条件を複数指定することと、「not」を指定して否定の条件を指定することもできます。「else」のようなものはないので、特定の機能をサポートしている場合としていない場合でCSSを宣言したい場合は、@supportsのルールを二つ用意する必要がある。

1
2
3
4

@supports (display:flex and color:red){ ... }
@supports (display:flex or display:none){ ... }
@supports not (display:flex){ ... }

CSSの場合は、基本的にサポートしていない値が指定されている場合はうまい感じに無視してくれるので、@supportsはあまり必要としませんが、flexboxのように特定の機能のサポートと関係の強いCSSの指定がたくさんあるような場合は便利。

（参考までに閲覧中のブラウザが@supportsに対応している場合は、下の画面が黒くなるcodepen）

@supports ― CSSのFeature Queries - fragmentaryもあわせて。