Better handling of unknown selectors in a css rule

According to https://drafts.csswg.org/css-syntax/#css-stylesheets ,
invalid CSS selectors causes the whole rule to be dropped!

> ... If any style rule is invalid, or any at-rule is not recognized or is invalid according to its grammar or context, it’s a parse error. Discard that rule.

But there are many many situations we need to include some new selector in our
rule set, and it is reasonable that browser ignore only those
selectors that doesn't support it. I know, there were some discussion
about it as parsing complex unknown selectors may result parsing
performance issues or

There are some very easy solutions to bypass the unknown selectors,
even complex ones! In most simple case, browser can ignore all the
selectors just from the first unknown one to beginning of {...} block
(so apply the rule to prev selectors).

for example:

```
..btn:focus, input:focus, button:focus, .btn-file:focus-within {
   background: blue;
   color: white;
   /* ... */
}

```
The browser can ignore only the last item if it is unknown, but apply
it for all other simple selectors at the beginning.

By this definition, if some one need the old way of rule parsing (may
be for css hacks), he could simply put the newer/unknown selectors at
first of the group and entire rule block will be ignored as previous.

And this way, we will not have performance penalty or parsing mistakes
for complex selectors.

Received on Monday, 17 December 2018 02:23:48 UTC