puntos - selectores css
Límites de reglas de CSS de Internet Explorer (7)
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.
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 etiquetas <style> y <link> (combinadas), y que cada hoja puede tener hasta 31 @import -s (por lo que 31 <link> -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 <link> a dos hojas de estilo, cada una con 4000 reglas, y hacer que funcione, o esto romperá el límite?
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 aumentaron 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)
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.
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 <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
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 <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();
Una buena solución a este problema para las personas que usan Grunt: