SmartSprites

Add support for shorthand background property

Details

  • Type: Improvement Improvement
  • Status: Open Open
  • Priority: Critical Critical
  • Resolution: Unresolved
  • Affects Version/s: 0.2.0
  • Fix Version/s: 0.4.0
  • Component/s: None
  • Labels:
    None

Description

Renamed the original improvement request to what it became after the discussions shown in comments. Original description follows below.

Currently only the "background-image" css property is allowed for SmartSprites annotations/directives.
But the designer should not be forced to use separate background-* properties to define the background style. Moreover it's more or less impossible to modify/correct every css file which come with some libraries and don't follow the current rule of SmartSprites.
And it's more efficient to use the single "background" property and compose the different options in there like:

background: #6891C9 url(../images/background.jpg) repeat-y; /** sprite-ref: mysprite; */

instead of 3 separate definitions:

background-color: #6891C9;
background-repeat: repeat-y;
background-image: url(../images/background.jpg); /** sprite-ref: mysprite; */

Currently when trying the first example the ant-tasks spits out a warning: "No 'background-image' CSS rule next to sprite reference comment..."

And here is another property which should be supported:

list-style-type: none;
list-style-position: outside;
list-style-image: url(../images/pdf-icon16x16.gif);

again: the shortened property should also be supported:

list-style: none url(../images/pdf-icon16x16.gif) outside;

Issue Links

Activity

Hide
Stanisław Osiński added a comment -

Question: is there a counterpart of the background-position property for the list-style-image? I vaguely remember that I once considered implementation of sprites for lists, and the problem was the lack of a property that would allow me to set negative positions of the background, which is key here.

Show
Stanisław Osiński added a comment - Question: is there a counterpart of the background-position property for the list-style-image? I vaguely remember that I once considered implementation of sprites for lists, and the problem was the lack of a property that would allow me to set negative positions of the background, which is key here.
Hide
Philipp Rosenhagen added a comment -

Yeah - you are right: there is no such CSS property for this attribute.
But maybe we can try it this way: the developer have to define the height/width of the sprite - maybe just using the margin-* directives for this. And all sprites for list-style-images have to be laid out vertically. I think in most cases a list is ordered top to bottom - but maybe leave this decision to the developer as well. So if the margin-* directives are choosen correctly (i.e. matches a list entry height) the sprite images should not interfere each other.

But that's just theory - I have not tried this on an example page yet...

Show
Philipp Rosenhagen added a comment - Yeah - you are right: there is no such CSS property for this attribute. But maybe we can try it this way: the developer have to define the height/width of the sprite - maybe just using the margin-* directives for this. And all sprites for list-style-images have to be laid out vertically. I think in most cases a list is ordered top to bottom - but maybe leave this decision to the developer as well. So if the margin-* directives are choosen correctly (i.e. matches a list entry height) the sprite images should not interfere each other. But that's just theory - I have not tried this on an example page yet...
Hide
Philipp Rosenhagen added a comment -

Mmm... I think now I get it ... even the above mentioned things are followed - we can't re-position the image to the correct sprite-position. So maybe this is a point where we cannot use sprite images. Ok - I think that's not so important and we can leave this as it is.

Show
Philipp Rosenhagen added a comment - Mmm... I think now I get it ... even the above mentioned things are followed - we can't re-position the image to the correct sprite-position. So maybe this is a point where we cannot use sprite images. Ok - I think that's not so important and we can leave this as it is.
Hide
Stanisław Osiński added a comment -

Well – you can always emulate bullets by attaching background / padding directly to <li> elements. This way you could use sprites as for any other backgrounds. Your main point (about support for annotating shorthand version of background) remains absolutely valid.

Show
Stanisław Osiński added a comment - Well – you can always emulate bullets by attaching background / padding directly to <li> elements. This way you could use sprites as for any other backgrounds. Your main point (about support for annotating shorthand version of background) remains absolutely valid.
Hide
Stanisław Osiński added a comment -

Moving out of the 0.3.0 release.

Show
Stanisław Osiński added a comment - Moving out of the 0.3.0 release.

People

Vote (4)
Watch (4)

Dates

  • Created:
    Updated: