Giới hạn quy tắc CSS của Trình thám hiểm Internet

Tôi đã đọc thông tin mâu thuẫn về các giới hạn CSS ngớ ngẩn của Internet Explorer. Tôi (nghĩ rằng tôi) hiểu rằng bạn chỉ có thể có 31 <style>và <link>thẻ (kết hợp) và mỗi tờ có thể có tối đa 31 @importgiây (vì vậy 31 <link>giây, mỗi đến 31 @importgiây đều ổn, mặc dù điên rồ).

Tuy nhiên, quy tắc 4095 ít rõ ràng hơn - đây là quy tắc 4095 cho mỗi tài liệu hay trên mỗi tờ? Chẳng hạn, tôi có thể <link>hai biểu định kiểu, mỗi biểu đồ có 4000 quy tắc và có hoạt động không, hoặc điều này có phá vỡ giới hạn không?

Chỉnh sửa bên thứ 3 năm 2018

Trên blog này msd bài viết biểu định kiểu-giới hạn trong internet-explorer thông tin thêm được cung cấp.

Giới thiệu những điều sau từ Microsoft:

• Giới hạn biểu định kiểu trong Internet Explorer
• KB - Một trang web sử dụng các kiểu CSS không hiển thị chính xác trong Internet Explorer

Các quy tắc cho IE9 là:

• Một tờ có thể chứa tới 4095 bộ chọn (Bản trình diễn)
• Một tờ có thể @import tối đa 31 tờ
• @import lồng nhau hỗ trợ sâu tới 4 cấp

Các quy tắc cho IE10 là:

• Một tờ có thể chứa tới 65534 bộ chọn
• Một tờ có thể @import lên tới 4095 tờ
• @import lồng nhau hỗ trợ sâu tới 4095 cấp

Kiểm tra quy tắc 4095 theo giới hạn trang tính

Bằng cách xác nhận, tôi đã tạo ra một ý chính với 3 tệp. Một HTML và hai tệp CSS.

• Tệp đầu tiên chứa 4096 bộ chọn và có nghĩa là bộ chọn cuối cùng của nó không được đọc.
• Tệp thứ hai (4095.css) có một bộ chọn ít hơn và được đọc và hoạt động hoàn hảo trong IE (mặc dù nó đã đọc 4095 bộ chọn khác từ tệp trước đó.

Một tập lệnh javascript để đếm các quy tắc CSS của bạ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) {
        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();

Tôi không có đủ đại diện để nhận xét về đoạn trích tương tự ở trên, nhưng đoạn này tính các quy tắc @media. Thả nó trong bảng điều khiển 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();

nguồn: https://gist.github.com/krisbulman/0f5e27bba375b151515d

Theo một trang trên blog MSDN IEIternals có tên Giới hạn Biểu định kiểu trong Internet Explorer, các giới hạn được hiển thị ở trên (31 tờ, 4095 quy tắc trên mỗi trang và 4 cấp) được áp dụng cho IE 6 đến IE 9. Các giới hạn đã được tăng lên trong IE 10 đến sau :

• Một tờ có thể chứa tới 65534 quy tắc
• Một tài liệu có thể sử dụng tới 4095 bảng định kiểu
• @import lồng nhau bị giới hạn ở mức 4095 (do giới hạn biểu định kiểu 4095)

Một giải pháp tốt cho vấn đề này cho những người sử dụng Grunt:

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

Các công cụ dành cho nhà phát triển trong phiên bản dev của FireFox hiển thị các quy tắc CSS

Có thể hữu ích cho những bạn vẫn chiến đấu với các phiên bản IE cũ / tệp CSS lớn.

Trang web dành cho nhà phát triển FF

Tôi nghĩ cũng đáng lưu ý rằng bất kỳ tệp CSS nào lớn hơn 288kb sẽ chỉ được đọc cho đến khi đó ~ 288kb. Mọi thứ sau đó sẽ bị bỏ qua hoàn toàn trong IE <= 9.

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

Lời khuyên của tôi là giữ các tệp CSS cho các ứng dụng lớn hơn được chia thành các mô-đun & thành phần và theo dõi liên tục về kích thước tệp.