Could CSS support something like an asterisk (*
) character that prevents overrides on shorthand CSS properties like margin
and padding
?
.container {
margin: * auto; /* would not override margin-top or margin-bottom */
}
It could follow the existing 1-to-4-value syntax.
.button {
padding: .25em 1em *; /* would not override padding-bottom */
}
Issues
Tab Atkins pointed out that complex shorthands that rely on types may have issues. This may refer to properties like background
, which explicitly have no order (per layer).
background: * url(data:...) red; /* what did the asterisk just omit? */
One solution for unordered shorthands might be to specify that starting asterisks prevent all shorthand overrides.
background: * url(data:); /* equivalent to background-image */
background: * url(data:) red; /* equivalent to background-color and background-image */
Yup, something like an asterisk will only work for shorthands with purely positional grammars. If you have any choice in the order, it’s ambiguous; for these we instead rely on type or even value (of certain keywords, for example). Even purely-ordered properties can be problematic if they have a lot of optional values: what did you omit in “flex: 1 *;”, the flex-shrink value or the flex-basis value?
I’d have to look through the grammars to see how many shorthands this could actually apply to. I suspect it’s a pretty small number, unfortunately.
If the order is optional, what if an asterisk at the beginning of the value prevented all overrides?
flex: * 1; /* equivalent to flex-grow */
Or is this how flex already works out of the box?
A different issue, but sort of related to this, is what happens with properties like text-decoration-skip.
http://dev.w3.org/csswg/css-text-decor-4/#text-decoration-skip-property
It can take several values at the same time, and it would be nice to be able to specify an additional value, regardless of what was there before. I doubt a * syntax would be all that good, but I’m not too sure what else to do.
text-decoration-skip: * ink;