古いブラウザで 'background-size'プロパティをサポートしていますか？

Question

CSS3のBackground-Sizeプロパティを使用してModernizrのようなものを使用して、古いブラウザでサポートされていることを確認する方法はありますか（特に 'background-size：cover'オプションを使用しますか？

ModernizrのWebサイトから引用されているcssFxを見ましたが、IE8などのブラウザで背景サイズのプロパティをサポートするのではなく、プロパティを使用する必要があるブラウザのベンダープレフィックスを追加するように見えます。

CSS3Pieも見ていますが、現在はbackground-sizeプロパティをサポートしていないようです。

[2011年11月10日 - 古いブラウザでは、私はIE7/8の主に考えていますが、理想的に私はFF3.6をカバーしたい、など]

Answer 1

私はあなたがおそらくmodernizrを使用したいと思いますそのプロパティが現在のブラウザでサポートされているかどうかをチェックします。そうでない場合は、background-sizeプロパティを必要とせずに見える、サイト/アプリケーションの代替ディスプレイを見つけようとしてください。

もちろん、このプロパティが含まれていない別のアプローチ（サイズを変更することができる）と、このdivと重なっているコンテンツのような別のアプローチを試すこともできます。がんばろう。

Answer 2

あなたは正しく、多くの古いブラウザではbackground-sizeがサポートされていません。

これの典型的な解決策は、追加の<div>、または<img>要素をバックグラウンドにしたいと思う要素を使ってシミュレーションすることです。

これは単に追加のマークアップを使用することによって実現できますが、この解決策はbackground-sizeプロパティではなく、すべてのブラウザで使用するという意味での欠点があります。言い換えれば、古いブラウザのために意図的にコードを劣化させることを意味しますが、これは理想的ではありません。

CSSプロパティをサポートするブラウザにCSSプロパティを使用する場合は、Javascriptを使用して上記のマークアップを生成できます（必要な場合のみ）。つまり、最新のブラウザではbackground-sizeを喜んで使用でき、古いブラウザのみがフォールバックを使用します。

ウェブ上で利用可能ないくつかのJavascriptソリューションがありますが、その中でも、ブラウザに基づいてどのようにトリガーするかを知る必要があります（詳しくはhttp://css-tricks.com/766-how-to-resizeable-background-image/を参照してください）。

これはModernizrが来る場所です。あなたがModernizrについて与えた説明は完全に正確ではありません。それは、すべてのブラウザ機能を表すJavascriptのHTMLマークアップと一致する変数に一連のCSSクラスを生成します。現在のブラウザがサポートしているかどうかを示すブール値のフラグです。

モダニザでは、ブラウザがbackground-sizeをサポートしているかどうかをJavascriptでチェックし、サポートしていない場合にのみ代替のjavascript関数を実行することができます。

if(!Modernizr.backgroundsize) { 
    //do stuff here to simulate the background-size property for older browsers. 
} 

希望に応じます。

Answer 3

まず、Firefox 3.6の簡単な修正があります。メディアクエリを使用している場合

-moz-background-size 

ソリューションに関して：ベンダー接頭辞がありますあなたは、ユーザーが古いブラウザを表示しているときのために別の画像をターゲットにModernizrを使用することができ、これが別のブラウザ要求を意味します。しかし、おそらく、画面サイズが小さくなるクエリごとに小さな画像を読み込むことになります。 Modernizrは、新しいブラウザではこれらの要求が無視される状況を作り出すため、新しいブラウザを使用している大多数の人々のサーバー要求を削減します。

私は上記の解決策を試してみましたが、うまくいきました。私は次のようなModernizrクラスを適用しました：バックグラウンドではないサイズのために、つまり新しいイメージにロードされた場合は.no-backgroundsizeです。 他のすべてのブラウザについては、クラス.backgroundsizeを追加し、FFの先頭にプレフィックスの言葉を含めました。これは、.no-backgroundの新しいイメージを持つ各メディアクエリに対して繰り返すことができます。これは問題を解決する1つの方法です。

私は12/15/12を試した後、この投稿を編集しました。

Answer 4

あなたはで背景サイズとそのプロパティのサポートを見ることができます：IE7/8のサポート、caniuse.comリストでは

background-size: cover; 
-moz-background-size: cover; 

：このCSSは、IE9 +、Firefoxの3.6以降、Safariの、Chromeをサポートしていhttp://www.standardista.com/css3/css3-background-properties

このポリフィル：https://github.com/louisremi/background-size-polyfill

Answer 5

別のオプションはBackground Size Polyfill次のようになります。

.selector { 
    background-size: cover; 
    /* The url is relative to the document, not to the css file! */ 
    /* Prefer absolute urls to avoid confusion. */ 
    -ms-behavior: url(/backgroundsize.min.htc); 
} 

0より良いサポートする1​​

Answer 6

ベストサンプル：それは新しいFirefoxのバージョンで問題を作ったので、

background-image: url(bg-image.png); 

     -webkit-background-size: 100% 100%;   /* Safari 3.0 - Old Chrome - Old Android */ 
     -moz-background-size: 100% 100%;   /* Gecko 1.9.2 (Firefox 3.6) */ 
      -o-background-size: 100% 100%;   /* Opera 9.5 */ 
       background-size: 100% 100%;   /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */ 

は、これを追加しないでください：

-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) 

出典：mozilla.org