Ограничения CSS правил Internet Explorer

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

Однако правило 4095 менее ясно - это правила 4095 на документ или на лист? Например, могу ли я использовать <link>две таблицы стилей, каждая с 4000 правилами, и она будет работать, или это нарушит лимит?

Сторонняя редакция 2018

В этом сообщении блога msdn stylesheet-limit-in-internet-explorer дается дополнительная информация.

Ссылаясь на следующее от Microsoft:

• Ограничения таблицы стилей в Internet Explorer
• KB - веб-страница, использующая стили CSS, неправильно отображается в Internet Explorer

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

• Лист может содержать до 4095 селекторов (Демо)
• Лист может @import до 31 листов
• @import nesting поддерживает до 4 уровней

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

• Лист может содержать до 65534 селекторов
• Лист может @import до 4095 листов
• @import nesting поддерживает до 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 демонстрируют правила CSS

Может пригодиться тем, кто все еще борется со старыми версиями IE / большими CSS-файлами.

FF Developer Edition Веб-сайт

Я также думаю, что стоит отметить, что любой файл CSS размером более 288 КБ будет считан только до этого размера ~ 288 КБ. Все, что после, будет полностью проигнорировано в IE <= 9.

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

Мой совет - держать CSS-файлы для больших приложений разделенными на модули и компоненты и постоянно следить за размером файлов.