[csswg-drafts] Provide reference pseudocode for prepending every regular CSS rule with an ID, please

prlbr has just created a new issue for https://github.com/w3c/csswg-drafts:

== Provide reference pseudocode for prepending every regular CSS rule with an ID, please ==
Markup languages such as HTML offer the options to either set CSS for a single element, e.g. `<span style="CSS here">`, or globally, e.g. `<style>CSS here</style>`. There is currently no standard way to make CSS apply to certain parts of a document though.

Somewhat different solutions for this were suggested over the years. `<style scoped>` actually made it into HTML5, but wasn’t implemented by enough browsers to stay there, apparently because it was too complex for some vendors like Google. There were hopes to use declarative shadow DOM as a basis for a solution, but [declarative shadow DOM has been rejected](https://github.com/whatwg/dom/issues/510), too.

However, [it has been suggested](https://github.com/w3c/csswg-drafts/issues/137#issuecomment-222031438) to basically emulate scoped styles by prepending all CSS rules with an ID of a container element like this.

```html
<div id="container">
 <style>
  #container p, #container blockquote {…}
  @media print {
   #container p, #container h2+h3 span {…}
  }
 </style>
 …
</div>
```

The suggestion is fine with the caveat that prepending every rule with an ID automatically and reliably is not actually trivial for people who are no CSS wizards. Also, the CSS syntax gets enhanced over time and working implementations are not guaranteed to work in the future.

So I ask you to please supply reference pseudocode for the standard task of prepending an ID to every regular CSS rule and update that pseudocode whenever it needs to adapt to changes in the CSS syntax.

This code can then be implemented by software to emulate scoped CSS. This would help a lot in the continued absence of a native scoping mechanism. (And maybe it could even be used by browsers to implement a native solution in the far future.)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2420 using your GitHub account

Received on Wednesday, 7 March 2018 19:21:40 UTC