Límites de reglas CSS de Internet Explorer

150

He leído información contradictoria sobre los límites tontos de CSS de Internet Explorer. Estoy (creo que estoy) entendiendo que solo puede tener 31 <style>y <link>etiquetas (combinadas), y que cada hoja puede tener hasta 31 @import-s (por lo tanto, 31 <link>-s, cada una a 31 @import-s está bien, aunque sea una locura).

Sin embargo, la regla 4095 es menos clara: ¿son estas reglas 4095 por documento o por hoja? Por ejemplo, ¿puedo <link>usar dos hojas de estilo, cada una con 4000 reglas, y hacer que funcione, o esto romperá el límite?

Edición de terceros 2018

En esta publicación de blog msdn stylesheet-limits-in-internet-explorer se proporciona más información.

Barg
fuente
1
Parece que el límite de 4095 es por documento de acuerdo con habdas.org/2010/05/30/msie-4095-selector-limit y también hay un enlace a una página de prueba que puede probar usted mismo
andyb
¿Por qué necesitarías más de 30 hojas de estilo en una sola página? ¿Por qué necesitarías 4,000 reglas? Incluso mis páginas más complejas apenas superan los 1,000 nodos, por lo que tendrías que tener más de 4 reglas por promedio de nodo para alcanzar el límite ...
Niet the Dark Absol
@Kolink algunos (malos) sistemas de administración de contenido usan plantillas que pueden llevar a que se incluyan muchos archivos CSS. Desafortunadamente, he visto el <style>límite de 31 alcanzado en varias ocasiones
andyb
@ Kolink: estoy componiendo mi aplicación web. En mi intento actual, 30 componentes = 30 hojas de estilo (pequeñas), más los otros sospechosos habituales como normalize.css. En otras palabras, probablemente estoy implementando algo similar a lo que andyb se refiere como "malo". : P
Barg
También estoy haciendo mi sitio con componentes, pero cada página define claramente qué componentes necesita y los importa. Quizás esté cargando componentes que no necesita, o quizás sus componentes sean demasiado específicos y deba agruparlos, no puedo juzgarlos sin saber más.
Niet the Dark Absol

Respuestas:

221

En referencia a lo siguiente de Microsoft:

Las reglas para IE9 son:

  • Una hoja puede contener hasta 4095 selectores (Demo)
  • Una hoja puede importar hasta 31 hojas
  • @import anidando admite hasta 4 niveles de profundidad

Las reglas para IE10 son:

  • Una hoja puede contener hasta 65534 selectores
  • Una hoja puede @ importar hasta 4095 hojas
  • @import anidando soporta hasta 4095 niveles de profundidad

Prueba de la regla 4095 por límite de hoja

