CODEWITHSUNDEEP
cssinternet-explorermicrosoft-edge
papa zulu
papa zulu

Reputation: 317

How does the _:-ms-lang(x) fix for Edge and IE work?

I had a situation where I had to apply a specific CSS style in Edge and IE browsers only. I found online that you can prepend your CSS selector with _:-ms-lang(x) and the style will only be applied in IE and Edge.

But I wonder, how exactly is this fix working? As far as I know, the comma will just separate different selectors, meaning that other browsers should also interpret and use this style.

Here is an example:

Let's say we want to apply a width of 94px to .selector element only in Edge and IE.

_:-ms-lang(x), .selector { 
    width: 94px;
}

The Edge browser will apply this style, and others won't. But why not?

The comma in the selector should apply the style to _:-ms-lang(x) element AND to .selector element.

Here is a source for this IE hack.

And one more.

Upvotes: 1

Views: 2784

Answers (1)

Burhan
Burhan

Reputation: 800

In CSS, when a browser does not recognize part of a selector (or thinks there is an error in a selector), it completely ignores the entire rule.

Here's the section in the CSS3 spec outlining this behavior

The prelude of the qualified rule is parsed as a selector list. If this results in an invalid selector list, the entire style rule is invalid.

Here CSS2.1 talks about the special case of comma

CSS 2.1 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future updates of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS 2.1.

Therefore when the other browsers try to parse the selectors, they find the _:-ms-lang(x) selector to be invalid and so ignore the entire rule (including .selector)

Also here is an excellent answer on why this behavior is desirable

Upvotes: 2

Related Questions