Unexpected error

For topics about current BETA or future releases, including feature requests.
Post Reply
TomHTML
Rank II - Novice
Rank II - Novice
Posts: 42
Joined: Sun Feb 04, 2018 10:19 am

Unexpected error

Post by TomHTML » Fri Jun 07, 2019 9:41 am

I used the :focus-within pseudo-class as one selector in a list of selectors, like this:

Code: Select all

.body a:focus-within,
.body a:active {
    background-color: transparent;
}
The Validator helpfully inform me that it is a CSS4 pseudo-class, and warns that some browsers may not support it. Fine and good.

But the style rule was not being employed at all in Edge and IE11, and I scratched my head for some time before coming across a Stack Overflow discussion about this very issue:

https://stackoverflow.com/questions/509 ... e-css-rule

So, the presence of the unsupported selector (:focus-within) in one part of the rule was causing the entire rule to be ignored by Edge and IE11. I had no idea that the baby would be tossed out of the bath water in cases like this. If the discussion in the Stack Overflow thread is accurate, this isn't just a quirk of Microsoft, it's standard and expected behavior...yes? No?

This opens a huge can of worms. I wish the Validator had somehow alerted me that the style rule would not have been applied at all because it was an all-in-one, selector-comma-separated rule with one selector containing potentially unsupported code. But it would be awful for the Validator to invalidate the rule because of the potential for failure for the reason under discussion.

Perhaps the Validator already has a mechanism for doing this, and it's hidden in a setting I haven't yet discovered.

Thoughts? (I'm unsure what to suggest that would've spared me this error.)

Many thanks!

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3446
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Unexpected error

Post by Albert Wiersch » Fri Jun 07, 2019 12:11 pm

Hi Tom,

I'm out of the office for a few days so I can't research this in depth but I think the Stack Overflow discussion is correct.

Perhaps adding to the message about the CSS4 pseudo-class potentially invalidating the entire style rule would be helpful?
Image
Albert Wiersch

TomHTML
Rank II - Novice
Rank II - Novice
Posts: 42
Joined: Sun Feb 04, 2018 10:19 am

Re: Unexpected error

Post by TomHTML » Fri Jun 07, 2019 12:28 pm

That might do the trick, as it gets to the heart of the problem.

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3446
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Unexpected error

Post by Albert Wiersch » Mon Jun 10, 2019 12:47 pm

Hello,

Here is the updated message if extended messages are enabled:
The ":focus-within" pseudo-class is a CSS4 pseudo-class but is not a CSS 2.1 or CSS3 pseudo-class. Some browsers may not support this pseudo-class. For example, Edge and Internet Explorer do not support ":focus-within" (but current versions of all other major browsers do). Note that using unrecognized or unknown pseudo-classes in only one part of the rule may invalidate the entire rule even if there are other selectors that are recognized. This message for the ":focus-within" pseudo-class is displayed up to three times.

Here is the updated message if extended messages are not enabled:
The ":focus-within" pseudo-class is a CSS4 pseudo-class but is not a CSS 2.1 or CSS3 pseudo-class. Some browsers may not support this pseudo-class. For example, Edge and Internet Explorer do not support ":focus-within" (but current versions of all other major browsers do). This message for the ":focus-within" pseudo-class is displayed up to three times.

So the new information about the possibility of invalidating the entire style rule appears only if extended messages are enabled... because the message is already getting a bit long.

I also added information about browser support (that Edge and Internet Explorer don't support the :focus-within pseudo-class).

I also gave the message about :focus-within a unique message ID.
Image
Albert Wiersch

TomHTML
Rank II - Novice
Rank II - Novice
Posts: 42
Joined: Sun Feb 04, 2018 10:19 am

Re: Unexpected error

Post by TomHTML » Mon Jun 10, 2019 12:51 pm

Excellent. I understand full well that my specific issue opened up a can of worms, in that many similar cases might need safeguarding with longer warnings. It's an aspect of CSS parsing that I did not know about previously. Many thanks!

Post Reply