Geekly Articles each Day

CSSスプライト2.0

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

技術概要


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


宣言されたプロパティに加えて、さらにいくつか（ background-color ）がありますが、それらはスプライトに平凡です。

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

応用微妙


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



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

  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の実際の構成で取得されています。

CSS Sprites (PNG)

CSS Sprites (JPEG)

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

Source: https://habr.com/ru/post/J56113/

More articles:


All Articles