css-spriteは良いテクニックですか？

Question

1. はcss-spriteの良いテクニックですか？私はhttp://spriteme.org/でその賛否両論を読んで、また、私はここでstackoverflowのCSSスプライトに関する多くの質問を見てきました。

2. どのようなものがありますか？

3. サイト内のすべてのブラウザで動作しますか？

Answer 1

はい、いいテクニックです。

HTTPリクエストの数を減らすことができ、これはページ最適化手法です。

Best Practices for Speeding Websites by Yahoo

の最初のルールは、HTTPを最小化

あるエンドユーザ応答時間の

80％がフロントエンドに 費やされる要求。この 時間のほとんどは、ページ内のすべての コンポーネントのダウンロードに縛られる： 順番に部品点数の削減、画像、 スタイルシート、スクリプト、フラッシュ、その他 は、ページをレンダリングするために必要なHTTP リクエストの数を減らします。 これは、より高速なページの鍵です。

CSSスプライト画像 リクエストの数を減少させるための好ましい方法 あります。背景画像 を1つの画像に結合し、 CSS背景画像と 背景位置プロパティを使用して、 に目的の画像セグメントを表示します。

ページ内の コンポーネントの数を減らす1つの方法は、ページのデザインを 簡略化することです。しかし、 より豊富なコンテンツを持つページを構築する方法がある また、高速応答を達成しながら 回ですか？リッチページ のデザインをサポートしながら、 のHTTPリクエスト数を減らすためのいくつかのテクニックがあります。

スプライト内の画像のサイズを変更する必要がある場合は、画像のオフセットを再計算する必要があります。しかし、私はこれが大きな負担だとは思わない。

ほとんどの最新のブラウザでサポートされています。これはまた、CSSスプライト右完了

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Answer 2

これは素晴らしいテクニックですが、どのように行うかについては本当に注意深くなければならないので、すべてのブラウザで正しく動作します。

これは実行することができ、最適なヒントですが、いつものように、IE、Firefox、Chromeでどのように動作するか注意してください。

これは常に使用できないため、クロスブラウザのCSSサポートのための最小限の共通点に固執する必要があります。

Answer 3

に良い記事です

、それはすべてのブラウザ（IE6でも）で正常に動作する必要があります。

私が考えることができる最も大きな点は、あるスプライトにあまりにも多くの画像があり、それらのうちの1つのみの寸法を変更する必要がある場合、多くのCSSを変更する必要が生じることです他の画像のオフセットも同様に変更されます）

Answer 4

これはIE 6 Safari Opera 8+とFF2 +で機能しました。 あなたはこれを読む必要があります。それは、GIF（および他の画像ファイル）が圧縮されている方法について説明し

Gif Compression

。 たとえば、「列」ではなく「行」に同じデータを表示すると、領域の使用量が大幅に減ります。

さらに、すべての画像をプリロードし、画像を交換すると遅延はありません。

もう一つのプラスは、 "赤"デザインにスプライトを使用し、 "青"デザインにスプライトを使用できることです。ブラウザのほとんどは、画像のスプライトをキャッシュ

：

は、しかし1つの欠点あります。 スプライトを更新するときに問題が発生する可能性があります。私はに実行した

Answer 5

一つの欠点は、CSSスプライトは、それはあなたのウェブサイトのロード時間のために非常に重要なhttpリクエストの多くを保存しているため、当然のことながら多くのブラウザ

Answer 6

で正しく印刷するにはいないようだということです。

は、このページをチェックしてください：

http://www.tutorialrepublic.com/css-tutorial/css-sprites.php

をそれは偉大な説明とあなたはCSSスプライトについて知るために必要なすべてを持っています。