CSSスプライト2.0

CSSスプライトの使用 、 無用 、さらには自動化に関する一連の記事を公開した後、現在の状況を何日も分析した後、CSSスプライトとその解決方法を使用する際の最も一般的な問題のいくつかを収集することができました。 また、任意のプロジェクトのCSSスプライトの作成を自動化するためのアプリケーションメソッドについても説明します。

技術概要

実際、CSS Spritesは、CSS1仕様に既にあるbackground



テクノロジーの拡張された使用法です。 進歩的な人類が長年にわたって考え出したのは、要素の複数の背景だけです（CSS Spritesコンセプトとどのように互換性があるかは、まだ検証する必要があります）。 背景画像を設定するために使用する主なプロパティ。

• background-image
  
  
  
  image-メインの「主力馬」。 彼女にとって、未来はdata:URI
  
  
  
  の形であるdata:URI
  
  
  
  、これは最終的にCSSスプライトを打ち負かすでしょう。 しかし、これはすぐには起こりません。
• background-repeat
  
  
  
  背景画像を使用する場合に重要な2番目のコンポーネント。 結局のところ、このプロパティにno-repeat
  
  
  
  を設定すると、CSSスプライトがイメージの「接着」に受け入れられることを意図的に強調します（デフォルトでrepeat
  
  
  
  、 repeat
  
  
  
  使用されます）。
• background-position
  
  
  
  -CSSスプライトの「魔法の杖」。背景画像の特定の部分を非表示または表示できます。

宣言されたプロパティに加えて、さらにいくつか（ background-color



）がありますが、それらはスプライトに平凡です。



そのため、画像のソース、繰り返しのルール、および初期位置を設定できます。 十分だと思われますか？

応用微妙

当然、背景画像を使用する際に考えられる一連の効果を考慮すると、次の点に注意する価値があります。

• 背景画像で完全に満たされたオブジェクト。 ここで、主な役割はオブジェクトの最終的な寸法によって果たされます（もちろん、画像がすべての軸に沿って一度に繰り返されない場合：この場合、CSSスプライトに使用することはできません）。 多くの場合、オブジェクトの下の背景は、いくつかの条件（意図的なアクセントまたはユーザーのアクション）に応じて変化する場合がありますが、CSSスプライトを作成するロジックにとってこれは必須ではありません。 ここでは、繰り返しのない背景に対応し、X軸またはY軸に沿って繰り返す3つのサブケースを区別できます。
• 背景画像は、提供された量全体を埋めません （オブジェクトのサイズが指定されていないか、相対-em、％-単位で指定されています）。 ここで、背景画像なしで残されたオブジェクトのその部分に欠陥が現れないように、スプライトの「最後」に繰り返し画像を添付する必要があります。 または（ no-repeat
  
  
  
  場合）「はしご」で画像を配置します（これはリスト項目の背景の場合に特に当てはまります）。 ここで、 background-position
  
  
  
  CSSスプライトの値によっては、原則として可能と不可能の両方が可能になることに注意してください（たとえば、 100% 100%
  
  
  
  場合）。 ここで、 background-position
  
  
  
  、 background-repeat
  
  
  
  およびlinearブロックサイズが異なるいくつかのケースを区別できます。
• 画像はアニメーション化されます。 以下の説明ではCSSスプライトでのPNGおよびJPEG画像の使用に焦点を当てているため、アニメーション画像はすぐに破棄する必要があります。アニメーションPNG画像のサポートは、ブラウザで最も初期のレベルになりました。

説明したすべての例は、次のグループにさらに明確に構造化できます。

1. background-repeat: no-repeat
   
   
   
   、 background-position:
   
   
   
   、および線形絶対サイズが指定されています。
2. background-repeat: no-repeat
   
   
   
   、 background-position:
   
   
   
   、指定されていない、または相対単位で指定された長さ寸法。
3. background-repeat: repeat-x
   
   
   
   、要素の高さを設定します。
4. background-repeat: repeat-x
   
   
   
   、要素の高さは指定されていません。
5. background-repeat: repeat-y
   
   
   
   、要素の幅が設定されます。
6. background-repeat: repeat-y
   
   
   
   、要素の幅は設定されていません。
7. background-repeat: no-repeat
   
   
   
   、 background-position: 100% 0
   
   
   
   、要素の高さが設定されます。
8. background-repeat: no-repeat
   
   
   
   、 background-position: 0 100%
   
   
   
   、要素の幅が設定されます。
