W3C home > Mailing lists > Public > public-css-archive@w3.org > June 2018

Re: [csswg-drafts] [css-nesting] request to pick up the css-nesting proposal

From: Roman Dvornov via GitHub <sysbot+gh@w3.org>
Date: Fri, 29 Jun 2018 22:10:05 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-401486402-1530310204-sysbot+gh@w3.org>
One issue is missed in this thread – error handling. [According to spec](https://drafts.csswg.org/css-syntax/#error-handling) declarations and qualified rules (nested rules as well) have different rules for bad content elimination.
For example, the CSS:
.example {
  background: white;
  &:hover {
     background: gray;
     color: green;
  color: red;
Will turn to for any modern browser:
.example {
  background: white;
So `color: red` will be vanished as a bad content.
However, with nesting rule support things may be changed – `color: red` will be applied, even with an error in selector (that produce a bad qualified rule that will be thrown away). Probably declarations after a nested rules will be prohibited, it can compensate the difference a little (declarations after a declaration closest to nested rule ending will be applied by modern browsers anyway).
I believe, nobody is used `&` in CSS today. So introducing `&` as a starting for a nested qualified rule is quite safe.

> Alternatively, the only ambiguous case is when the selector starts with an element selector, right? If it starts with an id, class, pseudo-class, or pseudo-element, we know immediately.
What if the ampersand was only required in that case?

We need to remember about browser's [hacks](http://browserhacks.com/). Many symbols could used for addressing styles for IE6-7 only. Some of them are valid as a starting for a selector:
.selector { &property: value; } /* only if nested rules will be supported */
.selector { *property: value; }
.selector { .property: value; }
.selector { #property: value; }
.selector { :property: value; }

When IE6-7 were actual, a star hack was quite popular. According to [my research](https://github.com/csstree/real-web-css) this hack is still preset on many sites:
- `*` hack is present at least on 79 sites of Alexa Top 250 (3192 occurrences)
- `#` hack is present at least on 3 sites of Alexa Top 250 (54 occurrences)

So, if spec will allow to start a nested rule with any of those characters, many sites can be broken. Because different amount of content will be thrown away (by modern browsers and browsers with such support).

>From this standpoint, the restriction to start a nested rule only with `&` is quite fair. But it's still unclear what other side effects it can introduce in parsing of modern and old web CSS.

GitHub Notification of comment by lahmatiy
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2701#issuecomment-401486402 using your GitHub account
Received on Friday, 29 June 2018 22:10:11 UTC

This archive was generated by hypermail 2.4.0 : Saturday, 2 July 2022 03:21:09 UTC