Internet Explorer'ın CSS kuralları sınırları

Internet Explorer'ın saçma CSS sınırları ile ilgili çelişkili bilgileri okudum. Yalnızca 31'inizin <style>ve <link>etiketlerinizin (birleştirilmiş) olabileceğini ve her sayfanın 31'e kadar olabileceğini @import(yani 31 <link>-s, her biri 31 @import-s iyi, deli olsa da ) anlıyorum .

Ancak, 4095 kuralı daha az açıktır - bu 4095 kuralı belge veya sayfa başına mı? Örneğin <link>, her biri 4000 kural içeren iki stil sayfasına gidebilir miyim ve çalışmasını sağlayabilir miyim , yoksa bu sınırı aşabilir mi?

3. taraf düzenleme 2018

Bu msdn blog yazı stil-limitleri-in-internet-explorer hakkında daha fazla bilgi verilmektedir.

Microsoft'tan aşağıdakilere başvurarak:

• Internet Explorer'da Stil Sayfası Sınırları
• KB - CSS stilleri kullanan bir web sayfası Internet Explorer'da düzgün görüntülenmiyor

IE9 için kurallar :

• Bir sayfada en fazla 4095 seçici bulunabilir (Demo)
• Bir sayfa 31 sayfaya kadar içe aktarma yapabilir
• @import nesting 4 seviyeye kadar derinliği destekler

IE10 için kurallar :

• Bir sayfada 65534 adede kadar seçici bulunabilir
• Bir sayfa 4095 yaprağa kadar ithalat yapabilir
• @import nesting 4095 seviyeye kadar derinliği destekler

4095 kuralını sayfa sınırına göre test etme

Onaylama yoluyla, 3 dosyalı bir özgeçmiş oluşturdum . Bir HTML ve iki CSS dosyası.

• İlk dosya 4096 seçici içerir ve son seçicinin okunmadığı anlamına gelir.
• İkinci dosya (4095.css) daha az bir seçiciye sahiptir ve okunur ve IE'de mükemmel çalışır (önceki dosyadan başka bir 4095 seçiciyi zaten okumasına rağmen).

CSS kurallarınızı saymak için bir javascript betiği:

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();

Yukarıdaki benzer snippet hakkında yorum yapmak için yeterli temsilcim yok, ancak bu @media kurallarını sayar. Chrome konsoluna bırakın.

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();

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

MSDN IEInternals blogundaki Internet Explorer'da Stil Sayfası Sınırları başlıklı bir sayfaya göre , IE 6'ya IE 9'a uygulanan yukarıda gösterilen sınırlar (31 sayfa, yaprak başına 4095 kural ve 4 seviye). :

• Bir sayfada en fazla 65534 kural bulunabilir
• Bir belge en fazla 4095 stil sayfası kullanabilir
• @import iç içe yerleştirme 4095 düzeyleriyle sınırlıdır (4095 stil sayfası sınırı nedeniyle)

Grunt kullanan insanlar için bu soruna güzel bir çözüm:

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

FireFox dev sürümündeki geliştirici araçları CSS kurallarını gösterir

Hala eski IE sürümleri / büyük CSS dosyaları ile mücadele olanlar için kullanışlı olabilir.

FF Developer Edition Web Sitesi

Ayrıca 288kb'den büyük herhangi bir CSS dosyasının sadece ~ 288kb'ye kadar okunacağını da belirtmek gerekir. IE <= 9'da sonraki her şey göz ardı edilecektir.

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

Benim tavsiyem, daha büyük uygulamalar için CSS dosyalarının modüllere ve bileşenlere ayrılması ve dosya boyutuna sürekli olarak bakılmasıdır.