CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法

CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法Webブラウザーによって表示可能なCSSが異なるのは、よく知られていることです。例えばChromeやSafariでは問題なく表示される filter は、Internet Explorerではうまく表示されず、別のスタイルを用意しなければいけません。今回は @supports を使って対応しているプロパティー別にスタイルを変更してみましょう。 @supports とは？指定した (プロパティー:値) の条件に対応しているブラウザーには {} 内に書かれたスタイルを適用するよ、というもの。新しいスタイルの書き方に対応しているブラウザーにはそれを、対応していないブラウザーには従来の書き方で、かつ見栄えの崩れないようにコンテンツを提供できるよう、CSS を記述していけます。「プログレッシブエンハンスメント」というやつですね

[kussun]

IE以外なら使える。

[webarata3]

@supports便利そう

[real1223]

css, 困ったとき, 知識

[glat_design]

最近やっと使ってみた /

[o9ra]

css 条件分岐

[cachico]

@supportsを使ってCSSのみでスタイルの条件分岐をする方法

[masapon49]

便利ですね

[trickcube]

Androidブラウザで横幅が出ないバグの対処なんかにはつかえるかな

[amebloger-x]

これ知らんかったけど、かなり便利そうだなぁ[css][web制作][実装テク][条件分岐]

[alphabet_h]

IEは@supportsをサポートしていません！(；ω；`)

[pokotanu]

cssで条件分岐する方法

[dearwalker_yuya]

CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法｜Webクリエイターボックス @webcreatorboxさんから

[y-kawaz]

@supports のサポートチェックが必要。

[junpeso]

自分は絶対使わないけど、なんかおかしい時にこういうパターンもあることを覚えておこう。

[alice_r]

CSSの@supportsを使ってCSSのみでスタイルの条件分岐をする方法

[redcat_prog]

ほおおおお

[field_combat]

こんなのあったのか。ピンポイントで使う分には便利そう

[masayoshinym]

CSSで条件分岐。

[localdisk]

flexbox便利よね

[n2s]

@supportsはOpera 12(presto)にも対応していた。IE非対応、Edgeなら対応。Safariは9から。

[eichannel]

@supportsを使ってCSSのみでスタイルの条件分岐をする方法 ほほー

[nisaisa]

素晴らしきCSS条件分岐

[mochinaga]

cssで条件分岐