CSS property override: unset

Question

For the CSS framework I'm developing, I use all: unset , which in itself works just fine:

 #foo { all: unset; } 

However, in some cases I want to "cancel" this rule, as in

 #foo:hover { all: auto; } 

However, this clearly does not work, because for all there is no auto value. Instead, we have inherit and initial values, which instead of "canceling" the all properties have different effects: returning all values ​​to their parent value or their original value (I assume this means the system level of the default value).

To accomplish what I want, I am currently doing

 #foo:not(:hover) { all: unset; } 

which works fine, but not too scalable if I want to do this for several pseudo-classes, for example, and I would prefer to override the all: unset property? Is there any way to do this?

Answer 1

You cannot undo the effects of the all property after specifying it. This may be due to the fact that all is a shorthand property (which only accepts CSS keywords as values).

You cannot delete the abbreviated declaration from the cascade in the same way as the introduction of the revert keyword in css-cascade-4 allows you to erase author-level declarations, and this is because the shorthand property does not exist as its own entity in the cascade; instead, it simply presents all of its component properties. As with more traditional shorthand properties such as background and font , the only way to override the shorthand declaration that was applied is to override the values ​​for the long ranges that were redefined, either through long-handed declarations or through another shorthand declaration . But you cannot use the last property all , since it accepts only CSS keywords.

Since the former is clearly not practical with the abbreviation all , since you cannot predict which creator-level declarations will be overridden to begin with, your only option is to limit it with a selector, thereby preventing it from being ever used in certain circumstances in the first place . We hope that in the near future we will see more implementations of level 4 :not() , which will simplify the notation of selectors.

Answer 2

In addition to what BoltClock explained, what you want is currently not possible even for un-abbreviated properties.

 * { color: red; } #foo { color: unset; } #foo:hover { color: /* How to revert to red? */ } 

Once you add the value that the cascade wins, there is no way to tell the cascade to “return” and instead get the old winner. You must install it explicitly, but this is only possible if you know it.

The closest is the revert keyword, introduced by CSS Cascade 4, which cascades to the previous start level. But switching the cascade back to the previous winner at the same level of origin is currently not possible.

Then the solution limits your selectors to applicable only when you want it. Therefore, there is no need to cancel.

Answer 3

You tried

 all: revert 

More info here MDN