Batas aturan CSS Internet Explorer


150

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.


1
Sepertinya batas 4.095 adalah per dokumen menurut habdas.org/2010/05/30/msie-4095-selector-limit dan ada juga tautan ke halaman pengujian yang bisa Anda coba sendiri
andyb

Mengapa Anda membutuhkan lebih dari 30 lembar gaya pada satu halaman? Mengapa Anda membutuhkan 4.000 aturan? Bahkan halaman saya yang paling rumit hampir tidak mendapatkan lebih dari 1.000 node, jadi Anda harus memiliki lebih dari 4 aturan per rata-rata node untuk mencapai batas ...
Niet the Dark Absol

@Kolink beberapa sistem manajemen konten (buruk) menggunakan templat yang dapat menyebabkan banyak file CSS disertakan. Sayangnya, saya telah melihat <style>batas 31 tercapai pada beberapa kesempatan
andyb

@ Kolink - Saya membuat komponen aplikasi web saya. Dalam upaya saya saat ini, 30 komponen = 30 stylesheet, ditambah tersangka biasa lainnya seperti normalize.css. Dengan kata lain, saya mungkin menerapkan sesuatu yang mirip dengan apa yang disebut andyb sebagai 'buruk'. : P
Barg

Saya membuat situs saya dari komponen juga, tetapi setiap halaman jelas mendefinisikan komponen mana yang dibutuhkan dan mengimpornya. Mungkin Anda memuat komponen yang tidak Anda butuhkan, atau mungkin komponen Anda terlalu spesifik dan Anda harus mengelompokkannya bersama-sama - Saya tidak bisa menilai tanpa tahu lebih banyak.
Niet the Dark Absol

Jawaban:


221

Mengacu yang berikut dari Microsoft:

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.

2
Sebenarnya dua tautan yang sama itulah yang membuat saya bingung. KB mengatakan "Semua aturan gaya setelah 4.095 aturan pertama tidak berlaku." -lembar.
Barg

2
Terima kasih banyak - yang telah mengkonfirmasi bahwa ini adalah per-lembar, bukan per-halaman.
Barg

30
Perlu dicatat bahwa batas 4095 berlaku untuk penyeleksi , bukan aturan .
Christopher Cortez

1
hanya untuk klarifikasi: apakah baris berikut akan dihitung sebagai satu "pemilih", atau dua? div.oneclass, div.anotherstyle {color: green};
anthony

2
@anthony, dua penyeleksi, satu aturan.
squidbe

116

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

2
Anda adalah orang suci untuk menyediakan ini. Saya memiliki bug yang tidak dapat saya temukan secara lokal, dan karena minifikasi aset kami di prod, tidak mungkin untuk melacak apa yang salah. Saya merasa kami berada di atas batas pemilih IE, dan skrip Anda menemukannya untuk saya. Terima kasih banyak!
Robabby

9
Perlu dicatat bahwa Anda tidak boleh menjalankan skrip ini di IE, karena tidak akan pernah memancarkan peringatan.
user123444555621

1
Terima kasih untuk skripnya. Ini membantu saya men-debug kesalahan yang berbeda
Jdahern

4
Skrip ini tidak akurat. Anda harus menyertakan cabang untuk @mediaaturan, lihat stackoverflow.com/a/25089619/938089 .
Rob W

1
naskah yang bagus. perlu diingat bahwa jika stylesheet berasal dari domain yang berbeda dari halaman web, Anda akan mendapatkan nilai nol untuk sheet.cssRules
CodeToad

34

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


1
Ini bagus. Terima kasih telah mengedit skrip untuk memasukkan pertanyaan media. Sangat, sangat, sangat, sangat membantu !!
tiffylou

1
Script ini lebih baik daripada yang di atas.
gkempkens

15

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)

1
Sekali lagi, batasnya bukan pada jumlah aturan , tetapi dalam jumlah pemilih .
connexo

Teks "4095 aturan" atau "65534 aturan" langsung dari teks pada posting blog MS IEInternals 2011 dan juga dapat ditemukan di KB Q262161. Ini mungkin masalah semantik. Dalam banyak definisi "aturan" atau "set aturan" "pemilih" adalah bagian dari "aturan" di luar "blok deklarasi" yang dapat berupa pemilih tunggal atau grup pemilih. Menggunakan definisi itu semua aturan secara teknis hanya memiliki satu pemilih bahkan jika pemilih itu sebenarnya adalah sekelompok penyeleksi individu tertentu. -> lanjutan ->
Night Owl

<- lanjutan <- Penulis blog berspekulasi dalam komentar bahwa secara internal grup pemilih diklon sedemikian rupa sehingga setiap pemilih individu dalam grup pemilih menjadi aturannya sendiri dan dihitung secara individual. Jadi "65534 penyeleksi" memiliki makna dunia nyata yang lebih relevan tetapi "65534 aturan" secara teknis masih benar.
Night Owl

Saya mengkonfirmasi bahwa IE 10 memiliki batas yang lebih tinggi (saya kira batas baru adalah 65534 seperti yang dikatakan Night Owl?) Daripada IE 9 dengan menggunakan inti isNaN1247 ( gist.github.com/2225701 ) dengan IE 9 dan IE 10: developer.microsoft. com / en-us / microsoft-edge / tools / vms / mac
David Winiecki



-1

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.


Dari beberapa penelitian yang diperluas, sepertinya ini bukan batas ukuran file, melainkan batas pemilih. Saya tidak dapat menemukan dokumentasi resmi yang memverifikasi fakta ini.
Arya

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.