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:
```css
.example {
  background: white;
  &:hover {
     background: gray;
     color: green;
  }
  color: red;
}
```
Will turn to for any modern browser:
```css
.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