Как медиа-запросы подсчитываются в IE-селекторах IE?

Любая идея, как IE обрабатывает медиа-запросы относительно этого ограничения селектора CSS?

Он видит это как одно правило CSS или видит его как 1 правило (объявление @media) + количество правил внутри правила @media?

Это для IE9, поскольку из того, что я знаю, IE9 является единственным IE, который поддерживает медиа-запросы, а также имеет эту проблему с селекторами 4095.

Я пытаюсь написать инструмент для разделения CSS соответственно, и я не уверен, как считать правила, так как в правиле @media будет считаться 1 или будет считаться 1 + nr правил внутри

ОТВЕТЫ

Ответ 1

Похоже, что медиа-запросы не включены в предел селектора. Все правила во всех медиа-запросах учитываются.

Я написал тест, который выполняет двоичный поиск, чтобы найти точку поворота, где последний селектор игнорируется. Он доступен в https://robwu.nl/s/css-selector-limit-test.html. Бинарный поиск выполняется в диапазоне 0 - 4200 и сообщает, как часто селектор ввода подходит до тех пор, пока последний селектор не будет применен. Если результат больше 4096, тестовый пример сообщает "бесконечность".

Результаты:

Turning point at 4095 for: #DUMMY{color:red;}
Turning point at 4095 for: @media screen(min-width:9px) { #DUMMY {color:red;} }
Turning point at 2047 for: @media screen(min-width:9px) { #DUMMY, #DUMMY {color:red;} }
Turning point at 1023 for: @media screen(min-width:9px) { #DUMMY {color:red;} #DUMMY, #DUMMY, #DUMMY {color:red;} }
Turning point at 1364 for: @media screen(min-width:9px) { #DUMMY {color:red;} } @media screen(max-width:9px) {#DUMMY, #DUMMY {color:red}}
Turning point at 1364 for: @media screen(min-width:9px) { #DUMMY {color:red;} } @media screen(max-width:9px) {#DUMMY {color:red;}} @media screen(max-width:9px){ #DUMMY {color:red;}}
Turning point at infinity for: @media screen (min-width:9px) { }
Turning point at infinity for: @media screen (min-width:9px) { } @media screen (min-width:9px) { } @media screen (min-width:9px) { }
Turning point at infinity for: @font-face { font-family: "blablablablabla"; }

Последние три теста показывают, что медиа-запросы (и другие at-rules, такие как @font-face) не учитываются в пределе селектора.

Я видел множество скриптов счетчиков "css rule" здесь, в Stack Oveflow (например, fooobar.com/questions/42701/... и fooobar.com/questions/42707/...), но все они ошибаются, к сожалению. Медиа-запрос появляется как одна запись в списке cssRules/rules. Правильный способ подсчета количества селекторов в таблице стилей - это рекурсивно обрабатывать таблицу стилей, чтобы справляться с (вложенными) @media по правилам.

Ответ 2

Я не уверен, будет ли он считаться 1 или 1 + nr, но я бы предположил, что вы не разделяете CSS между медиа-запросами.

Неэффективный хак

  • Используйте счетчик и перейдите к 4095.
  • Отследите назад и попытайтесь найти самый последний запрос @media и отделите CSS оттуда. Вы можете добавить проверку, если медиа-запрос не доходит до 3000, в то время как обратный отсчет затем не учитывает этот случай и т.д.