9. background-repeat: no-repeat
   
   
   
   、 background-position: 100% 0
   
   
   
   、要素の高さは設定されていません。
10. background-repeat: no-repeat
    
    
    
    、 background-position: 0 100%
    
    
    
    、要素の幅は設定されていません。
11. background-repeat: repeat
    
    
    
    ます。
12. background-repeat: repeat-x
    
    
    
    またはbackground-repeat: repeat-y
    
    
    
    、要素サイズは相対単位で指定されます。
13. background-repeat: no-repeat
    
    
    
    、 background-position:
    
    
    
    。
14. 画像はアニメーションGIFファイルです。

この仕様を見ると、一般に、CSSスプライトの作成を自動化するためにどの方向に移動するかが明確になります。

実用的なソリューション

次に、 Web Optimizerの開発の基礎となったAuto Spritesツールについて説明します。 上記の結論の後、純粋に技術的な疑問が残りました。これをすべてエンコードする方法です。



最初に、CSSルールのツリー全体を解析し、それらから背景画像とオブジェクトの線形サイズに関連するものを選択してから、それらに対して必要なアクションを実行する必要があります。 CSS Tidyは 、このタスクに最適です。このタスクは、2、3の小さなバグの後で素晴らしいテスト、テスト、改善が行われました。



次に、楽しみが始まります。上記のグループをどのように「接着」しますか？ これを行うには、次のアルゴリズムを使用します。

1. repeat-x
   
   
   
   画像（グループ3）は垂直方向に結合されます。 途中で、背景画像の幅が修正されます（共通分母に縮小されます）。 そのようなファイルの最初に、幅に適したno-repeat
   
   
   
   画像が追加されます（グループ1）。 次に、それらのほとんどに、グループ4から1つのイメージが書き込まれます（1つ以上はまだどこにも行かないでしょう）。
2. まったく同じアクションがrepeat-y
   
   
   
   れます。
3. さらに、グループ7の画像は垂直方向に結合されます（ 0 100%
   
   
   
   は、背景が要素の右端にそれぞれ押し付けられることを意味し、スプライト全体が右端に押し付けられます）。
4. グループ8でも同様に、すべてを一番下まで押します。 当然、すべてのグループについて、初期background-position
   
   
   
   を考慮します。
5. グループ1の画像の位置を計算します（このため、領域でソートされた画像を単純にソートするのが適切です。次の画像が機能しない場合、次の画像に「適合」しようとするマトリックスを準備し、マトリックスを増やします）。
6. 2番目のグループのイメージから「はしご」を作成します。 前の段落で既に作成されたスプライトの下部に梯子を構築する方が適切です。「ラダー」を上に（そして、おそらく左に）移動するために、2つの画像グループ間の「穴」の最小サイズを簡単に見つけることができます。 もちろん、最適な場所を見つけるのは簡単なことではありません。 しかし、上記のかなり粗い近似で解決することもできます。
7. ポイント3からの画像は、複雑な画像の右上隅に添付されます（ステップ5および6の結果）。 このような各画像には許容される高さがあり、それらはすべて、残りno-repeat
   
   
   
   ない画像の「作業」ゾーンの外側にあるため、基本的な要素は発生しません。
8. ポイント4の画像についても同じことを行います。スプライトの左下隅に配置します。
9. 出力では、考えられるすべてのケースで3つのスプライトを取得します。 平均して、このようなスプライトのサイズは、（PNGを使用した場合も含めて）同様の「手動」アナログをわずかに（わずかでも）超えます。 当然、自動モードではpngcrush
   
   
   
   またはjpegtran
   
   
   
   自動的にスキップできます。 フルカラー画像がどの形式で作成されるかを検討する価値もあります。JPEGまたはPNG（後者はサイズは大きくなりますが、品質の損失はありません）。

説明されているすべての手順は既にWebオプティマイザー （クライアント最適化を自動化するためのWebアプリケーション）に適用されており、アルゴリズムの最終バージョンの1つはAuto Spritesツールで機能し、ソーステキストはSVNにあります。



このロジックは、Web開発のどの段階でも（デザインの初期作成時とリリース後のサイト最適化の両方で）適用できます。 スプライトの自動作成用のライブラリはMITライセンスの下で配布されています（ CodeCampによって正しく指摘されたように、どこでも、 とにかく製品を使用できますが、ライブラリ全体が使用されていなくても、その重要な部分のみがソースにリンクされている必要があります）。

ライブ例

すべての写真は、有名なCMSの実際の構成で取得されています。











Web Optimizerに関するPS NewsがTwitterに公開されます。