Supportsルールを使って未来のcssプロパティに備えた開発

css3で追加された機能クエリ@supportsを使うことで、将来のcssプロパティで実装しつつ、
一昔前のブラウザもサポートする感じで実装することができる。

@supports とは

与えられた条件はユーザーエージェントのCSSでサポートされているかをネイティブメソッドを使ってテストするルール。
一部ブラウザでは2012あたりから対応されている機能。

Progressive Enhancement(プログレッシブ・エンハンスメント)といわれる開発思想において、
ブラウザごとにcssプロパティの実装状況が異なるため、開発時にModernizrなどを使ってサポート状況ごとにスタイルの分岐をするという手法はこれまでもあった。

.no-cssgradients .header {
    /* gradients サポートしてない時のスタイル */
}

.cssgradients .header {
    /* gradients サポートしている時のスタイル */
}

これと同じことをネイティブのみでできるようなる感じなのが@supportsルール。
いわばネイティブなModernizrという感じになるだろうか。

ちなみにブラウザサポート状況はhttp://caniuse.com/#feat=css-featurequeriesの通り。IEは未サポートです。

実装

例として disokay: grid のサポートの有無で試してみる。
ちなみに display: grid はその名の通りグリッドレイアウトを行えるプロパティ。

ブラウザのサポート状況 はIE edgeのみである。
IE以外で表示すするならば

browser	setting
Chrome(Canary)	chrome://flags/#enable-experimental-web-platform-features を有効にする
Firefox	about:configからlayout.css.grid.enabled を有効にする
Opera	opera://flags/#enable-experimental-web-platform-features を有効にする
WebKit(Nightky build)	developのexternal featuresからcss grid を有効にする

以下のコードを実行した時、display: grid のサポートしていれば*背景色が#C00 *のboxがグリッドレイアウトが表示されるはずである。

See the Pen @supports example by --- (@kazu69) on CodePen.

---

実際に使うとしたら以下のような感じ。
IEが@supportsを未サポートなのでfallbackしてやる。
あとは@supportディレクティブでスタイルを書いておけば良さそう。

将来的には *@support (true) *な条件になると言う前提で書いておけば、
近い未来のcssプロパティに備ることができる。

/* @supportsをサポートしないブラウザ向けのfallback */
.not-FUTURE-PROPERTIES {
    /* ... */
}

/* 未来のプロパティ未サポートの場合 */
/* 上記のfallbackとまとめられることもある */
@supports not (FUTURE-PROPERTIES) {
    /* ... */
}

/* 未来のプロパティサポートの場合 */
@supports (FUTURE-PROPERTIES) {
    /* ... */
}

JavaScriptでの代替

cssのサポートをJavaScriptで検知して何かするとしたら、CSS.supports()を使う。
今回のように display: grid の場合であるならば、ざっくりだけど

const isGridSupport = () => {
    if(window.CSS) {
        return CSS.supports('display', 'grid');
    }
}

if(isGridSupport()) {
    console.log('Support display: grid');
} else {
    console.log('Not Support display: grid');
}

という感じかな。

まとめ

まだまだModernizrの活躍にも期待しつつも、Web APIとしてCSS.supportsの実装が進んでるので、
@supportsを使って、近い将来のCSSプロパティに備える時期に来ているのではないだろうか。

参考にしたページ

Feature queries: the ‘@supports’ rule
@supports
CSS Grid Layout Module Level 1
Enable CSS Grid Layout
CSS.supports()