A modo de confirmación, he creado una esencia con 3 archivos. Un HTML y dos archivos CSS.

  • El primer archivo contiene 4096 selectores y significa que su selector final no se lee.
  • El segundo archivo (4095.css) tiene un selector menos, se lee y funciona perfectamente en IE (aunque ya ha leído otros 4095 selectores del archivo anterior.
isNaN1247
fuente
2
En realidad, son esos mismos dos enlaces los que me han confundido. El KB dice "No se aplican todas las reglas de estilo después de las primeras 4.095 reglas", lo que para mí implica que es por página, el otro enlace dice "Una hoja puede contener hasta 4095 reglas", lo que implica que es por -sábana.
Barg
2
Muchas gracias, eso ha confirmado que es por hoja, no por página.
Barg
30
Cabe señalar que el límite de 4095 se aplica a los selectores , no a las reglas .
Christopher Cortez
1
solo para aclarar: ¿la siguiente línea contaría como un "selector" o dos? div.oneclass, div.anotherstyle {color: green};
Anthony
2
@anthony, dos selectores, una regla.
squidbe
116

Un script javascript para contar sus reglas 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
fuente
2
Eres un santo por proporcionar esto. Tuve un error que no pude localizar localmente, y debido a nuestra minificación de activos en producción, no fue posible rastrear lo que estaba mal. Tenía la sensación de que estábamos por encima del límite de selección de IE, y su script lo encontró por mí. Muchas gracias!
robabby
9
Vale la pena señalar que no debe ejecutar este script en IE, ya que nunca emitirá la advertencia.
user123444555621
1
Gracias por el guion. Me ayudó a depurar un error diferente
Jdahern,
44
Este script es inexacto. Debe incluir una rama para las @mediareglas, consulte stackoverflow.com/a/25089619/938089 .
Rob W
1
Gran guión. tenga en cuenta que si las hojas de estilo son de un dominio diferente al de la página web, obtendrá un valor nulo para sheet.cssRules
CodeToad el
34

No tengo suficiente representante para comentar el fragmento similar anterior, pero este cuenta las reglas de @media. Déjalo en la consola de 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();

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

krisbulman
fuente
1
Esto es genial. Gracias por editar el script para incluir consultas de medios. Muy, increíblemente, super, muy útil.
tiffylou
1
Este script es mejor que el anterior.
gkempkens
15

De acuerdo con una página en el blog de MSDN IEInternals titulada Stylesheet Limits en Internet Explorer, los límites que se muestran arriba (31 hojas, 4095 reglas por hoja y 4 niveles) se aplicaron a IE 6 a IE 9. Los límites se incrementaron en IE 10 a lo siguiente :

  • Una hoja puede contener hasta 65534 reglas
  • Un documento puede usar hasta 4095 hojas de estilo
  • La anidación de @import está limitada a 4095 niveles (debido al límite de la hoja de estilo 4095)
Noctámbulo
fuente
1
Nuevamente, el límite no está en el número de reglas , sino en el número de selectores .
connexo
El texto "4095 reglas" o "65534 reglas" es directamente del texto en una publicación de blog MS IEInternals 2011 y también se puede encontrar en KB Q262161. Es probable que sea una cuestión de semántica. En muchas definiciones de "regla" o "conjunto de reglas", el "selector" es la porción de la "regla" fuera del "bloque de declaración" que puede ser un solo selector o un grupo de selectores. Usando esa definición, todas las reglas técnicamente tienen un solo selector, incluso si ese selector es en realidad un grupo de selectores individuales específicos. -> continúa ->
Night Owl
<- continúa <- El autor del blog especula en los comentarios que internamente los grupos de selectores se clonan de tal manera que cada selector individual en un grupo de selectores se convierte en su propia regla y se cuenta individualmente. Por lo tanto, "65534 selectores" tiene un significado más relevante en el mundo real, pero las "reglas 65534" siguen siendo técnicamente correctas.
Night Owl
Confirmé que IE 10 tiene un límite más alto (supongo que el nuevo límite es 65534 como dijo Night Owl?) Que IE 9 al usar isNaN1247's gist ( gist.github.com/2225701 ) con IE 9 e IE 10: developer.microsoft. com / es-us / microsoft-edge / tools / vms / mac
David Winiecki
4

Las herramientas para desarrolladores dentro de la edición de desarrollo de FireFox muestran reglas CSS

Puede ser útil para aquellos de ustedes que todavía luchan con versiones anteriores de IE / archivos CSS grandes.

Sitio web de FF Developer Edition

Herramientas de desarrollo - FF

Mike Hague
fuente
-1

Creo que también vale la pena señalar que cualquier archivo CSS de más de 288 kb solo se leerá hasta ese ~ 288 kb. Cualquier cosa posterior será completamente ignorada en IE <= 9.

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

Mi consejo es mantener los archivos CSS para aplicaciones más grandes divididos en módulos y componentes y vigilar constantemente el tamaño de los archivos.

Shannon Hochkins
fuente
Según algunas investigaciones extendidas, no parece que sea un límite de tamaño de archivo, sino un límite de selector #. No pude encontrar ninguna documentación oficial que verifique este hecho.
Arya