Как долго может быть селектор CSS?
Как долго может быть селектор CSS?
меня не слишком интересует, что говорит "спецификация", а скорее то, что браузеры действительно могут обрабатывать. До сих пор я знаю только один браузер, который подавляется (очень) длинными селекторами; chrome.
Edit:пример, где Chrome не применяет правило CSS к некоторым странам, например, США, Турции, Сирии и Великобритании и CSS. Есть 7 селекторов, и, по крайней мере, #5 Слишком длинное для некоторых браузеров.
3 ответов
Скоттс заключенному Chrome обрабатывает 1366 селекторов. Почему 1366?
1366 * 3 = 4098
почему 3? В этом селекторе есть 3 компонента:.y1366 .c1 > *.
4098 является пределом общего количества селектора частей. доказательств (я добавил > * только для первого селектора, и он отметил 4095 элементов вместо 4096).
мои тесты
A группа из 4096 селекторов будет иметь остальные полностью проигнорированы. Пример:
.z .y1, .z .y2, .z .y3,..., .z .y3{background-color:red}
Видео
в примере каждый селектор имеет 2 компоненты:
.y1 > *
Component 1: .y1
Component 2: *
каждый селектор, помещенный после 2048-го, игнорируется. Почему 2048? Потому что каждый селектор имеет 2 компонента и предел 4096. Не убедил?
следующий пример
в примере выше, каждый селектор имеет один компонент:
.y1, .y2, .y3 ...
работают только первые 4096 селекторов. Chrome не имеет ограничений, поэтому все селекторы должны работать. Однако после определенного момента оставшиеся селекторы полностью игнорируются. Эта ошибка существовала не менее 2 лет. IE9 и ниже имеют предел 4095 селекторов.
Ошибка 2
большая группа селекторов, один из которых имеет два компонента .bdy .y1 воли, после 4096 совмещенных компонентов причиняют элемент с класс!--9--> чтобы быть затронуты.
пример
.bdy .y1, .y2, .y3, ... .y4097{background-color:red}
группа селектора CSS выше вызывает элемент по имени класса bdy иметь background-color:red применить. Условие иметь 4096 селекторов после одного селектора с двумя компонентами.
видео
в приведенном выше примере тело применяется с красным цветом из-за селектора 4096 (после того, как он нацелен на дочерний элемент элемента с именем класса bdy, который имеет имя класса y1). Ошибка приведет к тому, что родитель будет затронут.
на .bdy .y1 элемент .y1 (под родительским .bdy) является целевой, но элемент bdy также влияет. Если вы переместите два селектора компонентов на 10 мест вперед, вы можете создать еще 10 селекторов, пока эта ошибка не проявится. Это означает, что ошибка возникает, когда общее количество селекторов компонентов достигает 4096.
решение
они не собираются это исправлять. Эта проблема происходит, только если все селекторы находятся на одной линии. Так что просто сделайте:
.c1 .y1,
.c1 .y2,
.c1 .y3...
вместо:
.c1 .y1, .c1 .y2, .c1 .y3...
Чисто Некоторые Замечания
если я удалю все настройки селектора через .y2010 .au > * (первые 97), затем .y1990 .us > * сначала появляется set. Это, по-видимому, означает, что проблема заключается в ограничении. Если я правильно рассчитал его, предел для вашего кода, похоже, составляет 1366 для Chrome (эти цифры пришли от импорта его в электронную таблицу excel с разделением запятых, а затем подсчета ячеек). Таким образом, разделение его на 2 или 3 меньшие группы может решить проблему.
одна вещь, которую я не могу объяснить, находится в инструментах разработчика Chrome, Если я скрываю .land { fill: lightgray} тогда правильный цвет для .us и другие появляются, что почти указывает на то, что он" скрывает "или" переопределяет " цвет, что не совсем имеет смысл. Я не могу понять, где он получает правильный цвет, когда .land скрыт.
Некоторые Эксперименты
первый раунд-не просто заданное количество Селекторы
однако казалось, что это может быть больше общих символов, а не общее количество селекторов, как Chrome handles эти 1366 селекторов штрафа в размере (благодаря начальной скрипке onetrickpony, которая помогла мне придумать этот пример тестирования), и еще один до 1367 в порядке.
но с html и css, настроенными на соответствие ближе к вашему реальному случаю использования и это работает на 1366 пунктов, но я получаю странную утечку красного цвета в body сам в Chrome, Если это 1367 пунктов. (Возможно, это связано с тем, что я испытал с .land цвет странность, отмеченная выше для вашего реального случая использования.)
если я удалить > * часть css тогда 1367 пунктов снова работает, так это не * селектор сам, что это проблема, потому что если это изменено на div это не опять. Однако * селектор может объяснить нечетную утечку цвета, потому что в этом примере с удаленным > * на моем Chrome он начинает отказывать на 2049 поскольку я ожидал бы, что он потерпит неудачу (т. е. потеряет цвет в divs, а не будет иметь утечку цвета, как предыдущие неудачи). Обратите внимание, что этот пример из 50 000 элементов (предупреждение: вы можете получить предупреждение "stop script", если вы загрузите его, просто пройдите время или два, и он должен завершить загрузить) все еще работает в Firefox и IE10 для меня. Это верно, даже если я добавлю обратно > * на оба браузера, в то время как в Chrome он снова возвращается к фоновой утечке (что дополнительно, похоже, подтверждает * селектор может иметь какое-то отношение к нечетному поведению цвета).
второй раунд-некоторая комбинация # селекторов и # символов
из одного из примеров отказа выше, I рассчитал, что общее количество символов было бы примерно 20500 для отказа. И все же я могу получить 50002 символов без проблем здесь и 100002 здесь -- таким образом, это должно быть какое-то сочетание числа X селекторы итого Y количество символы это создает ограничение. В , я могу пройти через 4096 элементов с red фон перед элементом 4097 не удается, потому что я уменьшил размер отдельных селекторов. Уменьшение должно быть пропорционально количеству селекторов в строке, потому что только два селектора все еще позволяют 500,006 символов в одном из них по-прежнему работают для обоих. Число 4096 может быть истинным" максимальным " ограничением количества селекторов, потому что, когда я уменьшаю селекторы до двух символов каждый (плюс ., ,, и пробелов), я еще успеха 4096, а сбой при 4097.
мне интересно, что этот последний провал набора тестов происходит рядом с 4095 число Internet Explorer дает максимальное количество селекторов, которые можно сделать с помощью IHTMLStyleSheet::addRule метод. По-видимому, это только ограничение этого метода, потому что IE10 отлично работал с 4097 метка номера в тесте выше или любой из тестов, в которых Chrome терпит неудачу (ни один из которых не использует этот метод для генерация селекторов). Почему эта близость к этому числу, указанному для браузера IE для отказа Chrome, я не знаю, но это интересно.
вывод
нет точного магического числа, но, учитывая вышеупомянутые эксперименты, кажется, что существует некоторый меньший предел символов, основанный на количестве селекторов до размера селектора для Chrome, в отличие от Firefox или IE10. Это, по-видимому, не фактическое количество селекторов, ни фактические общие символы, но некоторые сочетание между ними, из которых самое большее оно появляется 4096 является пределом, но может быть меньше, если строка селектора длиннее (как начальные примеры, которые не удалось после 1366.
нет максимальной длины для селекторов CSS. Вы можете определять сколько угодно. Тем не менее, важно, что следует учитывать, это file size.
Макс kb size что IE будет читать это 288kb, любые стили после этой отметки не читаются.- Internet Explorer CSS размер файла Limi
кроме того, максимальные селекторы на таблицу стилей ограничены 4095 правила css и 31 таблицы стилей могут быть связаны в файл - ihtmlstylesheet:: метод addRule
последняя большая проблема-пропускная способность. Кажется, что файл css обычно имеет легкий вес. Однако, если есть 31 css правила, которые имеют очень длинные имена, это может замедлить производительность.