Les limites des règles CSS d'Internet Explorer

Question

J'ai lu des informations contradictoires concernant les limites stupides des CSS d'Internet Explorer. Je crois comprendre que l'on ne peut avoir que 31 % de CSS. <style> y <link> (combinés), et que chaque feuille peut avoir jusqu'à 31 @import -s (so 31 <link> -s, chacun à 31 @import -s est bien, bien qu'insensé).

Cependant, la règle 4095 est moins claire - s'agit-il de 4095 règles par document, ou par feuille ? Par exemple, puis-je <link> à deux feuilles de style, chacune avec 4000 règles, et que cela fonctionne, ou cela va-t-il briser la limite ?

Edition tierce partie 2018

Sur ce msdn blog post stylesheet-limits-internet-explorer d'autres informations sont données.

Answer 1

En se référant à ce qui suit de Microsoft :

• Limites des feuilles de style dans Internet Explorer
• KB - Une page Web qui utilise des styles CSS ne s'affiche pas correctement dans Internet Explorer

Les règles pour IE9 sont :

• A feuille peut contenir jusqu'à 4095 sélecteurs (Démo)
• A feuille peut @importer jusqu'à 31 feuilles
• L'imbrication des importations prend en charge jusqu'à 4 niveaux de profondeur.

Les règles pour IE10 sont :

• A feuille peut contenir jusqu'à 65534 sélecteurs
• A feuille peut @importer jusqu'à 4095 feuilles
• L'imbrication des importations 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 fichier HTML, et deux fichiers CSS.

• Le premier fichier contient 4096 sélecteurs et signifie que son sélecteur final n'est pas lu.
• Le deuxième 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 autres sélecteurs du fichier précédent).

Answer 2

Un javascript script 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();

Answer 3

Je n'ai pas assez de crédit pour commenter l'extrait similaire ci-dessus, mais celui-ci respecte les règles de l'@media. Déposez-le dans la console 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();

source : https://gist.github.com/krisbulman/0f5e27bba375b151515d

Answer 4

Selon une page du blog MSDN IEInternals intitulée Limites des feuilles de style dans Internet Explorer les limites indiquées ci-dessus (31 feuilles, 4095 règles par feuille et 4 niveaux) s'appliquent à IE 6 à IE 9. Les limites ont été augmentées dans IE 10 comme suit :

• Une feuille peut contenir jusqu'à 65534 règles.
• Un document peut utiliser jusqu'à 4095 feuilles de style.
• L'imbrication des importations est limitée à 4095 niveaux (en raison de la limite de 4095 feuilles de style).

Answer 5

Une bonne solution à ce problème pour les personnes utilisant Grunt :

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