Три важных вещи, которые вы должны знать о CSS

Три важных вещи, которые вы должны знать о CSS

От автора: еще в 2019 году я поделился тем, как селектор CSS :is() упростит процесс написания CSS. Чего я не знал тогда и узнал совсем недавно, так это трех важных фактов о CSS: is().

Вот эти три факта:

Селекторный список

Специфика :is() заключается в том, что это более высоко специфичный аргумент.

:is() не работает с селекторами псевдо-элементов (пока)

Давайте посмотрим, что это значит.

1. Селекторный список

Что, если вы включите селектор, который является чистой тарабарщиной внутри :is()? Будет ли набор правил объявлен недействительным или как?

p:is(.foo, #bar, $css:rocks) { color: hotpink;
}

К счастью, :is() не требователен: часть — которая является недействительным селектором CSS — просто игнорируется, сохраняя при этом остальную часть списка селектора на месте. Таким образом, используя приведенный выше фрагмент, оба и p.foo и p#bar будут окрашены цветом hotpink.

Если вы попробуете сделать это без :is(), весь набор правил станет недействительным. В приведенном ниже фрагменте ни один из абзацев не будет окрашен в hotpinkс в связи с тем, что неверный селектор $css:rocks делает недействительным весь список селекторов.

p { font-family: sans-serif;
} p.foo, p#bar, p$css:rocks { /* This whole rule-set is declared invalid */ color: hotpink;
}

Обратите внимание, что к абзацам будет применено font-family: sans-serif, поскольку игнорируется только недопустимый набор правил.

В ближайшем будущем это поведение больше не будет иметь место, поскольку CSSWG намеревается изменить эти правила таким образом, чтобы недопустимый селектор просто игнорировался, а не делал недействительным весь список селекторов. Соответствующая проблема CSS: 3264

2. Специфика :is() заключается в том, что это более высоко специфичный аргумент.

Взгляните на код ниже. Какой цвет будет у p.foo?

p:is(.foo, #bar, $this:invalid) { color: hotpink;
} p.foo { color: lime;
}

Он будет не lime, а hotpink! Это потому, что при расчете специфичности, специфичность псевдо-класса :is() заменяется спецификой его наиболее высоко специфичного аргумента.

p.foo имеет специфичность (0,1,1)

p:is(.foo, #bar) имеет специфичность (1,0,1)

Так как p:is(.foo, #bar) имеет более высокую специфичность, здесь он «выиграет».

Псевдо-классы :not() и :has() также имеют свою специфику, которая рассчитывается таким же образом.

Если вы не хотите, чтобы это повлияло на ваш код, вы можете использовать :where() вместо :is(). Он работает точно так же как :is(), но всегда будет иметь специфику 0. Вы можете ловко обернуть это вокруг других селекторов, чтобы отменить их специфичность. Подумайте, например о :where(:not(…)).

Хотя я бы не рекомендовал делать так, но вы могли бы сделать что-то вроде :is(#bump#up#the#spe#ci#fi#city#yo, .foo) для переопределения более конкретных селекторов, чем .foo…

3. :is() не работает с селекторами псевдо-элементов (пока)

Если вы прочтете определение :is() вы увидите, что он принимает «список селекторов», который представляет собой список простых, составных или сложных селекторов, разделенных запятыми.

При поиске простых селекторов следует обратить внимание на одну интересную вещь:

Селектор типа, универсальный селектор, селектор атрибутов, селектор класса, селектор идентификатора или псевдокласс — это простые селекторы.

Видите? Селекторы псевдо-элементов не включены в этот список. В результате, :is() не работает с селекторами псевдо-элементов, такими как ::before, ::after, ….

В будущем это станет возможным, но не сейчас. Соответствующая проблема CSS: 2284

Знание этих трех фактов об :is() наверняка поможет вам лучше понять его и сделать его использование более увлекательным!

Автор: Bramus Van Damme

Источник: www.bram.us

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

Читайте нас в Telegram, VK, Яндекс.Дзен