Batas aturan CSS Internet Explorer

Saya telah membaca informasi yang bertentangan mengenai batas CSS konyol Internet Explorer. Saya (pikir saya) mengerti bahwa Anda hanya dapat memiliki 31 <style>dan <link>tag (digabungkan), dan bahwa setiap lembar dapat memiliki hingga 31 @import-s (jadi 31 <link>-s, masing-masing hingga 31 @import-s baik-baik saja, walaupun gila).

Namun, aturan 4095 kurang jelas - apakah ini 4.095 aturan per dokumen, atau per lembar? Misalnya, dapatkah saya menggunakan <link>dua lembar gaya, masing-masing dengan 4000 aturan, dan membuatnya berfungsi, atau akankah ini melanggar batas?

Sunting pihak ketiga 2018

Pada posting blog msdn ini stylesheet-limit-in-internet-explorer informasi lebih lanjut diberikan.

Mengacu yang berikut dari Microsoft:

• Batas Stylesheet di Internet Explorer
• KB - Halaman web yang menggunakan gaya CSS tidak dirender dengan benar di Internet Explorer

Aturan untuk IE9 adalah:

• Sebuah lembar dapat berisi hingga 4095 penyeleksi (Demo)
• Sebuah sheet dapat @import hingga 31 sheet
• @import nesting mendukung hingga 4 level

Aturan untuk IE10 adalah:

• Sebuah lembar dapat berisi hingga 65.534 pemilih
• Sebuah sheet dapat @import hingga 4095 sheet
• @import nesting mendukung hingga level 4095

Menguji aturan 4095 dengan batas lembar

Sebagai konfirmasi, saya telah membuat inti dengan 3 file. Satu HTML, dan dua file CSS.

• File pertama berisi 4096 penyeleksi dan berarti pemilih terakhirnya tidak dapat dibaca.
• File kedua (4095.css) memiliki satu pemilih lebih sedikit, dan dapat dibaca, dan berfungsi dengan baik di IE (meskipun sudah membaca pemilih 4095 lain dari file sebelumnya.

Skrip javascript untuk menghitung aturan CSS Anda:

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

Saya tidak punya cukup perwakilan untuk mengomentari cuplikan serupa di atas, tetapi yang ini menghitung aturan @ media. Letakkan di konsol 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();

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

Menurut sebuah halaman di blog MSDN IEInternals yang berjudul Stylesheet Limits di Internet Explorer batas yang ditunjukkan di atas (31 lembar, 4095 aturan per lembar, dan 4 level) diterapkan untuk IE 6 hingga IE 9. Batas meningkat di IE 10 sebagai berikut :

• Lembar dapat berisi hingga 65534 aturan
• Dokumen dapat menggunakan hingga 4095 stylesheet
• @import nesting terbatas pada level 4.095 (karena batas stylesheet 4.095)

Solusi yang bagus untuk masalah ini bagi orang yang menggunakan Grunt:

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

Alat pengembang dalam FireFox dev edition menunjukkan aturan CSS

Mungkin berguna bagi Anda yang masih berkelahi dengan versi IE lama / file CSS besar.

Situs web Edisi Pengembang FF

Saya pikir itu juga perlu dicatat bahwa file CSS yang lebih besar dari 288kb hanya akan dibaca sampai ~ 288kb. Apa pun setelahnya akan sepenuhnya diabaikan di IE <= 9.

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

Saran saya adalah menjaga file CSS untuk aplikasi yang lebih besar dipecah menjadi modul & komponen dan terus mengawasi filesize.