กฎ CSS ที่ จำกัด ของ Internet Explorer

ฉันได้อ่านข้อมูลที่ขัดแย้งกันเกี่ยวกับขีด จำกัด CSS ที่งี่เง่าของ Internet Explorer แล้ว ฉัน (คิดว่าฉันเป็น) เข้าใจว่าคุณสามารถมี 31 <style>และ<link>แท็ก (รวมกัน) และแต่ละแผ่นสามารถมีได้ถึง 31 @import-s (ดังนั้น 31 <link>-s แต่ละคนถึง 31 @import-s เป็นเรื่องที่ดีแม้ว่าจะบ้า)

อย่างไรก็ตามกฎ 4095 นั้นชัดเจนน้อยกว่า - นี่คือกฎ 4095 ต่อเอกสารหรือต่อแผ่นงานหรือไม่ ตัวอย่างเช่นฉันสามารถ<link>ใช้สไตล์ชีตสองแบบแต่ละแบบมี 4,000 กฎและใช้งานได้หรือไม่หรือจะทำให้ขีด จำกัด หรือไม่

บุคคลที่สามแก้ไข 2018

ในบทความนี้คุณจะได้รับข้อมูลเพิ่มเติมเกี่ยวกับการโพสต์สไตล์ชีตข้อ จำกัด ในอินเทอร์เน็ต explorer

อ้างถึงต่อไปนี้จาก Microsoft:

• ขีด จำกัด ของ Stylesheet ใน Internet Explorer
• KB - เว็บเพจที่ใช้สไตล์ CSS ไม่สามารถแสดงผลได้อย่างถูกต้องใน Internet Explorer

กฎสำหรับIE9คือ:

• แผ่นอาจจะมีถึง 4095 เตอร์(Demo)
• แผ่นหนึ่งอาจนำเข้า @ ได้ถึง 31 แผ่น
• @import nesting รองรับได้สูงสุด 4 ระดับ

กฎสำหรับIE10คือ:

• แผ่นหนึ่งอาจมีตัวเลือกได้ถึง 65534 ตัว
• แผ่นหนึ่งอาจนำเข้า @ ได้ถึง 4095 แผ่น
• @import nesting รองรับได้มากถึง 4095 ระดับ

ทดสอบกฎ 4095 ตามขีด จำกัด ชีต

โดยวิธีการยืนยันฉันได้สร้างส่วนสำคัญที่มี 3 ไฟล์ หนึ่งไฟล์ HTML และไฟล์ CSS สองไฟล์

• ไฟล์แรกมีตัวเลือก 4096 และหมายความว่าตัวเลือกสุดท้ายไม่ได้รับการอ่าน
• ไฟล์ที่สอง (4095.css) มีตัวเลือกน้อยกว่าหนึ่งตัวและได้รับการอ่านและทำงานได้อย่างสมบูรณ์ใน IE (แม้ว่ามันจะอ่านตัวเลือกอื่นอีก 4095 ตัวจากไฟล์ก่อนหน้า

สคริปต์จาวาสคริปต์เพื่อนับกฎ 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();

ฉันมีตัวแทนไม่เพียงพอที่จะแสดงความคิดเห็นในตัวอย่างที่คล้ายกันข้างต้น แต่อันนี้นับเป็นกฎ @media วางไว้ในคอนโซล 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();

แหล่งที่มา: https://gist.github.com/krisbulman/0f5e27bba375b151515d

ตามหน้าในบล็อก MSDN IEInternals ชื่อStylesheet Limits ใน Internet Explorerขีด จำกัด ที่แสดงด้านบน (31 แผ่น 4095 กฎต่อแผ่นและ 4 ระดับ) ที่ใช้กับ IE 6 ถึง IE 9 ข้อ จำกัด เพิ่มขึ้นใน IE 10 ต่อไปนี้ :

• แผ่นงานอาจมีกฎได้ถึง 65534 กฎ
• เอกสารอาจใช้สไตล์ได้ถึง 4095 แผ่น
• @import nesting ถูก จำกัด ที่ระดับ 4095 (เนื่องจากขีด จำกัด ของสไตล์ชีท 4095)

ทางออกที่ดีสำหรับปัญหานี้สำหรับผู้ใช้ Grunt:

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

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ใน FireFox dev edition แสดงกฎ CSS

อาจเป็นประโยชน์สำหรับผู้ที่ยังต่อสู้กับไฟล์ IE เวอร์ชันเก่า / ไฟล์ CSS ขนาดใหญ่

เว็บไซต์ FF Developer Edition

ฉันคิดว่ามันก็น่าสังเกตว่าไฟล์ CSS ใด ๆ ที่มีขนาดใหญ่กว่า 288kb จะอ่านได้จนกว่าจะถึง ~ 288kb สิ่งใดหลังจากนั้นจะถูกละเว้นอย่างสมบูรณ์ใน IE <= 9

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

คำแนะนำของฉันคือเก็บไฟล์ CSS สำหรับแอปพลิเคชันขนาดใหญ่แยกเป็นโมดูลและส่วนประกอบและคอยดูขนาดไฟล์อย่างต่อเนื่อง