メモログ

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

@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 のルールを二つ用意する必要がある。

@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もあわせて。