Один недействительный псевдоселектор CSS — это полностью игнорируемый селектор

Один недействительный псевдоселектор CSS — это полностью игнорируемый селектор

От автора: чем опасны недействительные псевдоселекторы CSS? Возможно, вы знаете это: если какая-либо часть селектора недействительна, это делает недействительным весь селектор.

Например:

div, span::butt { background: red;
}

Несмотря на то, что div является абсолютно корректным селектором, но span: butt — нет, поэтому весь селектор недействителен — ни дивы, ни элементы span::butt на странице не будут иметь красный фон.

Обычно это не такая уж проблема. Это может быть даже полезно, в зависимости от ситуации. Но есть много случаев, когда это создает сложности. Классика:

::selection { background: lightblue;
}

В течение долгого времени Firefox не понимал этот селектор и требовал вендорного префикса (::-moz-selection), чтобы получить тот же эффект. (С Firefox 62+ это больше не так, но вы поняли суть.)

Другими словами, это было невозможно:

/* это не будет работать нигде */
::selection, ::-moz-selection { background: lightblue;
}

Это ломается в браузерах, которые понимают ::selection, и ломается в Firefox, который понимает только ::-moz-selection. Это стало местом применения для препроцессора @mixin, чтобы все работало точно.

Это было настолько досадно, что браузеры обратили на это внимание и исправили. В разговоре с Эстелль Вейл я узнал, что ситуация меняется. Она написала в документации MDN:

Как правило, если в цепочке или группе селекторов есть недопустимый псевдо-элемент или псевдо-класс, весь список селекторов недействителен. Если псевдо-элемент (но не псевдо-класс) имеет префикс -webkit, браузеры Firefox 63, Blink, Webkit и Gecko предполагают, что он действителен, а не отменяет список селекторов.

Это не касается селекторов; это специально для псевдо-элементов. То есть, двойные двоеточия (::). Вот тест:

Я бы назвал это позитивным изменением.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.