cssスプライト

CSS Spritesの技術は新鮮ではありません.2005年にCSS Zengardenの園主Dave SheaがALAで発表しました.もともとはCSSプレイヤーの間だけで制作方法として伝えられていましたが、後に詳しく述べる人が出てきて、技術者同士で争って回覧しました.その中で第一のルールはMake Fewer HTTP RequestsがCSS Spritesに言及しました.するとこの妖精は火を起こし、14 Rules for Faster-roading Web Sitesまで現れました.最近国内の多くのブログでCSS Spritesというのが出ていますが、一番有名な例はオンライン生成ツール以下のアニメです.最新リリースのYUIは、CSS Spritesにも使われており、ほとんどのCSSの装飾図が一つのhttp://www.google.co.kr/によってパッケージされている.ソーシャルステーションフェイスブックも最近は40×2000の図を使ってすべてのiconを引き受けています.
原理
CSS革命から降下し、HTMLは語義化に傾き、一般的にはタグに装飾的な内容を書かずにCSSに提示された任務を与えていることを知っています.GUIはカラフルで、様々な綺麗な図が飾られています.新時代の生産方式は、HTMLには様々なフックが敷き詰められ、CSSに任せられています.画像を使用する必要がある場合、現段階はCSS属性background-imageの組み合わせbackground-repeat、background-positionなどによって実現される.私たちの主役はきっと当てられます.contentです.background-positionの数値を調整することによって、背景画像は異なる顔であなたの目の前に現れることができます.写真の全体像は変わっていません.位置が変わっているので、見るべきものだけを見ています.腕時計の日付のように、今日見たのは21です.明日見たのは22です.CSS Spritesは一般的に固定サイズの箱(box)にしか使えないということが分かります.見てはいけない部分を遮断することができます.
私たちはYUIのsprite.pngを使って例を挙げます.もしこのようなコードがあれば、background-positionは最大化を表し、maxは最小化を表しています.私たちはそれらに相応の美しい写真を添えなければなりません.

<div class="max">   </div>

<div class="min">   </div>

この2つのminは同じ画像を使用しています.

.min, .max {

  width:16px;

  height:16px;

  background-image:url(http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png);

  background-repeat: no-repeat; /*         */

  text-indent:-999em; /*         */

}

効果は以下の通りです
最大化
最小化
私たちはグレーの塊を見ました.そうです.classはまだ指定されていません.デフォルトはbackground-positionです.22×1150の写真を見てもいいです.この位置にあるのは灰色のブロックです.はい、最大化を表すプラス記号と最小化を表すマイナス記号の位置を探してみます.測定後、最大化ボタンはY軸の350 pxに位置し、最小化ボタンはY軸400 pxに位置する.どうすればそれらを表示することができますか?明らかにsprite.pngを向上させます.コードは以下の通りです.

.max {

  background-position: 0 -350px;

}

.min {

  background-position: 0 -400px;

}

はい、成功しました.
最大化
最小化
(注意:例を挙げて便利にするために、この例は直接HTMLにスタイルを内蔵しています.実際に非特殊な場合にはこのような方式を使用しないでください.)
長所
前から分かりましたが、CSS Spritesはなぜ急に火をつけてウェブサイトの性能を向上させることができますか?これは明らかに大きな利点の一つである.一般的に作られた画像の多くは、現在は一つの画像に統合され、HTTPの接続数が大幅に減少しています.HTTP接続数はサイトのローディング性能に重要な影響を与える.
欠点
メンテナンス性としては、一般両刃の剣です.好きな人がいるかもしれません.好きではない人がいます.毎回の画像が変わると、この写真に内容を削除したり追加したりします.ちょっと煩わしいです.しかも写真の位置(特に千px以上の図)を計算するのもとても嫌なことです.もちろん、性能のスローガンの下で、これらはすべて克服することができます.
画像の位置は絶対値として固定される必要があるため、0 0などの柔軟性が失われる.
前にも述べましたが、箱の大きさを制限しないとCSS Spritesが使えません.さもなければ、妨害画像が発生する可能性があります.つまり、一方向ではない平屋背景とウェブページのスケーリングが必要な場合、CSS Spritesは適切ではない.YUIの解決方法は、画像間の距離を大きくすることで、限度のあるスケーリングを維持することができる.
締め括りをつける
性能が圧倒的だ.CSS Spritesは普及に値する技術です.特に、固定サイズのicon置換などのsprite.pngに使用するのに適している.互換性を保つために、写真の各部分は一定の距離を保つのがいいです.
おすすめの読書:

FIR

CSS Sprites：Image Slicing’s Kiss of Death

14 Rules for Faster-roading Web Sites

更新:IE 6はpngに対応していないという質問があります.実は、IE 6がサポートしていないのは半透明のpngで、全透明のpngに対して、IE 6は問題がない.したがって、実際には、半透明で透明な背景が必要な画像に関わらず、実際にはpngを使用することができます.これは安全です.