7

Consider the following CSS rule:

input:focus,
div:focus-within {
   box-shadow: none !important; 
}

This rule overwrites Bootstrap's input box-shadow on focus and also a focus contained within a specific div. While the :focus-within is a fairly new pseudo selector, it is assumed that IE and Edge won't understand the meaning of it.

Thus the expected outcome would be that IE and Edge would ignore the unrecognised selector and apply the CSS rule to the other matched selectors it does know.

However, this is not the case. They both ignore the whole rule, even though it understands the :focus selector.

My question is:

Part 1: Why does it do this? Why not just ignore the single selector?

Part 2: Is there a hack to make them ignore the single selector, while still making it work on modern browsers?

Yes, I could make another css rule to only apply to IE and Edge, however that is just bloating the code and is somewhat unnecessary.

Studocwho
  • 2,404
  • 3
  • 23
  • 29
  • 5
    That's just how it works. An unknown selector is treated as a invalid selector causing a parsing error. Therefore the whole rule should be dropped: `Specifications reusing Selectors must define how to handle parsing errors. (In the case of CSS, the entire rule in which the selector is used is dropped.)` - [w3.org](https://www.w3.org/TR/selectors-3/#Conformance) – Turnip Jun 19 '18 at 15:40
  • 1
    That seems silly to me. While if a single css property is deemed unknown to the browser, it skips that property not the whole rule. Why is this not the intended behaviour for selectors? – Studocwho Jun 19 '18 at 15:53
  • You'd have to ask W3C :) – Turnip Jun 19 '18 at 15:56
  • Anyone from W3C here? :) – m4n0 Jun 19 '18 at 15:58
  • 1
    I would guess it is because if the browser can not parse part of the selector, it can not be certain that the selectors that came before or after are not part of the same selector. If CSS4 introduced the "second cousin twice removed" selector with the syntax `s, div` (bad example I know) then parsing your `input:focus` as a selector may be incorrect. – Turnip Jun 19 '18 at 16:07
  • 1
    Here is a question identical to "Part 1" of yours. BoltClock's answer explains what I was trying to get across (without the ludicrous example): https://stackoverflow.com/a/13831877/746736 – Turnip Jun 19 '18 at 16:12
  • I just read that overly long answer, and I now understand a bit better. So that answers part 1. Any suggestions of a solution for part 2 of my question, other than the separate rules? – Studocwho Jun 19 '18 at 16:48
  • 3
    Hey, I also wanted to note that we allow you to vote for features you want to see implemented in Microsoft Edge, here is the page for focus-within: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/11725071-implement-focus-within-from-selectors-4 To answer #2, you need to separate the rules so that the UA can go into the block and will work like normal, like this: http://jsbin.com/luyacemuwo/edit?html,css,output – gregwhitworth Jun 20 '18 at 22:55

1 Answers1

0

Browsers are ordered to ignore entire CSS block if they do not understand the selector by the specs. You should write such things separately.

waterplea
  • 3,462
  • 5
  • 31
  • 47