web-dev-qa-db-ja.com

background-size:coverとbackground-size:100%autoの間にパフォーマンスの違いはありますか?

background-size: coverbackground-size: 100% autoの違いを知っています。 2つの間にパフォーマンスの違いがあり、どちらが好まれるのか興味がありますか?

2
Kyle Horkley

流動的なコンテンツを保証するので、%に移行するのは常に良いことです。 Googleとユーザーの両方にとって、サイトのモバイルバージョンが優れていると便利です。

パフォーマンスに違いがあるとは思いませんし、少なくとも見分けられる違いはないと思います。両方のプロパティを設定し、両方のツールを使用してページ速度をテストすることでテストできますが、違いはないと確信しています。

私の意見では、ブラウザーがレンダリングを行い、さまざまな解像度で流動的にするのが簡単なので、%はカバーよりも優れていると思います。

3
knif3r

Android 4.3ブラウザ以下ではbackground-size: 100%;の使用がサポートされていないため、2つの間にパフォーマンスの違いがあります。また、background-sizeパーセント値は、SafariのSVG画像では適切にサポートされていません。

また、iOS Safariはbackground-size: coverで非常にバグの多い動作をしてきました。この情報はすべて優れたものです 使用できます... Webサイト-グラフの下の「既知の問題」タブをご覧ください。

上記のほとんどの回避策として、 jQuery Backstretchプラグイン を使用できます。 CSSよりも低速ですが、最終的な結果は満足のいくものになる可能性があります。

抽象的なパターン、画像、または特にグラデーションを使用する場合は、ランダムなバグを無視できます。これは、背景が適切に拡大縮小された場合に訪問者が気付く可能性がはるかに低いためです。

2
Tom Brossman