search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.5k stars 661 forks source link

[css-cascade] expand all property syntax for non-inherited props #11123

Open codermapuche opened 5 days ago

codermapuche commented 5 days ago

Currently we have: all = initial | inherit | unset | revert | revert-layer

So, when do: * { all: inherit; } this force inherit in all properties, including non-inherited props like zoom.

I proposal a syntax like: all = all-value | inherited non-inherited inherited = all-value non-inherited = all-value all-value = initial | inherit | unset | revert | revert-layer

in this form, the propery has backwards compatibility with current behavior and allow a two keywords value, so we can do something like: * { all: inherit initial; } when the behavior expected is what all inherited props are inherit and non inherited props are initial.

bleper commented 5 days ago

Or there could instead be two all properties, one for inheritables and one for non-inheritables. This could be used by authors to provide some encapsulation control, where they want to rely on a reset layer or user agent stylesheet as a replacement for the spec's defaults, while still maintaining reasonable dependencies on ancestors (such as for things like text and font).

Combined with #11105, this would hypothetically be 4 properties, and I would still find it useful to be able to do something like this: where the use case is to use the initial value of registered inheritable variables (such as for theming and color scheme variations), while leaving others untouched; but it doesn't seem common enough to warrant serious consideration.

codermapuche commented 5 days ago

Thank you for the suggestion of using two separate all properties for inherited and non-inherited properties. However, I'd like to emphasize the importance of maintaining backward compatibility with the current behavior of all, as this supports stability and predictability in CSS for many existing projects.

Proposing a modification to the all property to accept two values (one for inherited and another for non-inherited properties) provides a more intuitive alternative for authors while preserving compatibility with the existing behavior.

This added flexibility would allow for single-line CSS resets, simplifying stylesheets without the need for additional properties. It would be a highly valuable development tool, as it would enable both global style resets and granular customization while also reducing cognitive load by avoiding multiple, complementary properties.

Allowing this option within all promotes cleaner and more manageable CSS, ensuring any code already relying on all: inherit continues to work as expected. Additionally, this approach would serve as a practical and flexible way to implement CSS resets, a benefit for designers and developers seeking simplicity in their stylesheets.

The case of variables, as mentioned in issue #11105, is different because it addresses resetting variables, which may indeed warrant a complementary property. However, for the broader goal here, expanding all in this way meets the requirements effectively.

cdoublev commented 5 days ago

I am probably missing something but all: unset results to "all inherited props are inherit and non inherited props are initial". Targeting only inherited/non-inherited properties may have some use cases though.

Loirooriol commented 4 days ago

Can you provide use-cases for this other than for the obvious all: inherit initial which already exists as all: unset?

maintaining backward compatibility

How is accepting 2 values in all more backwards compatible than adding 2 new shorthands? Both things will be equally ignored on non-supporting browsers.