Limites de regras CSS do Internet Explorer

150

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 .

Barg
fonte
1
Parece que o limite de 4095 é por documento de acordo com habdas.org/2010/05/30/msie-4095-selector-limit e há também um link para uma página de teste, você pode tentar-se
andyb
Por que você precisaria de mais de 30 folhas de estilo em uma única página? Por que você precisaria de 4.000 regras? Mesmo minhas páginas mais complexas mal superar 1.000 nós, então você teria que ter mais de 4 regras por média nó para atingir o limite ...
Niet o Absol escuro
@Kolink Alguns sistemas (ruins) de gerenciamento de conteúdo usam modelos que podem levar à inclusão de muitos arquivos CSS. Infelizmente, eu vi o <style>limite de 31 atingido em várias ocasiões
andyb 28/03
@ Kolink - Estou compondo meu aplicativo da web. Na minha tentativa atual, 30 componentes = 30 (minúsculas) folhas de estilo, além dos outros suspeitos comuns, como normalize.css. Em outras palavras, provavelmente estou implementando algo semelhante ao que andyb chama de 'ruim'. : P
Barg
Também estou criando componentes para meu site, mas cada página define claramente quais componentes ele precisa e os importa. Talvez você esteja carregando componentes de que não precisa, ou talvez seus componentes sejam muito específicos e você deva agrupar alguns - não posso julgar sem saber mais.
Niet the Dark Absol

Respostas:

221

Referindo o seguinte da Microsoft:

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.
isNaN1247
fonte
2
Na verdade, são esses mesmos dois links que me confundem. O KB diz "Todas as regras de estilo após as primeiras 4.095 regras não são aplicadas.", O que para mim implica que é por página, o outro link diz "Uma planilha pode conter até 4095 regras", o que implica que é por página. -Folha.
Barg
2
Muito obrigado - isso confirmou que é por folha, não por página.
Barg
30
Note-se que o limite 4095 se aplica a seletores , não a regras .
21813 Christopher Cortz
1
apenas para esclarecimento: a seguinte linha contaria como um "seletor" ou dois? div.oneclass, div.anotherstyle {color: green};
Anthony #
2
@anthony, dois seletores, uma regra.
Squidbe 30/05
116

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();
EpokK
fonte
2
Você é um santo por fornecer isso. Eu tinha um bug que não conseguia localizar localmente e, devido à nossa redução de ativos em prod, não foi possível rastrear o que estava errado. Tive a sensação de que estávamos acima do limite de seleção do IE, e seu script o encontrou para mim. Muito obrigado!
robabby
9
Vale ressaltar que você não deve executar esse script no IE, pois ele nunca emitirá o aviso.
user123444555621
1
Obrigado pelo script. Ele me ajudou a depurar um erro diferente
Jdahern
4
Este script é impreciso. Você deve incluir uma ramificação para @mediaregras, consulte stackoverflow.com/a/25089619/938089 .
Rob
1
ótimo roteiro. manter em mente que, se as folhas de estilo são de um domínio diferente do que a página da Web, você receberá valor nulo para sheet.cssRules
CodeToad
34

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

krisbulman
fonte
1
Isso é ótimo. Obrigado por editar o script para incluir consultas de mídia. Muito, incrivelmente, super, muito útil !!
Tiffylou
1
Este script é melhor que o descrito acima.
gkempkens
15

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)
Coruja noturna
fonte
1
Novamente, o limite não está no número de regras , mas no número de seletores .
connexo
O texto "4095 rules" ou "65534 rules" é diretamente do texto em uma postagem no blog do MS IEInternals 2011 e também pode ser encontrado no KB Q262161. Provavelmente é uma questão de semântica. Em muitas definições de "regra" ou "conjunto de regras", o "seletor" é a parte da "regra" fora do "bloco de declaração", que pode ser um único seletor ou um grupo de seletores. Usando essa definição, todas as regras tecnicamente têm apenas um seletor, mesmo que esse seletor seja realmente um grupo de seletores individuais específicos. -> continuação ->
coruja noturna
<- continua <- O autor do blog especula nos comentários que internamente os grupos de seletores são clonados de modo que cada seletor individual em um grupo de seletores se torne sua própria regra e seja contado individualmente. Assim, "65534 seletores" tem um significado mais relevante no mundo real, mas "65534 regras" ainda está tecnicamente correto.
Night Owl
Confirmei que o IE 10 tem um limite mais alto (suponho que o novo limite seja 65534 como o Night Owl disse?) Do que o IE 9 usando a essência do isNaN1247 ( gist.github.com/2225701 ) com o IE 9 e o IE 10: developer.microsoft. com / pt-br / microsoft-edge / tools / vms / mac
David Winiecki
4

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

Ferramentas de desenvolvimento - FF

Mike Hague
fonte
-1

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.

Shannon Hochkins
fonte
De alguma pesquisa extensa, não parece ser um limite de tamanho de arquivo, mas um limite de seletor #. Não encontrei nenhuma documentação oficial comprovando esse fato.
Arya #