Spartan で Conditional Rules / CSS.supports() 使ってみる（Windows 10 Technical Preview Build 10049）

Spartan で Conditional Rules ( CSS.supports() ) が使用可能になったので試してみました。

各ブラウザーでの状況

http://caniuse.com/#feat=css-supports-api

現状 Sarfari / Opera Mini では非対応のようです。

使い方

 

こちらで "display: flex" に適応できます。

使える機能でその機能させてもあんまり意味がないですね。

 

 

not () で指定したプロパティが”使えなければ”

という使い方もできます。

 

多分、こちらが多く使われるパターンだと思われます。

 

 

mediaquery のように or や and が使えます。

 

 

実例

サンプル1

 

filter (-webkit-filter) がサポートされている場合、背景にぼかしを入れます

サポートしていないブラウザの場合は画像が半透明になります

 

 

Firefox、Chrome の場合は機能がサポートされているため、ブラーのフィルターが掛かります。

 

Spartan でこの機能はサポートされていますが、filter がサポートされていないためブラーの処理されません。

( status.modern.ie の Preview Release になりましたが Build 10049 で動作しない )

 

 

サンプル2

 

分岐に失敗してこの機能をサポートしていない Safari は隠さなきゃいけないものが出てしまっています。

現状は結構考えてつくる必要がありそうです

 

JavaScript で使う 

どうやら JavaScript でも使うことができるようで、

CSS.supports(); で Boolean の値が返ります。

 

Spartan のコンソールで 

CSS.supports("display", "flex"); と叩くと true が返ります

CSS.supports("display", "-moz-flex"); と叩く使用できない値なので false が返ります。

 

使いどころは難しいのですが、CSS の特定のプロパティがブラウザで使えない場合、代替案として他のプロパティを使用して近しい表現ができるのではないかと思われます。