Limites de regras CSS do Internet Explorer

Eu li informações conflitantes sobre os limites bobos de CSS do Internet Explorer. Estou (acho que estou) entendendo que você só pode ter 31 <style>e <link>tags (combinados) e que cada planilha pode ter até 31 @imports (então 31 <link>s, cada um com 31 @imports é bom, embora insano).

No entanto, a regra 4095 é menos clara - essas regras são 4095 por documento ou por folha? Por exemplo, posso <link>usar duas folhas de estilo, cada uma com 4000 regras, e fazer funcionar, ou isso quebrará o limite?

Edição de terceiros 2018

Neste post do blog do msdn, são fornecidas mais informações sobre stylesheet-limits-in-internet-explorer .

Referindo o seguinte da Microsoft:

• Limites da folha de estilo no Internet Explorer
• KB - Uma página da Web que usa estilos CSS não é renderizada corretamente no Internet Explorer

As regras para o IE9 são:

• Uma folha pode conter até 4095 seletores (Demo)
• Uma folha pode @ importar até 31 folhas
• O aninhamento @import suporta até 4 níveis de profundidade

As regras para o IE10 são:

• Uma folha pode conter até 65534 seletores
• Uma folha pode @ importar até 4095 folhas
• O aninhamento @import suporta até 4095 níveis de profundidade

Testando a regra 4095 pelo limite da folha

A título de confirmação, criei uma essência com 3 arquivos. Um HTML e dois arquivos CSS.

• O primeiro arquivo contém 4096 seletores e significa que seu seletor final não é lido.
• O segundo arquivo (4095.css) possui um seletor a menos e é lido e funciona perfeitamente no IE (embora já tenha lido outros 4095 seletores do arquivo anterior.

Um script javascript para contar suas regras CSS:

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) {
        if (sheet && sheet.cssRules) {
            var count = countSelectors(sheet);

            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';
            }
        }
    }
    function countSelectors(group) {
        var count = 0;
        for (var j = 0, l = group.cssRules.length; j < l; j++) {
            var rule = group.cssRules[j];
            if (rule instanceof CSSImportRule) {
                countSheet(rule.styleSheet);
            }
            if (rule instanceof CSSMediaRule) {
                count += countSelectors(rule);
            }
            if( !rule.selectorText ) {
                continue;
            }
            count += rule.selectorText.split(',').length;
        }
        return count;
    }

    console.log(log);
    console.log(results);
};
countCSSRules();

Não tenho representante suficiente para comentar sobre o snippet semelhante acima, mas este conta as regras do @media. Solte-o no console do 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) {
                    if (sheet.cssRules[j].cssRules) {
                        for (var m = 0, n = sheet.cssRules[j].cssRules.length; m < n; m++) {
                            if(sheet.cssRules[j].cssRules[m].selectorText) {
                                count += sheet.cssRules[j].cssRules[m].selectorText.split(',').length;
                            }
                        }
                    }
                }
                else {
                    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();

fonte: https://gist.github.com/krisbulman/0f5e27bba375b151515d

De acordo com uma página no blog do MSDN IEInternals intitulada Limites da Folha de Estilo no Internet Explorer, os limites mostrados acima (31 folhas, 4095 regras por folha e 4 níveis) se aplicavam ao IE 6 ao IE 9. Os limites foram aumentados no IE 10 para os seguintes :

• Uma planilha pode conter até 65534 regras
• Um documento pode usar até 4095 folhas de estilo
• o aninhamento @import está limitado a níveis 4095 (devido ao limite da folha de estilo 4095)

Uma boa solução para esse problema para pessoas que usam o Grunt:

https://github.com/Ponginae/grunt-bless

As ferramentas para desenvolvedores da edição dev do FireFox mostram regras de CSS

Pode ser útil para aqueles que ainda lutam com versões mais antigas do IE / arquivos CSS grandes.

Site da FF Developer Edition

Eu acho que também vale a pena notar que qualquer arquivo CSS maior que 288kb só será lido até ~ 288kb. Qualquer coisa a seguir será completamente ignorada no IE <= 9.

http://joshua.perina.com/africa/gambia/fajara/post/internet-explorer-css-file-size-limit

Meu conselho é manter os arquivos CSS para aplicativos maiores divididos em módulos e componentes e manter um olho constante no tamanho do arquivo.