Ograniczenia reguł CSS przeglądarki Internet Explorer

150

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.

Barg
źródło
1
Wygląda na to, że limit 4095 jest dla dokumentu zgodnie z habdas.org/2010/05/30/msie-4095-selector-limit, a jest tam również link do strony testowej, którą możesz wypróbować samemu
andyb
Dlaczego i tak potrzebujesz więcej niż 30 arkuszy stylów na jednej stronie? Dlaczego potrzebujesz 4000 reguł? Nawet moje najbardziej złożone strony mają zaledwie 1000 węzłów, więc aby osiągnąć limit, musiałbyś mieć ponad 4 reguły na węzeł ...
Niet the Dark Absol
@Kolink, niektóre (złe) systemy zarządzania treścią używają szablonów, co może prowadzić do dołączania wielu plików CSS. Niestety, <style>wielokrotnie widziałem, jak osiągnięto limit 31
andyb
@Kolink - komponuję moją aplikację internetową. W mojej obecnej próbie 30 komponentów = 30 (malutkich) arkuszy stylów plus inne typowe podejrzane, takie jak normalize.css. Innymi słowy, prawdopodobnie wdrażam coś podobnego do tego, co andyb określa jako „zły”. : P
Barg
Swoją witrynę też tworzę z komponentów, ale każda strona jasno określa, jakich komponentów potrzebuje i importuje je. Być może ładujesz komponenty, których nie potrzebujesz, lub może twoje komponenty są zbyt szczegółowe i powinieneś je pogrupować - nie mogę ocenić, nie wiedząc więcej.
Niet the Dark Absol

Odpowiedzi:

221

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

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.
isNaN1247
źródło
2
Właściwie to te same dwa linki mnie zdezorientowały. W bazie wiedzy jest napisane „Wszystkie reguły stylu po pierwszych 4095 regułach nie są stosowane.”, Co dla mnie oznacza, że ​​dotyczy to jednej strony, a drugi link mówi „Arkusz może zawierać do 4095 reguł”, co oznacza, że -arkusz.
Barg
2
Bardzo dziękuję - to potwierdziło, że jest to arkusz, a nie strona.
Barg
30
Należy zauważyć, że limit 4095 dotyczy selektorów , a nie reguł .
Christopher Cortez,
1
tylko dla wyjaśnienia: czy następujący wiersz liczyłby się jako jeden „selektor” czy dwa? div.oneclass, div.anotherstyle {color: green};
anthony
2
@anthony, dwa selektory, jedna reguła.
squidbe
116

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();
EpokK
źródło
2
Zapewniając to, jesteś święty. Miałem błąd, którego nie mogłem zlokalizować lokalnie, a ze względu na minifikację naszych zasobów w wersji produkcyjnej nie można było wyśledzić, co się dzieje. Miałem wrażenie, że przekroczyliśmy limit selektora IE, a Twój skrypt znalazł to dla mnie. Dziękuję bardzo!
robabby
9
Warto zauważyć, że nie powinieneś uruchamiać tego skryptu w IE, ponieważ nigdy nie wyemituje ostrzeżenia.
user123444555621
1
Dziękuję za scenariusz. Pomogło mi to zdebugować inny błąd
Jdahern
4
Ten skrypt jest niedokładny. Powinieneś dołączyć gałąź dla @mediareguł, zobacz stackoverflow.com/a/25089619/938089 .
Rob W
1
świetny scenariusz. pamiętaj, że jeśli arkusze stylów pochodzą z innej domeny niż strona internetowa, otrzymasz wartość null dla sheet.cssRules
CodeToad
34

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

krisbulman
źródło
1
To jest świetne. Dziękujemy za zmodyfikowanie skryptu w celu uwzględnienia zapytań o media. Bardzo, niesamowicie, super, bardzo pomocnie !!
tiffylou
1
Ten skrypt jest lepszy niż powyższy.
gkempkens
15

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)
Nocna sowa
źródło
1
Ponownie, limit nie polega na liczbie reguł , ale na liczbie selektorów .
connexo
Tekst „4095 reguł” lub „65534 reguły” pochodzi bezpośrednio z tekstu w poście na blogu MS IEInternals 2011 i można go również znaleźć w KB Q262161. To prawdopodobnie kwestia semantyki. W wielu definicjach „reguły” lub „zestawu reguł” „selektor” jest częścią „reguły” znajdującą się poza „blokiem deklaracji”, która może być pojedynczym selektorem lub grupą selektorów. Używając tej definicji, wszystkie reguły mają technicznie tylko jeden selektor, nawet jeśli ten selektor jest w rzeczywistości grupą określonych indywidualnych selektorów. -> ciąg dalszy ->
Night Owl
<- ciąg dalszy <- Autor bloga spekuluje w komentarzach, że wewnętrznie grupy selektorów są klonowane w taki sposób, że każdy pojedynczy selektor w grupie selektorów staje się własną regułą i jest liczony indywidualnie. Tak więc „65534 selektory” ma bardziej odpowiednie znaczenie w świecie rzeczywistym, ale „65534 reguły” jest nadal poprawne technicznie.
Night Owl
Potwierdziłem, że IE 10 ma wyższy limit (przypuszczam, że nowy limit to 65534, jak powiedział Night Owl?) Niż IE 9, używając istoty isNaN1247 ( gist.github.com/2225701 ) z IE 9 i IE 10: developer.microsoft. com / en-us / microsoft-edge / tools / vms / mac
David Winiecki
4

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

Narzędzia programistyczne - FF

Mike Hague
źródło
-1

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.

Shannon Hochkins
źródło
Z niektórych rozszerzonych badań wynika, że ​​nie jest to limit rozmiaru pliku, ale raczej limit selektora #. Nie mogłem znaleźć żadnej oficjalnej dokumentacji weryfikującej ten fakt.
Arya