CSSスプライトの自動生成

起こった。 長く眠れない夜は無駄ではありませんでしたが、 Vedim aka pepelsbey述べていた考え方は、多かれ少なかれ身体的な形を取りました。



sprites.webo.in (raw-rawアルファ版)-名前は、実際、それ自体を物語っています。 CSSファイルのURLを入力します-出力で、最小化された(セレクターの並べ替えなし、基本的な最小化のみ)CSSファイルと一連の新しいスプライトを含むアーカイブを取得します。 素晴らしいですか?



CSSスプライト生成アルゴリズムは、すでに一般的な用語で概説されています。 途中で、 no-repeat



写真の配置を明確にする必要がありました。一部は「はしご」(ブロックサイズが設定されていない)で配置する必要があり、一部は必要に応じて押し込むことができます(寸法が正確に定義されている場合)。



vkontakte.ruの場合、すぐにそのようなサンプルを入手しまし



バージョンは未加工で、一部のケースは処理されず、一部は正しく処理されません。 したがって、ある種の「ごみ」が発生した場合、可能な限り多くのケースを聞きたいと思います。 スプライトが作成されない場合がある場合は、すぐに予約してください。 まず、スプライトが既に背景として使用されている場合(「はしご」の場合、そのような画像を解析することはできないため)。 第二に、対応するグループで結合できる画像の総数が1のみの場合。第三に、画像がアニメーションの場合。 第4に、要素の正しいrepeat



を確立できず、サイズが設定されていない場合(その後、画像は未知のボリュームですべての方向に繰り返されます-そして、それは他のものと組み合わせることができません)。



もちろん、最も興味深いのは、「任意の」スプライトに画像を配置する問題を解決する方法です。しかし、次回はさらに詳しくなります(アルゴリズムが少し改良されると、最新バージョンがリポジトリで常に利用可能になります )。



そして最後に、スタンドアロンバージョンは、Webオプティマイザー(Webオプティマイザー)に非常に近い将来に含まれます。これは、クライアント最適化の自動化を目的としたアプリケーションです。 code.google.com/p/web-optimizator/からいつでもダウンロードできます。



一般的に、コメント、観察、テストケース、手で助けたいという願望-これは大歓迎です-sprites.webo.in



PS先週、数人の招待者が結成されました。善良な人々を支援する必要がある場合は、プライベートで書いてください



All Articles