Límites de reglas de CSS de Internet Explorer

He leído información contradictoria con respecto a los límites de CSS tontos de Internet Explorer. Estoy (creo que estoy) comprendiendo que solo puedes tener 31 tags y (combinadas), y que cada hoja puede tener hasta 31 @import -s (por lo que 31 -s, cada una para 31 @import -s está bien, aunque loco).

Sin embargo, la regla 4095 es menos clara: ¿son estas 4095 reglas por documento o por hoja? Por ejemplo, ¿puedo a 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.

Refiriéndose a lo siguiente de Microsoft:

  • Límites de hoja de estilo en Internet Explorer
  • KB: una página web que usa estilos CSS no se procesa 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 nesting 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 nesting admite hasta 4095 niveles de profundidad

Probando 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, y se lee, y funciona perfectamente en IE (aunque ya ha leído otros 4095 selectores del archivo anterior.

Un script de JavaScript para contar tus reglas de 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  

No tengo suficientes representantes para comentar el fragmento similar anterior, pero este cuenta las reglas @media. Sueltalo 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  

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

  • Una hoja puede contener hasta 65534 reglas
  • Un documento puede usar hasta 4095 hojas de estilo
  • @import nesting está limitado a 4095 niveles (debido al límite de la hoja de estilos 4095)

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

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

Las herramientas de desarrollador dentro de la edición dev de FireFox muestran las reglas de CSS

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

Sitio web de FF Developer Edition

Herramientas de desarrollo - FF

Creo que también vale la pena señalar que cualquier archivo CSS de más de 288kb solo se leerá hasta que ~ 288kb. 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 del archivo.