CSS Sprites技術分析

3804 ワード

CSS Spritesの技術は新鮮ではなく、2005年にCSS Zengardenの園主Dave SheaがALAでこの技術の詳細を発表した.もともとCSSプレイヤーの間でしか制作方法として伝わっていなかったが、14 Rules for Faster-Loading Web Sitesが出てきて、技術者の間で競って閲覧し、その中の最初のルールMake Fewer HTTP RequestsはCSS Spritesに言及した.そこでこの妖精は火をつけて、オンライン生成ツールさえ現れて、勢いは止められない.最近、国内の多くのブログでCSS Spritesが取り上げられているが、最も有名な例はhttp://www.google.co.kr/下のいくつかのアニメーション.最新リリースのYUIでもCSS Spritesを使用しており、ほとんどのCSS装飾図が1つ40×2000のパッケージです.ソーシャル・ネットワーク・サービス(SNS)Facebookも最近22×1150の画像はすべてのiconを引き受けた.しばらく、CSS Spritesはどこにもいませんでした.

げんり

CSS革命以降、HTMLは意味化する傾向があり、一般的にはタグに装飾的な内容を書くのではなく、提示されたタスクをCSSに任せることが知られている.GUIはカラフルで、いろいろなきれいな図が欠かせません.新時代の生産方式は、HTMLに様々なフックを敷き詰め、CSSに渡して処理する.画像が必要な場合、現段階ではCSS属性background-imageの組合せbackground-repeat,background-position等により実現される(余談:なぜ現段階では、将来のブラウザがcontentをサポートすればまた別の実現方法が追加されるのか).私たちの主役は、background-positionだと推測したに違いない.background-positionの数値を調整することで、背景画像が異なる姿で目の前に現れます.実は写真全体の顔は変わっていません.画像の位置の変化で、あなたは見るべきものだけを見ました.時計の日付のように、あなたが今日見たのは21で、明日見たのは22で、そのpositionが上に1格跳んだからです.だから、CSS Spritesは一般的に固定サイズの箱(box)にしか使用できないことを知っています.そうすれば、見るべきではない部分を隠すことができます.
YUIのsprite.を使います.pngは例を挙げて、もし私たちがこのようなコードを持っていたら、maxは最大化を代表して、minは最小化を代表して、私たちはそれらに相応のきれいな画像を配合する必要があります(このように私たちのウェブサイトは人を引き付けることができて、お金を売ることができて、フロリダに日光浴することができます:D):

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

.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; /*         */
}

効果は次のとおりです.
最大化
最小化
私たちはまだbackground-positionを指定していないので、デフォルトは0 0で、sprite eを見ることができます.png、この位置にあるのはちょうど灰の塊です.では、最大化を表すプラス記号と最小化を表すマイナス記号の位置を見つけます.測定により、最大化ボタンはY軸の350 pxにあり、最小化ボタンはY軸400 pxにある.どうすれば表示できるか考えてみましょう.明らかにsprite.を向上させなければなりません.png、得られたコードは以下の通りである.

.max {
  background-position: 0 -350px;
}
.min {
  background-position: 0 -400px;
}

ああ、成功しました.
最大化
最小化
(注意:例を挙げるために、この例はHTMLに直接組み込まれているので、実際の非特殊な状況では使用しないでください).

メリット

CSS Spritesがなぜ急に火をつけたのかは、サイトのパフォーマンスを向上させることに関係していることがわかりました.明らかに、これはその大きな利点の一つです.通常の制作方式では大量の画像が1つの画像に統合され、HTTPの接続数が大幅に減少した.HTTP接続数はウェブサイトのロード性能に重要な影響を与える.

欠点

メンテナンス性については、一般的な両刃の剣です.好きな人もいれば、好きではない人もいるかもしれません.毎回の画像の変更はこの画像に削除したり、内容を追加したりしなければならないので、少し煩雑に見えます.また、画像の位置(特にこのような千px以上の図)を計算するのも不快なことです.もちろん、性能のスローガンの下で、これらはすべて克服することができます.
画像の位置を絶対値に固定する必要があるため、centerのような柔軟性が失われる.
前述したように、CSS Spritesを使用するには箱の大きさを制限しなければなりません.そうしないと、画像に干渉する可能性があります.つまり、非一方向のフラットバックグラウンドが必要な場合や、Webページのスケールが必要な場合、CSS Spritesは適切ではありません.YUIの解決策は,画像間の距離を大きくすることで,限られたスケールを保つことができる.

まとめ

性能がすべてを圧倒する.CSS Spritesは普及に値する技術である.特に、固定サイズのicon置換などのFIRに好適である.互換性を保つために、画像の各部分が一定の距離を保つのは良い方法です.

CSS Sprites技術分析

げんり

メリット

欠点

まとめ

おすすめ: