サイトを作成しているとWEBブラウザーによって、付与したcssが異なることってよくあることです。

例えばfilterは、IEではうまく表示されないけれど、chromeやsafariでは問題なく表示されます。そのためIEには、別個で違うスタイルシートを当ててあげなればなりません。

これが思っている以上に手間なので、今回は＠supportを使って対応しているプロパティ毎にスタイルを変更していきます。

 

@supportsに対応しているブラウザーと書き方

対応しているブラウザーは、IE以外のモダンブラウザーです。
Edge、Firefox、chrome、Opera、IOS safari、Opera mini、android Browserには対応しています。
※Can I use…による

そのため基本的にIE用にCSSを記述して、そのほかに関しては＠support対応の異なるブラウザーごとに対応していくといいかもしれませんね。

今私の中では大活躍してくれているFlexbox、これが対応しているブラウザーにはFlexboxを適応させます。

 @supports (display: flex) { 
.box { display: flex; } 
} 

 

ちなみに＠supportは、”not, and, or”も使用できます。

使い方としては以下の通りです。

●not (プロパティー:値)
それに対応していないブラウザーに向けてスタイルを指定できます。

@supports not (display: flex) {
 .box { overflow: hidden; } 
 .box item { float: left; }
 } 

 

●and(プロパティー:値)とor(プロパティー:値)
andは指定している複数のスタイルに対して、どっちにも対応している場合にのみCSSを適応させたい場合に使用します。

@supports (transform: rotate(-15deg)) and (animation: fadeIn 2s infinite) { 
/*ここにスタイルシート*/
 }
 

 

orの場合は、そのままどちらかに対応している場合のみ指定できます。

@supports (display: flex) or (display: -webkit-flex) { 
/*ここにスタイルシート*/
 }
 

 

注意点としてはandとorそれぞれ使用するときに前後にスペースが必要なこと。

これがないと、反映されないので気を付けて下さいね！

グラデーションを使用したテキストなどは、今回ご紹介した＠supportを使用するといいですね！

サンプルでグラデーションのテキストを載せておきます！
参考にどうぞ～

See the Pen ＠support01 by sayuri (@giraffeweb) on CodePen.0

 

あんまりスマートな書き方じゃないと思う方もいるかもしれませんが、Javascriptに頼らなくて良いところは、使用すべき利点だと思います。

ぜひみなさんも使ってみてください。

• web