| Issue 7: | export modified CSS | |
| 7 people starred this issue and may be notified of changes. | Back to list |
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
Sep 16, 2009
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
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
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
(No comment was entered for this change.)
Labels:
-Priority-Medium Priority-High
Sep 22, 2009
(No comment was entered for this change.)
Labels:
Milestone-NextRelease
Sep 23, 2009
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
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
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
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
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
Yes, I agree that it's a great first step and worth releasing by itself.
Nov 12, 2010
I tried to get the CSS file modified but unfortunately I did not happen. I have several thousand lines of CSS ... |