Limiti delle regole CSS di Internet Explorer

Ho letto informazioni contrastanti sui sciocchi limiti CSS di Internet Explorer. Capisco (penso di essere) che puoi avere solo 31 <style>e <link>tag (combinati) e che ogni foglio può avere fino a 31 @import-s (quindi 31 <link>-s, ciascuno a 31 @import-s va bene, anche se folle).

Tuttavia, la regola 4095 è meno chiara: si tratta di 4095 regole per documento o per foglio? Ad esempio, posso <link>fare due fogli di stile, ognuno con 4000 regole, e farlo funzionare, o questo supererà il limite?

Modifica di terze parti 2018

Su questo post sul blog di msdn sono disponibili ulteriori informazioni sui fogli di stile-limits-in-internet-explorer .

Riferendosi a quanto segue da Microsoft:

• Limiti del foglio di stile in Internet Explorer
• KB: una pagina Web che utilizza stili CSS non viene visualizzata correttamente in Internet Explorer

Le regole per IE9 sono:

• Un foglio può contenere fino a 4095 selettori (Demo)
• Un foglio può importare fino a 31 fogli
• Il nesting @import supporta fino a 4 livelli di profondità

Le regole per IE10 sono:

• Un foglio può contenere fino a 65534 selettori
• Un foglio può importare fino a 4095 fogli
• La nidificazione @import supporta fino a 4095 livelli di profondità

Test della regola 4095 per limite del foglio

A titolo di conferma, ho creato una sintesi con 3 file. Un HTML e due file CSS.

• Il primo file contiene 4096 selettori e significa che il selettore finale non viene letto.
• Il secondo file (4095.css) ha un selettore in meno, viene letto e funziona perfettamente in IE (anche se ha già letto altri 4095 selettori dal file precedente.

Uno script javascript per contare le tue regole 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();

Non ho abbastanza rappresentante per commentare lo snippet simile sopra, ma questo conta le regole @media. Rilascialo nella console di 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();

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

Secondo una pagina del blog IEInternals di MSDN intitolata Limiti del foglio di stile in Internet Explorer, i limiti mostrati sopra (31 fogli, 4095 regole per foglio e 4 livelli) applicati da IE 6 a IE 9. I limiti sono stati aumentati in IE 10 a quanto segue :

• Un foglio può contenere fino a 65534 regole
• Un documento può utilizzare fino a 4095 fogli di stile
• La nidificazione di @import è limitata a 4095 livelli (a causa del limite del foglio di stile 4095)

Una buona soluzione a questo problema per le persone che usano Grunt:

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

Gli strumenti per sviluppatori all'interno dell'edizione dev di FireFox mostrano le regole CSS

Potrebbe essere utile per quelli di voi che combattono ancora con versioni precedenti di IE / file CSS di grandi dimensioni.

Sito Web FF Developer Edition

Penso che valga anche la pena notare che qualsiasi file CSS di dimensioni superiori a 288 KB verrà letto solo fino a ~ 288 KB. Qualsiasi elemento successivo verrà completamente ignorato in IE <= 9.

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

Il mio consiglio è di mantenere i file CSS per le applicazioni più grandi suddivisi in moduli e componenti e tenere d'occhio costantemente la dimensione dei file.