一昔前のブラウザもサポートする感じで実装することができる。与えられた条件はユーザーエージェントのCSSでサポートされているかをネイティブメソッドを使ってテストするルール。一部ブラウザでは2012あたりから対応されている機能。Enhancement(プログレッシブ・エンハンスメント)といわれる開発思想において、ブラウザごとにcssプロパティの実装状況が異なるため、開発時にModernizrなどを使ってサポート状況ごとにスタイルの分岐をするという手法はこれまでもあった。*/}これと同じことをネイティブのみでできるようなる感じなのが@supportsルール。ネイティブなModernizrという感じになるだろうか。ちなみにブラウザサポート状況はhttp://caniuse.com/#feat=css-featurequeriesの通り。IEは未サポートです。サポートの有無で試してみる。その名の通りグリッドレイアウトを行えるプロパティ。*のboxがグリッドレイアウトが表示されるはずである。CodePen.実際に使うとしたら以下のような感じ。IEが@supportsを未サポートなのでfallbackしてやる。あとは@supportディレクティブでスタイルを書いておけば良さそう。近い未来のcssプロパティに備ることができる。*/}JavaScriptでの代替cssのサポートをJavaScriptで検知して何かするとしたら、CSS.supports()を使う。grid');}という感じかな。APIとしてCSS.supportsの実装が進んでるので、@supportsを使って、近い将来のCSSプロパティに備える時期に来ているのではないだろうか。