[css3-values + css3-cascade] Initial, Inherit, and cascade in multiple-value properties

This mail includes fundamentally two related proposals, one about
initial and inherit explicit values (ie the keywords) and one about a
new keyword to manually enforce the cascade.

1.1 - Include initial and inherit in shortand properties:
margin: initial 5px inherit 5px;
pros:
All the advanteges of shorthands (I don't need to write margin-top:
initial; margin-rigth: 5px; margin-bottom: inherit; margin-left:5px; )
cons:
We may need to define what initial and inherit mean, since they're not typed.

One simple idea to allow this would be to write the values in the
complete sequence, for example background is a sequence of <bg-layer>,
which in turn is made of <background-image> <background-position> /
<background-size> <background-repeat> <background-attachment>
<background-origin>
so the whole background properties can be written as follows:
background: <background-image> <background-position> /
<background-size> <background-repeat> <background-attachment>
<background-origin> <background-image> <background-position> /
<background-size> <background-repeat> <background-attachment>
<background-origin> etc.
Then the position of initial / inherit in the shorthand gives them the
meaning (size, origin, image...)
so that background: url(somewhere.png) inherit; is background-image:
url(somewhere.png); background-position: inherit;
while background: no-repeat inherit; is background-repeat: no-repeat;
background-attachment: inherit;

1.2 Allow initial and inherit in compound properties:
Compound values, as per css3-values, are those who have a comma
separated list of values;
An use case for this is:
font-family: "My font", inherit;
to style a span in a different font or if not available to the keep
the same as parent;
This applies to a big set of properties: background-image and
background related properties, binding, font-family, content (where
the initial value is special, for example in list markers or footnote
calls) and maybe even more
----
Proposal #2 is about a new keyword, that I called "cascade" and means
that the value should be got from the cascade processing. This value
may be used:

2.1) in single value properties:
This is what happen today: the value is not valid, the property is
ignored. Although this may seem useless, if we allow cascade in other
contexts, it may be simple to define it also here.
2.2) in shorthand properties:
div {
background: 25px 0px no-repeat fixed content-box; /* this is
background-position: 25px 0px; background-repeat: no-repeat;
background-attachment: fixed; background-clip: content-box;
background-origin: content-box; */
}
.myclass {
background: url(somewhere.png) no-clip;
}
Currently div.myclass gets background-image: url(somewhere.png);
background-size:initial; background-position:initial;
background-clip:no-clip; background-attachment: initial:
background-origin: initial; , ignoring completely the declaration
before;
by using cascade instead I can get:
background: url(somewhere.png) cascade / initial cascade no-clip; =>
background: url(somewhere.png) 25px 0px / auto no-repeat scroll
padding-box no-clip;
Pros:
- all the advantages of shorthand
- less need for complex selectors like div.myclass or
div.myclass:hover or div.myclass:hover:active etc.
Cons:
same as above
2.3) in compound properties:
(please don't ask me why I use a farmer in my example, it was the
first thing that came across my mind)
.farmhouse { background-image: url(farmhouse.png); }
.seaside { background-image: url(seaside.png); }
.farmer { background-image: url(farmer.png); }
If I want a farmer inside a farmhouse and a farmer on holiday , I need
.farmer.farmhouse { background-image: url(farmer.png) url(farmhouse.png); }
.farmer.seaside { background-image: url(farmer.png) url(seaside.png); }
Things can become even more complex if I start adding
:hover { background-image: url(sunlight.png); }
In that case I need, in addition to the others:
.farmer:hover { background-image: url(sunlight.png) url(farmer.png); }
.farmhouse:hover { background-image: url(sunlight.png) url(farmhouse.png); }
.seaside:hover { background-image: url(sunlight.png) url(seaside.png); }
.farmer.farmhouse:hover { background-image: url(sunlight.png)
url(farmer.png) url(farmhouse.png); }
.farmer.seaside:hover { background-image: url(sunglight.png)
url(farmer.png) url(seaside.png); }
That is 11 declaration, with 11 selectors (that will tested against
any element in my DOM), for 4 states. Compare this against:
.farmhouse { background-image: url(farmhouse.png); }
.seaside { background-image: url(seaside.png); }
.farmer { background-image: url(farmer.png) cascade; }
:hover { background-image: url(seaside.png) cascade; }
2.4) as a default value for attr();
Currently attr allows any valid property value as a default, if the
attribute is not valid for that type. Allowing cascade will mean that
the declaration is ignored and the property value is found from
cascading instead of being a default (eg the empty string).

I hope that you'll like my ideas

Giovanni

Received on Friday, 20 February 2009 20:32:43 UTC