Magento 2 styling / CSS not displaying in IE 9

Question

For some reason any Less I have written inside the @media-common = true media query does not load in IE9. I can't find any specific code to prevent this from rendering out in IE9.

It happens whether it's client-side Less compilation or deployed to a server in production mode with server side compilation.

I've tried clearing the usual directories, clearing caches, running the deploy static content command.

All the CSS updates and loads in IE9 minus any styling within the & when (@media-common = true) {} mixin.

Example

For example ther following code should render the background to be green as it has important, this works as expected in every browser and device except IE9.When I load the website in IE 9 the background is blue.

//
// Common
// _____________________________________________
& when (@media-common = true) {
 body {
 background-color: green !important;
 }
}
//
// Mobile
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
 body {
 background-color: red;
 }
}
//
// Tablet and above
// _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
 body {
 background-color: blue;
 }
}

Question

Why is IE9 ignoring any code inside & when (@media-common = true) {}?

• circlesix: the styles should compile down to the pub/static/frontend/{{vendor}}/{{theme}}/en_US/css/styles-m.css sheet. you are saying that those styles are not in this sheet in ie9?
• Ben Crook: I have changed to server-side compilation so I can check, the code is inside styles-m.css but IE9 isn't picking it up. I'm starting to think it's due to IE9 not supporting more than 4096 selectors, I hope this isn't the case because there's over 15000 lines of CSS in styles-m.css
• circlesix: Wow! So you would have to have all your styles broken down into css called into different files called in the head? The ghost of IE haunts us all.
• Ben Crook: Yeah, it's proving very difficult due to the way the blank theme imports files. I've created styles-l-custom.less and styles-m-custom.less but as you can't order the CSS files I'm now running into specificity problems. I can't wait until clients no longer support IE.

Answer 1

Magento 2 no longer supports IE9 so this is unlikely to ever be fixed by Magento

It's looking very likely that this is down to the fact IE9 can only support up to 4096 selectors, my styles-m.css currently has 4977 selectors (due to having Luma as a parent (bad idea!)).

The styles inside the media-common mixin aren't displaying as they are placed last, after the 4096 limit.

It seems my only solution is to split the CSS up into multiple files, this should be fun!

Update: - This was indeed down to the 4096 selector limit, adding my own CSS files instead of using styles-l.css and styles-m.css resolved it although it was a huge pain.

• Jafar Pinjar: hi @Ben Crook, I included css file like below, <css src="css/ie_styles.css" ie_condition="IE" /> can this load only IE?

Answer 2

Try changing the order of your styles so that you do not need to add !important. If you move

& when (@media-common = true) { body { background-color: green; } }

to be the last item instead of the first, the nature of cascading stylesheets means this will cascade down and use the last style specified that is relevant.

• Ben Crook: The problem isn't the specificity, the problem is that any CSS inside the @media-common = true mixin does not load in IE9. I have only added important to show that the background should be green, but it isn't (it's blue). Moving CSS has no impact on this.
• Ben Crook: Turns out it's because IE9 can only handle 4096 selectors, my theme has 4977.