css-sprite は良いテクニックですか? 私はhttp://spriteme.org/でその長所について読みました。また、ここのスタックオーバーフローで css スプライトに関する多くの質問を見てきました。
その短所は何ですか？
サイトで主張されているように、すべてのブラウザで動作しますか?
3046 次
6 に答える
19
はい、いいテクニックです。
HTTP リクエストの数を減らすことができる、ページ最適化手法です。
での最初のルール
Yahoo による Web サイトの高速化のベスト プラクティス
は
HTTP リクエストを最小限に抑える
エンド ユーザーの応答時間の 80% がフロントエンドで費やされます。この時間のほとんどは、ページ内のすべてのコンポーネント (画像、スタイルシート、スクリプト、Flash など) のダウンロードに費やされます。コンポーネントの数を減らすと、ページのレンダリングに必要な HTTP リクエストの数が減ります。これは、ページを高速化するための鍵です。
CSS スプライトは、画像リクエストの数を減らすための推奨される方法です。背景画像を 1 つの画像に結合し、CSS の background-image プロパティと background-position プロパティを使用して目的の画像セグメントを表示します。
ページ内のコンポーネントの数を減らす 1 つの方法は、ページのデザインを単純化することです。しかし、より豊富なコンテンツを含むページを作成しながら、応答時間を短縮する方法はありますか? ここでは、リッチ ページ デザインをサポートしながら、HTTP リクエストの数を減らすためのテクニックをいくつか紹介します。
スプライト内の画像の寸法を変更する必要がある場合は、画像のオフセットを再計算する必要があります。しかし、これは大きな負担ではないと思います。
ほぼすべての最新ブラウザでサポートされています。
これも CSS スプライトに関する良い記事です。
于 2009-09-25T13:41:03.657 に答える
4
IE 6 Safari Opera 8+ および FF2+ で機能しました。あなたはこれを読むべきです：
GIF (およびその他の画像ファイル) がどのように圧縮されるかについて説明します。たとえば、同じデータを「列」ではなく「行」で表示すると、スペースの使用量が大幅に削減されます。
さらに、すべての画像をプリロードし、画像を交換しても遅延はありません。
もう 1 つの利点は、「赤」のデザインに 1 つのスプライトを使用し、「青」のデザインに別のスプライトを使用できることです。
ただし、欠点が 1 つあります。
ほとんどのブラウザーは画像スプライトをキャッシュします。そのため、スプライトの更新に関して問題が発生する可能性があります。
于 2009-09-25T13:41:45.820 に答える
2
これは素晴らしいテクニックですが、すべてのブラウザーで正しく動作するように、その方法には細心の注意を払う必要があります。
それは実行可能であり、最適化の優れたヒントですが、いつものように、実行中は IE、Firefox、および Chrome でどのように動作するかに注意してください。
短所は、常に使用できるとは限らず、クロスブラウザーの CSS サポートの最小公分母に固執する必要があることです。
于 2009-09-25T13:39:26.523 に答える
2
正しく実行すると、すべてのブラウザー (IE6 を含む) で正常に動作するはずです。
私が考えることができる最大の短所は、1 つのスプライトにあまりにも多くの画像があり、そのうちの 1 つだけの寸法を変更する必要がある場合、多くの CSS を変更する必要があることです (他の画像のオフセットがあるため)。多分また変わる）
于 2009-09-25T13:41:43.993 に答える
2
私が遭遇した欠点の 1 つは、CSS スプライトが多くのブラウザーで適切に印刷されないように見えることです。
于 2009-09-25T14:28:33.273 に答える