Issue 7: export modified CSS
Project Member Reported by stevesou...@gmail.com, Sep 1, 2009
this is a biggie, but I don't see an intuitive solution

Right now, developers can copy the new background-position CSS from Sprite
and paste it back into their code, but this could be made easier:
  - help developers by pointing them to the exact place to make the change
(external stylesheet, embedded STYLE block, or inline style); there might
even be multiple places that have to be changed
  - give them the exact CSS to copy-and-paste (was the original CSS using
background: or background-position:?)
  - generate the CSS for them to replace the entire rule


Sep 15, 2009
#1 pmontra...@gmail.com
Anything beats having to inspect dozens of elements and copy and paste their sizes
and offsets from the output of SpriteMe. A dump of the new CSS rules should be enough
to start with. Developers could use other tools to merge it back into the original
CSS file.
Sep 16, 2009
Project Member #2 stevesou...@gmail.com
But what are the "new CSS rules" and how are they generated?

Let's take rounded corners as an example (as done http://spriteme.org/). There might
be one rule that is used for the upper-left corner:

.btn_top { background: url(images/btn_white_tl.gif) no-repeat top left; }

After SpriteMe, that rule should be changed to:

.btn_top { background: url(images/spriteme1.png) -10px -40px no-repeat top left; }

The technical challenges are:
   1. How does SpriteMe determine that this is the rule to change?
   2. How does SpriteMe generate CSS that matches the original rule?

Thinking about selector matching, cascading rules, etc. makes this difficult.


Sep 17, 2009
#3 realf...@gmail.com
I'm not sure how much of it is FireFox specific, but maybe the FireBug source will 
help dig out the styles that apply to an individual element? The css.js file looks 
promising - https://code.google.com/p/fbug/source/browse/branches/firebug1.5/content/firebug/css.j
s - down around line 1118 there appears to be some goodness for getInheritedRules. 
Every web developer in the world uses FireBug, so even if it was a FireFox specific 
feature it'd still be very very good.

Alternatively, a "big hammer" approach would be to spin through all the rules in all 
the stylesheets (see, BIG hammer) and use some of the stuff from something like 
Sizzle - http://sizzlejs.com/ - to see if the rule matches the element being 
examined. Once you've got "the list" of rules that apply to an element, a quick spin 
through to find the ones that mention background: or background-image would at least 
let you point and grunt at those lines as needing spriting. Then if you wanted to get 
all fancy pants you could weave some regexp magic and sub in the new image and top 
and left. I wouldn't like swing this big hammer anywhere near IE6 :-)

Personally, I wouldn't worry so much about copy pasta ready css rules based on the 
exact current rules used. The tool is awesomecake as it is!
Sep 19, 2009
#4 sergey.c...@gmail.com
spriteme should be matching URL of original image and then change that url to sprite's 
image url plus the coordinates.

I'm not sure what it takes in spriteme to implement this, but if you're already digging 
the sprite-able images out of CSS, this should be relatively simple. Am I missing 
something here?
Sep 22, 2009
Project Member #5 stevesou...@gmail.com
(No comment was entered for this change.)
Labels: -Priority-Medium Priority-High
Sep 22, 2009
Project Member #6 stevesou...@gmail.com
(No comment was entered for this change.)
Labels: Milestone-NextRelease
Sep 23, 2009
Project Member #7 stevesou...@gmail.com

I've started this task. Here's my initial summary:

The goal is to make it easier for developer's to fix up their CSS to use the new
sprite(s). The location of the CSS affects how this works. The CSS changes could be
located in:
    - rules in a separate stylesheet
    - rules in a style block in the HTML document's page
    - inline CSS in the element's style attribute

The CSS changes might be split across multiple locations. For example, there might be
a single rule that specifies the background-image (eg, a button background). Then
there might be a rule or inline style for each individual element. Communicating to
the developer that there are multiple locations to modify adds to the complexity of
the UI.

There are two styles we're dealing with: background-image and background-position.
(These may be combined in a single background style.)

For background-image, I'll walk the element's cascade of styles until I find where
the background-image is specified and produce new CSS that uses the new sprite's URL.

In most cases, an element most likely doesn't have a background position before
spriting happens. If that's the case, I'll add the background-position to the same
CSS that contains the background-image. If the element DOES have a
background-position, that's the CSS that will be changed.

One important feature will be to produce CSS changes that exactly matches the
original CSS, except for the background-image and background-position changes. This
might be a real challenge, since the cssText available via the DOM has been modified
by the browser.

Sep 24, 2009
#8 l.girau...@gmail.com
I don't think that it's possible to generate reliable stylesheets (or inline styles).
It will have to deal with relative images URL :

from stylesheet1.css :
.myclass1 {background:transparent url(../../images/button-top.gif} repeat-x scroll 0 0;}

from stylesheet2.css, in an other directory :
.myclass2 {background:transparent url(../themes/sexy-border-top.gif) repeat-x scroll
0 0;}

What should be the generated IMG url ?

Moreover, it has to know the display context to generate reliable rules. It can deal
with a static web page but what about a full website ? And if my javascript code
overload some images according to specific conditions ?

And what about styles in HTML (inline or in header) ? This HTML is server-side
generated so spriteme can't generate anything really useful.

I think it can't be 100% reliable and could generate some hard to find bugs. It will
always require some work to merge the old code with the one generated by spriteme. It
can't be a simple replacement of a CSS file by a new one.

However, I think spriteme should be able to regenerate some HTML / stylesheets with
some specific comments tags to help webdevs to find the code to change and to
suggest, still in comments, the new rules.
The webdevs know their code (or are supposed to) and are the only ones able to
analyze a spriteme suggest and to apply it or on the contrary to say "yes but...".

So i think a simple CSS / HTML comment like this is enough :
/* SpriteMe Suggest : .myclass {background:transparent url(spriteme1.png) repeat-x
scroll -10px -30px;} */
The webdev will fit the URL to its files architecture.
Sep 25, 2009
#9 carlosma...@gmail.com
I totally agree with what l.giraudel says on the lines before. I tried to find the
CSS changes by spriteMe on my website, but is not an easy thing, the New sprited
image(s) is easy to find, But not the CSS lines.

I hope spriteMe will improve this issue on new releases. 

SpriteMe is very usefull anyway.
Sep 25, 2009
#10 sergey.c...@gmail.com
I think l.giraudel was talking about generating updated CSS styles not being 
possible, actually.

I gave it a second thought and if doing this will indeed be too hard (I have a lot of 
faith in Steve though ;)), then simple list of instructions about the modifications 
that need to be done might be enough. CSS developers know their CSS files better then 
any tool can so all they need to get from the SpriteMe is what should be changed 
(e.g. url('A'),url('B'),url('C') to url('sprite')) and those calcula pixel values - 
finding them manually is the biggest PITA they experience.
Sep 26, 2009
Project Member #11 stevesou...@gmail.com
I have a beta that is a good first step. Try it out at http://beta.spriteme.org/

It doesn't give you the exact text to replace the old CSS. Instead, it gives you the
background-image and background-position styles that you then have to merge into the
original CSS. But it helps by telling you which stylesheet the rule is in, or if it's
inlined in the element's style attribute.

Please submit feedback here or through the Contact form on my web site.
Sep 26, 2009
#12 sergey.c...@gmail.com
Yes, I agree that it's a great first step and worth releasing by itself.
Nov 12, 2010
#13 titouan....@gmail.com

I tried to get the CSS file modified but unfortunately I did not happen. I have several thousand lines of CSS ...