CSS スプライト テクノロジー 2005 年には、CSS Zengarden のオーナーである Dave Shea が、このテクノロジーの詳細な説明を ALA で公開しました。
当初、これは制作方法として CSS プレーヤーの間でのみ配布されていましたが、その後、Web サイトの読み込みを高速化するための 14 のルールが発表され、最初のルールである「HTTP リクエストを少なくする」では CSS スプライトについて言及されました。それで、この小さなゴブリンは人気を博し、オンライン生成ツールさえ登場し、それは止められませんでした。最近、多くの国内ブログで CSS スプライトについて言及されている例としては、google.co.kr の以下のアニメーションが挙げられます。 YUI の最新リリースでは、CSS スプライトも使用され、ほぼすべての CSS 装飾画像が 40×2000 の画像でカバーされます。大手ソーシャル ネットワーキング サイトである Facebook は最近、すべてのアイコンを覆うために 22×1150 の画像を使用しました。突然、CSS スプライトがあらゆる場所に登場しました。
CSS スプライトの仕組み
CSS 革命以来、HTML はセマンティックになる傾向があり、装飾的なコンテンツはタグに記述されなくなり、レンダリング タスクが CSS に引き継がれるようになりました。 GUIはカラフルで、さまざまな美しい絵で装飾には欠かせません。 HTMLに様々なフックを埋め込んでCSSに任せるのが新しい時代の制作方法です。
画像を使用する必要がある場合、これは現在、CSS 属性の background-image と、background-repeat、background-position などを組み合わせることによって実現されます。 (余談: なぜ現在の段階を撤回するのかというと、ブラウザが将来コンテンツをサポートする場合だからです。 、追加の実装方法）。ご想像のとおり、私たちの主人公は背景の位置にあります。背景位置の値を調整することにより、背景画像がさまざまな外観で目の前に表示されます。実際、写真の位置が変わっただけで、写真の全体的な外観は変わりません。見るべきものだけが表示されます。時計の日付のようなもので、位置が 1 つ上がっているため、今日は 21、明日は 22 と表示されます。 CSS スプライトは通常、固定サイズのボックス (ボックス) 内でのみ使用できるため、表示されてはいけない部分がブロックされることはご存知かと思います。
例として YUI の sprite.png を使用してみましょう。このようなコードがある場合、max は最大化を表し、min は最小化を表します (Web サイトが魅力的になるように)。
<div class="max">最大化</div> <div class="min">最小化</div> |
どちらのクラスも同じイメージを使用します。
.min、.max { 幅:16ピクセル; 高さ:16ピクセル; 背景画像:url(スプライト.png); background-repeat: no-repeat; /*並べて表示したくない*/ text-indent:-999em; /*テキストを非表示にする方法*/ } |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <本文> |
はい、背景の位置を指定していないため、灰色の雲が表示されます。デフォルトは 0 0 です。sprite.png を参照してください。この位置は灰色のブロックです。さて、最大化を表すプラス記号と最小化を表すマイナス記号の位置を見つける必要があります。測定後、最大化ボタンは Y 軸の 350px に位置し、最小化ボタンは Y 軸の 400px に位置します。それらを表示させる方法を考えてみましょう。当然、sprite.png をアップグレードする必要があります。コードは次のとおりです。
.max {背景位置: 0 -350px;} .min {背景位置: 0 -400px;} |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <本文> |
今度は成功しました！
CSS スプライトの利点
CSS スプライトが突然機能しなくなった理由は、Web サイトのパフォーマンスを向上させる能力に関係していることを以前に学びました。明らかに、これは大きな利点の 1 つです。通常の制作方法では多数の画像が 1 つの画像に結合されるため、HTTP 接続の数が大幅に削減されます。 HTTP 接続の数は、Web サイトの読み込みパフォーマンスに重要な影響を与えます。
CSSスプライトのデメリット
メンテナンス性に関しては、これは一般に諸刃の剣です。画像を変更するたびに、画像を削除したり画像にコンテンツを追加したりする必要があり、少し面倒に思えるため、これが好きな人も嫌いな人もいるでしょう。また、写真 (特に数千ピクセルの写真) の位置を計算することも非常に不快です。もちろん、パフォーマンスのスローガンの下では、これらはすべて克服できます。
画像の位置を絶対値に固定する必要があるため、中心などの自由度が失われます。
前に述べたように、CSS スプライトを使用するには、ボックスのサイズを制限する必要があります。制限しないと、画像に干渉する可能性があります。つまり、CSS スプライトは、非一方向のタイル背景や Web ページのスケーリングが必要な場合には適していません。 YUI の解決策は、限られたスケーリングを維持できるように画像間の距離を増やすことです。
CSSスプライトの概要
パフォーマンスは何よりも優先されます。 CSS スプライトは推進する価値のあるテクノロジーです。固定サイズのアイコンの置換など、FIR に特に適しています。互換性を維持するには、画像の一部をある程度の距離を置くことをお勧めします。