📜 ⬆️ ⬇️

CSS Sprites Autogeneration

It is finished. Long sleepless nights were not in vain, and the thought stated by Vadim aka pepelsbey gained more or less physical shapes.

sprites.webo.in (crude and crude alpha version) - the name, in fact, speaks for itself. Enter the URL of the CSS file - on output we get an archive with minimized (no sorting of selectors, just basic minimization) CSS file and a set of fresh sprites. Great?

The algorithm for generating CSS Sprites has already been described in general terms. Along the way, we had to clarify the positioning for the no-repeat pictures: some of them need to have a “ladder” (in which the block size is not specified), and some can be crammed as necessary (if the dimensions are precisely defined).

For vkontakte.ru immediately got such a sample .
')
The version is raw, some cases are not processed, some are not handled correctly. Accordingly, I want to hear the largest possible number of cases when some “garbage” happens. Immediately make a reservation that sprites are not created in some cases. Firstly, if a sprite is already used as a background (because it is not possible to disassemble such an image in the case of the “ladder”). Secondly, if there are only 1 total images that can be combined in the relevant group. Third, if the image is an animation. Fourthly, if it was not possible to establish the correct repeat for the element and the dimensions are not given (then the image will repeat in all directions in an unknown volume - and it cannot be combined with something else).

The most interesting thing is, of course, how the problem of arranging images in an “arbitrary” sprite is solved - but more on that next time (when the algorithm is slightly refined, the latest version is always available in the repository ).

And finally, the stand-alone version will be enabled very soon in Web Optimizer (Web Optimizer) - an application aimed at automating client optimization. You can always download it at: code.google.com/p/web-optimizator/ .

In general, comments, notes, test cases, the desire to help hands - all this is welcome - sprites.webo.in

PS For the last week a couple of invites have been formed - if you need to help good people, write in private

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


All Articles