Ograniczenia reguł CSS przeglądarki Internet Explorer

Przeczytałem sprzeczne informacje dotyczące głupich limitów CSS Internet Explorera. Rozumiem (myślę, że rozumiem), że możesz mieć tylko 31 <style>i <link>tagi (połączone), i że każdy arkusz może mieć do 31 @importsekund (więc 31-s <link>, każdy do 31-s @importjest w porządku, aczkolwiek szalony).

Jednak zasada 4095 jest mniej jasna - czy to 4095 reguł na dokument, czy na arkusz? Na przykład, czy mogę <link>do dwóch arkuszy stylów, każdy z 4000 regułami i czy to zadziała, czy to przekroczy limit?

Edycja zewnętrzna 2018

W tym wpisie na blogu msdn stylesheet-limits-in-internet-explorer podano dalsze informacje.

Powołując się na następujące informacje od firmy Microsoft:

• Limity arkusza stylów w programie Internet Explorer
• KB - strona internetowa, która używa stylów CSS, nie jest poprawnie renderowana w przeglądarce Internet Explorer

Zasady dla IE9 są następujące:

• Arkusz może zawierać do 4095 selektorów (Demo)
• Arkusz może @import do 31 arkuszy
• Zagnieżdżanie @import obsługuje do 4 poziomów głębokości

Zasady IE10 są następujące:

• Arkusz może zawierać do 65534 selektorów
• Arkusz może @import do 4095 arkuszy
• Zagnieżdżanie @import obsługuje do 4095 poziomów głębokości

Testowanie reguły 4095 według limitu arkuszy

Dla potwierdzenia utworzyłem streszczenie z 3 plikami. Jeden plik HTML i dwa pliki CSS.

• Pierwszy plik zawiera 4096 selektorów i oznacza, że ​​jego ostateczny selektor nie jest wczytywany.
• Drugi plik (4095.css) ma o jeden selektor mniej, jest wczytywany i działa doskonale w IE (mimo że już czyta inne selektory 4095 z poprzedniego pliku.

Skrypt javascript do liczenia reguł 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();

Nie mam wystarczającej liczby przedstawicieli, aby skomentować powyższy podobny fragment, ale ten uwzględnia zasady @media. Upuść go w konsoli 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();

źródło: https://gist.github.com/krisbulman/0f5e27bba375b151515d

Według strony na blogu MSDN IEInternals zatytułowanej Limity arkusza stylów w przeglądarce Internet Explorer ograniczenia pokazane powyżej (31 arkuszy, 4095 reguł na arkusz i 4 poziomy) stosowane od IE 6 do IE 9. Limity zostały zwiększone w IE 10 do następujących :

• Arkusz może zawierać do 65534 reguł
• Dokument może wykorzystywać do 4095 arkuszy stylów
• Zagnieżdżanie @import jest ograniczone do 4095 poziomów (ze względu na limit arkuszy stylów 4095)

Dobre rozwiązanie tego problemu dla osób używających Grunt:

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

Narzędzia deweloperskie w wersji deweloperskiej FireFox pokazują reguły CSS

Może być przydatne dla tych z Was, którzy wciąż walczą ze starszymi wersjami IE / dużymi plikami CSS.

Witryna internetowa FF Developer Edition

Myślę, że warto również zauważyć, że każdy plik CSS większy niż 288kb zostanie odczytany tylko do ~ 288kb. Wszystko, co nastąpi później, zostanie całkowicie zignorowane w IE <= 9.

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

Radzę, aby pliki CSS dla większych aplikacji były podzielone na moduły i komponenty oraz stale obserwowały rozmiar plików.