export modified CSS

[GoogleCodeExporter]

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

Original issue reported on code.google.com by stevesou...@gmail.com on 1 Sep 2009 at 5:47

[GoogleCodeExporter]

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.

Original comment by pmontra...@gmail.com on 15 Sep 2009 at 9:55

[GoogleCodeExporter]

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.

Original comment by stevesou...@gmail.com on 16 Sep 2009 at 6:00

[GoogleCodeExporter]

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 - 
http://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!

Original comment by realf...@gmail.com on 17 Sep 2009 at 10:49

[GoogleCodeExporter]

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?

Original comment by sergey.c...@gmail.com on 20 Sep 2009 at 1:41

[GoogleCodeExporter]

Original comment by stevesou...@gmail.com on 22 Sep 2009 at 7:12

• Added labels: Priority-High
• Removed labels: Priority-Medium

[GoogleCodeExporter]

Original comment by stevesou...@gmail.com on 22 Sep 2009 at 5:28

• Added labels: Milestone-NextRelease

[GoogleCodeExporter]

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.

Original comment by stevesou...@gmail.com on 23 Sep 2009 at 10:38

[GoogleCodeExporter]

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.

Original comment by l.girau...@gmail.com on 24 Sep 2009 at 12:46

[GoogleCodeExporter]

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.

Original comment by carlosma...@gmail.com on 25 Sep 2009 at 4:55

[GoogleCodeExporter]

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.

Original comment by sergey.c...@gmail.com on 25 Sep 2009 at 7:26

[GoogleCodeExporter]

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.

Original comment by stevesou...@gmail.com on 26 Sep 2009 at 6:38

[GoogleCodeExporter]

Yes, I agree that it's a great first step and worth releasing by itself.

Original comment by sergey.c...@gmail.com on 26 Sep 2009 at 7:46

[GoogleCodeExporter]

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

Original comment by titouan....@gmail.com on 12 Nov 2010 at 6:56