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

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

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

Например:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

Автор: Chris Coyier

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree