Limites des règles CSS d'Internet Explorer

J'ai lu des informations contradictoires concernant les limites CSS stupides d'Internet Explorer. Je suis (je crois comprendre) que vous ne pouvez avoir que 31 <style>et <link>balises (combinées), 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 - est-ce 4095 règles par document ou par feuille? Par exemple, puis-je <link>utiliser deux feuilles de style, chacune avec 4000 règles, et le faire fonctionner, ou cela va-t-il dépasser la limite?

Edition tierce 2018

Sur cet article de blog msdn stylesheet-limits-in-internet-explorer, des informations supplémentaires sont données.

En référence à ce qui suit de Microsoft:

• Limites de la feuille 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:

• Une feuille peut contenir jusqu'à 4095 sélecteurs (démo)
• Une feuille peut @importer jusqu'à 31 feuilles
• L'imbrication @import prend en charge jusqu'à 4 niveaux de profondeur

Les règles pour IE10 sont:

• Une feuille peut contenir jusqu'à 65534 sélecteurs
• Une feuille peut @importer jusqu'à 4095 feuilles
• L'imbrication @import 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 résumé 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 deuxième fichier (4095.css) a un sélecteur de moins, est lu et fonctionne parfaitement dans IE (même s'il a déjà lu un autre sélecteur 4095 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 représentants pour commenter l'extrait de code similaire ci-dessus, mais celui-ci compte les règles @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

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) s'appliquaient à 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 @import est limitée à 4095 niveaux (en raison de la limite de 4095 feuilles de style)

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

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

Les outils de développement dans l'édition de développement de FireFox affichent les règles CSS

Cela pourrait être pratique pour ceux d'entre vous qui se battent encore avec les anciennes versions d'IE / les gros fichiers CSS.

Site Web FF Developer Edition

Je pense qu'il vaut également la peine de noter que tout fichier CSS de plus de 288 Ko ne sera lu que jusqu'à ce ~ 288 Ko. Tout ce qui suit sera complètement ignoré dans IE <= 9.

http://joshua.perina.com/africa/gambia/fajara/post/internet-explorer-css-file-size-limit

Mon conseil est de conserver les fichiers CSS pour les applications plus volumineuses divisés en modules et composants et de garder un œil constant sur la taille des fichiers.