Re: [csswg-drafts] [css-cascade-5] Allow authors to explicitly place unlayered styles in the cascade layer order (#6323)

With apologies for blowing new life into this issue, but after getting several questions about this _(in replies on posts/tweets or during a Q&A after a talk)_ I feel that people need a solution to this problem.

To summarize the problem: unlayered styles win from layered styles and that is …
1. … great when working with frameworks and 3rd-party CSS: put those external things in layers, and you can be sure your own (unlayered) rules win from those layered ones. Yay! 🎉
2. … not so great when doing the Progressive Enhancement dance. Browsers that don't understand `@​layer` will ignore the layered styles. This way you end up with a bunch of layered reset/3rd-party styles not being loaded at all in those browsers. Author unlayered styles then get applied on top of nothing, which is like building the tenth floor of a flat but with the foundations and nine floors below it missing. Weird. 😩

Getting people sold on that 2nd item is very hard _(and until now impossible)_ sell to be honest. My message right now is that while layers are great, you can't really use them in a PE-mindset:
- Trying to “build on top” by placing your own author styles in the last declared layer will leave browsers that don't understand `@​layer` style-less.
- Trying to work around that by shipping old browsers a basic (unlayered) stylesheet also won't work _(without too much hackery)_, because those unlayered styles can overwrite the layered styles in browsers that do speak `@​layer`.

This is a message I don't really like to bring?

---

Summarizing this issue, I saw syntax proposals to:
1. Define the position of layered styles using an additional keyword _(`up` and `down` where proposed)_
2. Position the unlayered styles _(Using names such as `initial`, `unlayered`, etc. or using a `/`)_

I would like to request the CSS WG to look into these syntax suggestions and to provide a structural solution. That way we can have both Layers and keep Progressive Enhancement in mind while building websites.

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6323#issuecomment-1028025232 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 2 February 2022 14:58:16 UTC