2016-05-08 11 views
1

CSSには、ブラウザが別のスタイルを実装するかどうかに基づいて条件を条件として適用できるようなクエリが@mediaありますか?CSSは条件付きでプロパティの可用性に基づいてスタイルを適用します。

あなたは条件付きでそれ以外の場合は最初に定義されたフォールバックを使用し、それがブラウザに実装されている場合のみ、第二のスタイルを適用します

background-color: #fff; 
background-color: rgba(255,255,255,0); 

のように別のものを上書きするスタイルを適用することができます。

私は-webkit-background-filterプロパティが利用可能かどうかに基づいてフォールバックと同様のことをしたいと思います。要素に透明度を適用したい場合は、-webkit-backdrop-filterとすることもできます。それ以外の場合は不透明にします。これは純粋なCSSでもJavaScriptでも可能ですか?あなたは

document.body.style.hasOwnProperty(`prop name`) 

標準スタイルのプロパティのようなプロパティ名の変更のテキストを経由して、ほとんどのCSSプロパティをテストすることができます

+2

CSSを通常通り書いてください。http://stackoverflow.com/questions/15552082/css-rules-for-webkit-based-browsers –

+0

@RichardHowell閉じるが、今のSafariは '-webkit -background-filter'とChromeはそうではありません。 IEとFirefoxをカバーするので、これは何もないより優れています。 –

+2

javascriptでは、それはほとんど耳障りなことです:[Modernizr](https://modernizr.com/)を見てください。 – mmgross

答えて

2

、すなわち

css -webkit-バックグラウンドフィルタ< => webkitBackgroundFilter js

スタイルを適用する方法は、エレメントのスタイルを追加/変更するか、CSSルールを追加/変更するかによって異なります。

関連する問題