Support an omission character in shorthand CSS

CSS
1

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  */
2

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.

3

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?

4

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;