Limites des règles CSS d'Internet Explorer
J'ai lu des informations contradictoires concernant les limites CSS stupides d'Internet Explorer. Je pense (je pense) comprendre que vous ne pouvez avoir que 31 balises [combinées) <style> Et <link>, Et que chaque feuille peut avoir jusqu'à 31 @import - s ( donc 31 <link> - s, chacun à 31 @import - s est bien, bien que fou.
Cependant, la règle 4095 est moins claire - s'agit-il de règles 4095 par document ou par feuille? Par exemple, est-ce que je peux <link> Créer deux feuilles de style, chacune avec 4000 règles, et que ça fonctionne, ou est-ce que cela va briser la limite?
3ème partie modifier 2018
Sur ce message de blog msdn stylesheet-limits-in-Internet-Explorer des informations supplémentaires sont données.
En référence à Microsoft:
- Limites de la feuille de style dans Internet Explorer
- Ko - Une page Web utilisant des styles CSS ne s'affiche pas correctement dans Internet Explorer
Les règles pour IE9 sont les suivantes:
- A sheet peut contenir jusqu'à 4095 sélecteurs (Demo)
- A sheet peut @ importer jusqu'à 31 feuilles
- @import imbrication prend en charge jusqu'à 4 niveaux de profondeur
Les règles pour IE10 sont les suivantes:
- A sheet peut contenir jusqu'à 65534 sélecteurs
- A sheet peut @ importer jusqu'à 4095 feuilles
- @import imbrication prend en charge jusqu'à 4095 niveaux de profondeur
Test de la règle 4095 par limite de feuille
En guise de confirmation, j'ai créé un Gist avec 3 fichiers. Un HTML et deux fichiers CSS.
- Le premier fichier contient 4096 sélecteurs et signifie que son sélecteur final n'est pas lu.
- Le second fichier (4095.css) a un sélecteur de moins, il est lu et fonctionne parfaitement dans IE (même s'il a déjà lu 4095 sélecteurs supplémentaires du fichier précédent.
Un script javascript pour compter vos règles 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();
Je n'ai pas assez de rep pour commenter l'extrait similaire ci-dessus, mais celui-ci compte les règles @media. Déposez-le dans Chrome console.
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();source: https://Gist.github.com/krisbulman/0f5e27bba375b151515d
Selon une page du blog MSDN IEInternals intitulée Limites de feuille de style dans Internet Explorer les limites indiquées ci-dessus (31 feuilles, 4095 règles par feuille et 4 niveaux) appliquées à IE = 6 à IE 9. Les limites ont été augmentées dans IE 10 à ce qui suit:
- Une feuille peut contenir jusqu'à 65 534 règles
- Un document peut utiliser jusqu'à 4095 feuilles de style
- L'imbrication @import est limitée à 4095 niveaux (en raison de la limite de 4095 feuilles de style)
Une bonne solution à ce problème pour les utilisateurs de Grunt:
Les outils de développement dans FireFox dev edition indiquent les règles CSS
Peut-être utile pour ceux qui se battent encore avec des versions plus anciennes IE versions/fichiers CSS volumineux.
