Обмеження правил CSS Internet Explorer

Я читав суперечливу інформацію щодо дурних обмежень CSS Internet Explorer. Я (думаю, що я) розумію, що у вас може бути лише 31 <style>та <link>теги (комбіновані), і що кожен аркуш може мати до 31- @importх (так що 31- <link>х, кожен до 31- @importх - це добре, хоч і божевільно).

Однак правило 4095 менш зрозуміле - це 4095 правил на документ чи на аркуші? Наприклад, чи можу я <link>до двох таблиць стилів, кожен з яких має 4000 правил, і чи буде це працювати, або це порушить межу?

3-я партійна редакція 2018 року

На цій сторінці MSDN-повідомлення в блозі стилів-меж-в-Інтернеті подано додаткову інформацію.

Посилаючись на наступне від Microsoft:

• Обмеження таблиці стилів в Internet Explorer
• KB - Веб-сторінка, що використовує стилі CSS, не відображається правильно в Internet Explorer

Правила для IE9 :

• Лист може містити до 4095 селекторів (Демо)
• Лист може @import до 31 аркушів
• @import вкладення підтримує глибину до 4 рівнів

Правила для IE10 :

• Лист може містити до 65534 селектор
• Лист може @import до 4095 аркушів
• @import гніздування підтримує до 4095 рівнів глибиною

Тестування правила 4095 за межами аркуша

Для підтвердження я створив суть із 3 файлами. Один HTML і два CSS файли.

• Перший файл містить 4096 селекторів і означає, що його кінцевий селектор не буде прочитаний.
• У другому файлі (4095.css) є один менший селектор, і він читається, і відмінно працює в IE (навіть якщо його вже прочитали ще 4095 селектори з попереднього файлу.

Сценарій javascript для підрахунку ваших правил 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 під назвою " Обмеження стильових таблиць в Internet Explorer " обмеження, показані вище (31 аркуш, 4095 правил на аркуш і 4 рівні), застосовані до IE 6 до IE 9. Обмеження були збільшені в IE 10 до наступного :

• Аркуш може містити до 65534 правил
• Документ може використовувати до 4095 таблиць стилів
• @import вкладення обмежено 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 для великих додатків на модулі та компоненти та постійно стежити за розмірами файлів.