От автора: чем опасны недействительные псевдоселекторы 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.