読者です 読者をやめる 読者になる 読者になる

Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

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

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


ブラウザーでの状況

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

 

使い方

 
こちらで "display: flex" に適応できます。
使える機能でその機能させてもあんまり意味がないですね。
 
 
not () で指定したプロパティが”使えなければ”
という使い方もできます。
 
多分、こちらが多く使われるパターンだと思われます。
 

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

実例

 
filter (-webkit-filter) がサポートされている場合、背景にぼかしを入れます
サポートしていないブラウザの場合は画像が半透明になります
 

f:id:x67x6fx74x6f:20150409232530p:plain

 

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

 

f:id:x67x6fx74x6f:20150409232649p:plain

 
Spartan でこの機能はサポートされていますが、filter がサポートされていないためブラーの処理されません。
( status.modern.ie の Preview Release になりましたが Build 10049 で動作しない )
 

f:id:x67x6fx74x6f:20150409233345p:plain

 
 
分岐に失敗してこの機能をサポートしていない Safari は隠さなきゃいけないものが出てしまっています。
現状は結構考えてつくる必要がありそうです
 

JavaScript で使う 

どうやら JavaScript でも使うことができるようで、
CSS.supports(); で Boolean の値が返ります。
 
Spartan のコンソールで 
CSS.supports("display", "flex"); と叩くと true が返ります
CSS.supports("display", "-moz-flex"); と叩く使用できない値なので false が返ります。
 

f:id:x67x6fx74x6f:20150409233546p:plain

 

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

スポンサーリンク