Extensibility and override-ability of multiple-valued CSS properties

Hello, my name is Giorgio Liscio, I write from Italy and this is my 
first message to www-style although as a developer I always follow W3's work

I would suggest something to resolve the poor extensibility of the 
background, box-shadow and text-shadow properties (and similar ones)

For example, at the moment, for to override/append a single value in the 
'background-image' stack, I have to rewrite the whole value:

#mybutton
{
     background:
     url('bg1.png') left top no-repeat,
     url('bg2.png') left bottom no-repeat,
     url('bg3.png') right top no-repeat,
     url('bg4.png') right bottom no-repeat,
     url('bg5.png') center center no-repeat red;
}

#mybutton:hover
{
     background:
     url('bg1.png') left top no-repeat,          /* SAME AS SUPER */
     url('bg2.png') left bottom no-repeat,       /* SAME AS SUPER */
     url('bg3_HOVER.png') right top no-repeat,   /* CHANGES ON HOVER */
     url('bg4.png') right bottom no-repeat,      /* SAME AS SUPER */
     url('bg5.png') center center no-repeat red; /* SAME AS SUPER */
}

.... including :active and :focus styles, classes, etc... this will 
result in an unnecessary waste of bytes.

Also, this is very hard to mantain, so I think something should be done 
here.

My proposal is to allow the override/append of a single z-axis value, 
for example:

/* override */
#mybutton:hover
         {background: offset(3) url('bg3_HOVER.png') top;}

/* append */
#mybutton:active
       {background: offset(6) url('bg6.png') bottom;}

Also it would be useful to have "named" properties:

#button
        {box-shadow:
        name('highlight-effect') inset 0 1px white,
        name('drop-shadow') 0 0 20px black;}

#button:active
        {box-shadow:name('highlight-effect') none;}

#button.error
       {box-shadow:name('drop-shadow') 0 0 20px red;}

I really think this is an important issue
I'm pretty sure people will start soon to use "css preprocessors" for 
this, especially for box-shadow and background
then it's better to anticipate this weird practice providing the correct 
way to extend these css properties

I'm really sorry for my bad english... I hope to have been clear and 
helpful :)

Giorgio

Received on Tuesday, 30 April 2013 06:52:44 UTC