CSS Selectors 4

Алгебра в calc(), новая специфичность селекторов 4 уровня и другие майские новинки CSS

HTML, CSS, JS

Вчерашняя (уже третья за май 2018 г.) телеконференция Рабочей группы CSS принесла несколько сюрпризов: в функцию calc() добавили долгожданную возможность делить значения одинаковой размерности друг на друга (например, calc(500px / 100vw)), получая безразмерные коэффициенты (а в перспективе — вообще делать любые математически допустимые операции с CSS-величинами, скажем, высчитывать площади фигур в квадратных пикселях, умножая высоту на ширину, или делить расстояние на время, получая скорость анимации в пикселях в секунду). А у псевдоклассов :matches(), :not() (со списком аргументов) и :has() из модуля селекторов 4 уровня изменились правила специфичности — теперь она не будет высчитываться динамически в зависимости от того, какой аргумент из списка реально совпал, а всегда браться по самому специфичному из аргументов. Так что давнюю реализацию в WebKit и недавнюю частичную в Chrome опять придется переделывать — но, по идее, для будущих реализаций новый алгоритм станет проще.

Новые спецификации CSS-селекторов

Привычные нам CSS-селекторы 3 уровня стали рекомендацией W3C еще в 2011-м (почти одновременно с CSS2.1), а черновик селекторов 4 уровня был опубликован еще в 2013-м и очень долго не менялся. Но на этой неделе рабочая группа CSS спохватилась и показала, что работа над селекторами не заброшена. С перерывом в два дня обе спецификации обновились: 30 января — старая, а 1 февраля — новая.

Явный контроль над специфичностью в CSS?

Мы уже привыкли, что специфичность CSS-селекторов и приоритет соответствующих им правил — одно и то же. Но всегда ли должно быть так? Таким вопросом озадачила на этой неделе рабочую группу CSS легендарная Лия Веру.

В ишью на гитхабе Лия обратила внимание на то, что принцип «более конкретные CSS-правила переопределяют более общие» — всего лишь эвристика. В большинстве простых случаев она помогает, но нередко эта эвристика дает сбой, и тогда приходится прибегать к хакам типа повторения одного класса в селекторе несколько раз или добавления лишних :not(). Лия предлложила вместо этих хаков ввести новый функциональный псевдокласс (например, :filter()), похожий на :matches() из селекторов 4 уровня, но c нулевой специфичностью (не меняющий специфичность остальной части селектора).

Псевдоэлементы, которых не может быть

В сегодняшней статье мы увидим псевдоэлементы в псевдоэлементах, псевдоэлементы с псевдоклассами и другие невозможные вещи, скрывающиеся от любопытных глаз в дебрях спецификаций. Но сначала давайте быстренько вспомним, что такое псевдоэлементы вообще.