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