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

150

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

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

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

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

Барг
источник
1
Похоже, что ограничение 4095 на документ согласно habdas.org/2010/05/30/msie-4095-selector-limit, а также есть ссылка на тестовую страницу, которую вы можете попробовать сами
andyb
В любом случае, зачем вам более 30 таблиц стилей на одной странице? Зачем вам нужно 4000 правил? Даже мои самые сложные страницы едва получают более 1000 узлов, поэтому для достижения предела вам нужно иметь более 4 правил на среднее число узлов ...
Niet the Dark Absol
@Kolink Некоторые (плохие) системы управления контентом используют шаблоны, которые могут привести к включению многих CSS-файлов. К сожалению, я видел <style>предел в 31 раз, достигнутый
andyb
@Kolink - я составляю свое веб-приложение. В моей текущей попытке 30 компонентов = 30 (крошечных) таблиц стилей плюс другие обычные подозреваемые, такие как normalize.css. Другими словами, я, вероятно, реализую что-то похожее на то, что andyb называет «плохим». : P
Barg
Я тоже делаю свой сайт из компонентов, но каждая страница четко определяет, какие компоненты нужны, и импортирует их. Возможно, вы загружаете компоненты, которые вам не нужны, или, возможно, ваши компоненты слишком специфичны, и вы должны сгруппировать их вместе - я не могу судить, не зная больше.
Niet the Dark Absol

Ответы:

221

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

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

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

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

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

Тестирование правила 4095 по пределу листа

В качестве подтверждения я создал суть из 3 файлов. Один HTML и два CSS-файла.

  • Первый файл содержит 4096 селекторов и означает, что его последний селектор не будет прочитан.
  • Второй файл (4095.css) имеет на один селектор меньше, и его считывают, и он отлично работает в IE (хотя он уже прочитал еще 4095 селекторов из предыдущего файла).
isNaN1247
источник
2
Это на самом деле те же две ссылки, которые запутали меня. В КБ говорится «Все правила стиля после того, как первые 4095 правил не применяются», что для меня означает, что это на страницу, другая ссылка говорит: «Лист может содержать до 4095 правил», что означает, что он соответствует -простынь.
Barg
2
Большое спасибо - это подтвердило, что это на лист, а не на страницу.
Barg
30
Следует отметить, что ограничение 4095 применяется к селекторам , а не к правилам .
Кристофер Кортес
1
просто для пояснения: будет ли следующая строка считаться одним «селектором» или двумя? div.oneclass, div.anotherstyle {цвет: зеленый};
Энтони
2
@anthony, два селектора, одно правило.
Squidbe
116

Скрипт 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();
EpokK
источник
2
Вы святой за это. У меня была ошибка, которую я не мог найти локально, и из-за нашей минимизации активов в prod было невозможно отследить, что происходило неправильно. У меня было чувство, что мы превысили лимит селектора IE, и твой скрипт нашел его для меня. Спасибо вам большое!
robabby
9
Стоит отметить, что вы не должны запускать этот скрипт в IE, так как он никогда не выдаст предупреждение.
user123444555621
1
Спасибо за сценарий. Это помогло мне отладить другую ошибку
Jdahern
4
Этот скрипт неточный. Вы должны включить ветку для @mediaправил, см. Stackoverflow.com/a/25089619/938089 .
Роб W
1
отличный сценарий имейте в виду, что если таблицы стилей принадлежат домену, отличному от веб-страницы, вы получите нулевое значение для sheet.cssRules
CodeToad
34

У меня недостаточно представителей, чтобы прокомментировать приведенный выше подобный фрагмент, но этот счет учитывает правила @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

krisbulman
источник
1
Это круто. Спасибо за редактирование скрипта для включения медиазапросов. Очень, невероятно, супер, очень полезно!
tiffylou
1
Этот скрипт лучше, чем приведенный выше.
gkempkens
15

Согласно странице в блоге MSDN IEInternals, озаглавленной « Ограничения таблицы стилей» в Internet Explorer, указанные выше ограничения (31 лист, 4095 правил на лист и 4 уровня) применяются к IE 6 - IE 9. Ограничения были увеличены в IE 10 до следующего :

  • Лист может содержать до 65534 правил
  • Документ может использовать до 4095 таблиц стилей
  • Вложение @import ограничено 4095 уровнями (из-за ограничения таблицы стилей 4095)
Ночная Сова
источник
1
Опять же, предел не в количестве правил , а в количестве селекторов .
Connexo
Текст «4095 правил» или «65534 правил» прямо из текста в сообщении блога MS IEInternals 2011 и также может быть найден в KB Q262161. Скорее всего, это вопрос семантики. Во многих определениях «правила» или «набора правил» «селектор» является частью «правила» вне «блока объявления», который может быть одним селектором или группой селекторов. Используя это определение, технически все правила имеют только один селектор, даже если этот селектор фактически является группой конкретных отдельных селекторов. -> продолжение ->
Ночная сова
<- продолжение <- Автор блога предполагает в комментариях, что внутренне группы селекторов клонируются так, что каждый отдельный селектор в группе селекторов становится его собственным правилом и считается индивидуально. Таким образом, «65534 селекторы» имеют более актуальное значение реального мира, но «65534 правила» все еще технически верны.
Ночная сова
Я подтвердил, что IE 10 имеет более высокий предел (я полагаю, что новый предел равен 65534, как сказал Night Owl?), Чем IE 9, используя суть isNaN1247 ( gist.github.com/2225701 ) с IE 9 и IE 10: developer.microsoft. ru / en-us / microsoft-edge / tools / vms / mac
Дэвид Винецки
4

Инструменты разработчика в редакции FireFox dev демонстрируют правила CSS

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

FF Developer Edition Веб-сайт

Dev инструменты - FF

Майк Хейг
источник
-1

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

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

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

Шеннон Хохкинс
источник
Из некоторых расширенных исследований это выглядит не как ограничение размера файла, а как ограничение селектора #. Я не смог найти никакой официальной документации, подтверждающей этот факт.
Арья