Как работает исправление _: - ms-lang (x) для Edge и IE?

Question

У меня была ситуация, когда мне приходилось применять определенный стиль CSS только в браузерах Edge и IE.В Интернете я обнаружил, что вы можете добавить свой CSS-селектор с помощью _: - ms-lang (x), и стиль будет применяться только в IE и Edge.

Но мне интересно, как именно это исправление работает?Насколько я знаю, запятая будет просто разделять различные селекторы, а это означает, что другие браузеры также должны интерпретировать и использовать этот стиль.

Вот пример:

Допустим, мы хотим применитьширина от 94px до элемента .selector только в Edge и IE.

_:-ms-lang(x), .selector { 
    width: 94px;
}

Браузер Edge будет применять этот стиль, а другие - нет.Но почему нет?

Запятая в селекторе должна применять стиль к элементу _: - ms-lang (x) И к элементу .selector.

Вот источник этого хака IE.

И еще один.

Answer 1

В CSS, когда браузер не распознает часть селектора (или считает, что в селекторе есть ошибка), он полностью игнорирует все правило.

Вот раздел в CSS3спецификация, описывающая это поведение

Прелюдия квалифицированного правила анализируется как список селекторов.Если это приводит к неверному списку селекторов, все правило стиля является недействительным.

Здесь CSS2.1 говорит о специальном случае запятой

CSS 2.1 придает особое значение запятой (,) в селекторах.Однако, поскольку неизвестно, может ли запятая приобретать другие значения в будущих обновлениях CSS, весь оператор должен игнорироваться, если в селекторе есть ошибка, даже если остальная часть селектора может выглядеть разумно в CSS 2.1.

Поэтому, когда другие браузеры пытаются проанализировать селекторы, они считают селектор _:-ms-lang(x) недопустимым и игнорируют правило whole (включая.selector)

Также вот отличный ответ о том, почему такое поведение желательно