Límites de reglas CSS de Internet Explorer

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.

En referencia a lo siguiente de Microsoft:

• Límites de hoja de estilo en Internet Explorer
• KB: una página web que utiliza estilos CSS no se representa correctamente en Internet Explorer

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.

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();

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

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)

Una buena solución a este problema para las personas que usan Grunt:

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

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

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.