IE9 4096 Selector Limit and the Magento 2 themes

[BenGlassAtlas]

TL:DR: IE9 only supports up to 4096 selectors per CSS file, the blank theme is close to this limit, and the Luma theme is already over it. This means extending the themes will likely cause problems in IE9, unless less than ideal workarounds are used.

Detected in Magento 2.0.7 but I suspect it has always been an issue and will only get worse if more styles are added.

The problem

I ran into a problem on my custom theme where I noticed some styles were not applying in IE9, I managed to track it down to the IE9 selector limit.

IE9 only supports up to 4096 selectors per CSS file, as the Blank and Luma theme only has 2 CSS files it is very easy to go over the 4096 limit. In fact the Luma theme is already over the limit before customisation with 4110 selectors meaning the last 14 rules in styles-m.css in the Luma theme will be ignored.

The blank theme is close to the limit with 3515 selectors in styles-m.css, this means that if a theme extending blank adds 581 selectors (this isn't much room for customisation) there will be problems in IE9.

Workarounds

This leaves me with 2 choices, either to build every theme from scratch (as most clients support IE9) or to add more stylesheets along the lines of styles-m-custom.css and styles-l-custom.css which is a huge pain especially mid project and seems pretty messy.

I understand there isn't exactly a quick fix for this as it'll mean reducing the selectors in the CSS which is a very difficult and time consuming task, but I believe it's something Magento devs should be aware of when working on/with the themes.

Info:

• Stack Overflow
• More info
• Demo - Go to this page in IE9, the bottom rows won't have a red background, they will in newer browsers
• Microsoft Blog

How to check the number of selectors

I used the below code (also linked here) which goes through the CSS files and counts the rules and selectors, then it gives a warning if any CSS files are over the 4096 limit.

Paste this code into the console in your web browser (I used Chrome):

function countCSSRules() {
    var results = '',
        log = '';
    if (!document.styleSheets) {
        return;
    }
    for (var i = 0; i < document.styleSheets.length; i++) {
        countSheet(document.styleSheets[i]);
    }
    function countSheet(sheet) {
        var count = 0;
        if (sheet && sheet.cssRules) {
            for (var j = 0, l = sheet.cssRules.length; j < l; j++) {
                if( !sheet.cssRules[j].selectorText ) {
                    continue;
                }
                count += sheet.cssRules[j].selectorText.split(',').length;
            }

            log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag');
            log += '\nRules: ' + sheet.cssRules.length;
            log += '\nSelectors: ' + count;
            log += '\n--------------------------';
            if (count >= 4096) {
                results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n';
            }
        }
    }
    console.log(log);
    console.log(results);
};
countCSSRules();

Results

Luma Theme Demo (no customisation)

File	Rules	Selectors
pub/static/frontend/Magento/luma/en_US/mage/calendar.css	61	65
pub/static/frontend/Magento/luma/en_US/css/styles-m.css	1852	4110
pub/static/frontend/Magento/luma/en_US/css/styles-l.css	156	1106
pub/media/styles.css	212	916

WARNING:
There are 4110 CSS rules in the stylesheet pub/static/frontend/Magento/luma/en_US/css/styles-m.css - IE will ignore the last 14 rules!

Blank theme Demo (no customisation)

File	Rules	Selectors
pub/static/frontend/Magento/blank/en_US/mage/calendar.css	61	65
pub/static/frontend/Magento/blank/en_US/css/styles-m.css	1664	3515
pub/static/frontend/Magento/blank/en_US/css/styles-l.css	150	808
pub/static/frontend/Magento/blank/en_US/css/print.css	2	34
pub/media/styles.css	212	916

Related problems

I also noted that when in client-side compilation there are many more selectors per CSS file meaning that what I see locally in IE9 does not match what I see after deployment in IE9 (as 3737 rules are now being cut off!). This is also a huge pain, I believe it's related to how less.js handles the merging of Less so I'm not sure if this is fixable from Magento's side.

For example this is my custom theme with server-side and then client-side compilation (I've only included the larger files):

Server-side compilation:

File	Rules	Selectors
static/frontend/theme-name/default/en_GB/css/styles-m.css	1852	4111
static/frontend/theme-name/default/en_GB/css/x-styles-custom-m.css	1363	2807
static/frontend/theme-name/default/en_GB/css/styles-l.css	155	1106
static/frontend/theme-name/default/en_GB/css/x-styles-custom-l.css	469	1018

Client-side compilation:

File	Rules	Selectors
static/frontend/theme-name/default/en_GB/css/styles-m.css	3702	7833
static/frontend/theme-name/default/en_GB/css/x-styles-custom-m.css	2676	5455
static/frontend/theme-name/default/en_GB/css/styles-l.css	300	1406
static/frontend/theme-name/default/en_GB/css/x-styles-custom-l.css	914	1918

[MomotenkoNatalia]

Hi @BenSpace48 ! We are grateful for the investigation you fulfilled. We created an internal ticket to find the best way to fix this - MAGETWO-54769

[hostep]

Since the docs are updated and dropped IE9 support in magento/devdocs#887, this ticket can now be closed, since the selector limit is only for IE9 and lower versions... Right?

Just for completeness sake, if you do want to get around this issue, you can try to integrate the Bless package in your frontend workflow to work around the issue in IE9 and lower.

[BenGlassAtlas]

Good point @hostep and thanks for the workaround - I have closed the issue.