のみCSSを使用したCSSのみ

Question

ショート質問

をCSSプロパティのサポートを検出し、どのように私はbackground-sizeプロパティがサポートされていることを検出していますか？それがサポートされていない場合、いくつかの代替CSSを提供したいと思います。私はすでにJavascriptでこれを行う方法を知っていますが、CSSではより洗練されています。

ロング質問

私は関係なく、その正確な画素密度の、すべての携帯電話上で見栄えのする必要があり、高解像度のスプライト画像を持っています。 background-size trickを使用することで、スプライトを適切にスケールすることができます。

.sprite { 
    background-image: url(sprite180x76.png); 
    /* 180/2 = 90 */ 
    background-size: 90px auto; 
} 

一部のiOSとスプライトはそれがあるべきとして2倍の大き見えるようdon't support the background-size property、Androidのバージョンがあります。これらの古いシステムでは、私は、背景なしのスケーリングと低解像度のスプライトをロードしたいと思います：それはJavascriptなどのプログラミング言語ではありませんよう

/* fake CSS */ 
@notSupported(background-size) 
    .sprite { 
     background-image: url(sprite90x38.png); 
    } 
} 

Answer 1

CSSは、条件文を持っていません。 CSSの作業には何らかの条件文が存在する可能性があります。

CSSの条件付きテストケースを得るには、JavaScriptを使用する必要があります。

意味は、CSSのサポートを直接検出することはできません。

しかし、CSSは「カスケード」という性質のおかげで「トリック」がありますが、古いコードを同じスタイルの新しいコードに置き換える場合にのみ使用できます。変に聞こえる

が、ここでは例のカップルです：公式のCSSをサポートしてブラウザで

-moz-border-radius: 6px; 
-o-border-radius: 6px; 
-webkit-border-radius: 6px; 
-ms-border-radius: 6px; 
border-radius: 6px; 

、それは一方で古いバージョンのライン5に示すようなスタイルは、Firefox、ライン1と言うだろうそれらが不明であるため、2-5行目が無視されます。

別の（そしておそらくよりよい）の例は次のようになります。

background-color: #AAA; 
background-color: rgba(0, 0, 0, 0.5); 

新しいブラウザが古い色をオーバーライド、それを50％の透明度を有する黒色を与えるながら、このコードは、背景にグレー色を与えます。

ほんの少し役に立ちます。

乾杯！

- 更新 -

私はちょうど助けるかもしれない何かに遭遇しました。 Aaron Gustafsonの本「Adaptive Web Design」では、与えられたブラウザ/レンダラが指定されたセレクタをサポートしていない場合、CSSがどのようにルール全体を無視するかを述べています。古いバージョンで実装いますが、このような何かを行うことができ、新しいバージョンで提供されていなかったセレクタを見つけることができる場合は、上記の考え方に

は、：

/* fake CSS */ 
.sprite { 
    background-image: url(sprite90x38.png); 
} 

[[ selector that is supported by newer browser/OS ]], 
.sprite { 
    background-image: url(sprite180x76.png); 
    /* 180/2 = 90 */ 
    background-size: 90px auto; 
} 

アイデアがためということです古いブラウザでは古いPNGを読み込むことができますが、新しいブラウザではより大きなPNGを読み込んで背景サイズを適用します。

私が心配する唯一のことは、サポートブラウザが両方の画像をロードして適用する場合です。

これは依然として、あるバージョンの別のバージョンでサポートされていないセレクタを見つける必要があります。 UPDATE 2 - -

http://www.quirksmode.org/css/contents.html

私はコメントでこれを置くが、それは役立つかもしれないように私はそれをここに追加します：Quicksmode.comは、あなたがものを見つけるのに役立つかもしれません。私はブラウザのバージョンがiOS 3.1.3でサポートされているかどうかを調べるためにしばらく時間を費やしました。そのため、上記のトリックでどのセレクタを使用することが可能でしょうか。どのような私が見つけたことは、このアップルの開発者サイトだった

：http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html

あなたは、バックグラウンド・サイズのためのページ検索（CTR + F）を行う場合、それはiOSの1+と呼ばれる独自のバージョンサポートされていることを示しています。

-webkit-background-size: length 
-webkit-background-size: length_x length_y 

を

可能な解決策である可能性があります。実際のものの前にそれを追加すると、後方互換性を保証することができます。

-webkit-background-size: length 
background-size: length 

ルールがサポートされているかどうかを確認するために、条件付きテストを行うための元の質問は今のCSSにはできないため、代替ソリューションを見つけることができますうまくいけば。

Answer 2

あなたは（今のところ）プロパティAのサポートを検出し、このサポートを与えられたかどうか、だけでCSSを持つプロパティをBに異なる値を果たす...

ことができない...のためのブラウザのサポートの場合を除き、プロパティAとBは全く同じです！次に指示：

selector { 
    propertyA: valueA; 
    propertyB: valueB; 
} 

両方が失敗するか、両方が成功します。それはIE6/7/8（ない）作業がCSS Background Properties support in Standardistaけどに従って必要があります。

残りの問題はbackground-size :)
私はおよそmulti-background考えていたよりも正確に同じサポートしているCSSプロパティを見つけることですiOSとAndroidでテストすることはできません.bada/Dolfin 2.0（Samsung Wave、Webkitにも基づいています）でのみテストできます。

ここでフィドルです：http://jsfiddle.net/PhilippeVay/2VaWu/ 任意のブラウザで表示する必要があることだけで、簡単な背景を持つ段落とシンプルな背景と（*）のみ、現代のブラウザが表示されるはずですbackground-sizeでリサイズマルチ背景の両方に、別の段落を示し（古いブラウザでは、最初の段落と同じ背景が表示されます）。 Fx9とdolfin 2.0の両方が正しく第2段落を表示します。 IE8は期待通りにはありません。

もう1つの解決策は、background-sizeを理解しているが他の人には理解されていないブラウザのバージョンで理解されているセレクタを使用することです。 Webkitをベースにしたスマートフォンよりも、IEの方が見つけやすいですが！

（*）デモの目的で、より高い特異性を持つ異なるCSSルールを使用しています。現実の世界では、複数の背景の前に単純な背景が定義されたルールが1つしかありません。