Los límites de Internet Explorer con las hojas de estilos y reglas Css 14.1.13

Los límites de Internet Explorer con las hojas de estilos y reglas Css

Hablando de Internet Explorer y Css a nadie sorprende ni es novedad a estas alturas las "singularidades" de esta familia de navegadores. La cantidad de bugs, errores, mala implementación o no soporte y los problemas que ello acarrea a los desarrolladores darían para una trilogía. Y en manos de Michael Moore para una docena de novenas.

Pero a parte de lo mencionado con las propiedades Css y sus valores, la familia de Internet Explorer tiene otras limitaciones o límites "globales" con los archivos Css.

Posíblemente la mayoría de visitantes de este blog nunca alcancen estos límites. Pero si usas compiladores (preprocesadores) Css como Less , Sass o Stylus o algún "template" como HTML5 boilerplate tienes unas cuantas papeletas para toparte con ellos.
Así que como nunca se sabe... aquí van:

31 hojas de estilo por archivo (página web)

Todos los IE´s (9 incluido) tienen un límite de 31 en la cantidad de hojas de estilos (archivo.css) que soportan y admiten en un "archivo web" (i.e.: pagina.html/pagina.php...)

Esto se traduce en que el archivo Css número 32 y mayores serán ignorados y por lo tanto no se aplicaran a la página.

Aquí tienes una demo del límite de 31 hojas de estilos en Internet Explorer.

Esta limitación podría ser solventada borrando todos los enlaces a los archivos Css y haciendo uso del método de llamada mediante @import (con un límite de 31 archivos Css en cada @import) o copiando todo a una o varias hojas de estilos (menos de 31).

Pero usando uno u otro método debes tener presente las otras dos limitaciones

4 niveles de profundidad en @import

Si superas el límite de las 31 hojas de estilos y decides hacer las llamadas mediante la regla @import que a su vez importan otros archivos Css has de saber que los Internet Explorer sólo alcanzan al cuarto nivel.

4095 reglas por hoja de estilo

Si sobrepasas los 31 archivos Css y decides agruparlos en uno o varios, debes tener presente que ninguno de ellos sobrepase las 4095 reglas. En el archivo Css que lo haga te encontrarás que la 4096 y siguiente no son reconocidas por los Internet Explorer.

Y esto es así. Con independencia del número de líneas que ocupe, de su peso o de los espacios en blanco que haya en él. Así que minificarlo (comprensión a una sóla línea eliminando espacios en blanco innecesarios) no es una opción.

Puedes verlo en esta realización.

El porqué de estos límites

Estas limitaciones en el manejo de los archivos de las hojas de estilos y el número de declaraciones están en que los IE´s utilizan un entero de 32 bits para identificar, clasificar y aplicar las reglas en cascada: cuatro de 5 bits cada uno (sheetIDs ) y un de 12 bits (ruleID).

El resultado de los 5bits es el límite de los 31 archivos y el de los 12 bits las 4095 reglas.

Los límites en IE 10

Los valores anteriores en Internet Explorer 10 han subido, quedando establecidos en:

• Una hoja de estilos puede contener hasta 65534 reglas
• Un documento puede utilizar hasta 4095 hojas de estilos
• El anidamiento en @Import se limita a 4095 niveles

Fuentes y lecturas complementarias:

1. La información y números en los límites han sido obtenidos del propio fabricante en su blog
2. Las 2 demos de los límites forman parte del artículo de telerik.com
3. Si has superado algún límite, alguna solución hay

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso