Cтатьи по тегу «CSS Selectors 4»

Браузер Safari часто ругают за редкое обновление и задержку внедрения новинок, но есть у него «любимые» области, в которых он опережает всех. Например, CSS-селекторы 4 уровня. Псевдоклассы :matches() — теперь это :is(), :not() с несколькими селекторами и :nth-child()/:nth-last-child() c добавочным параметром of <что угодно> он поддерживает с 2015 года. И именно в его экспериментальной сборке появилась первая реализация долгожданного псевдокласса :has()!

О :has() часто говорят как о «родительском селекторе». Но он может быть не только селектором любого предка, но и селектором предыдущего соседа. О его непростой судьбе — задержке из-за проблемы с производительностью, странном ее «решении» (буквально по анекдоту «чтоб игрушки дольше не ломались, не давайте их детям»:) и его отмене, и первых попытках реализовать — распространяться не будем. Лучше сразу посмотрим…

Примеры использования

Радостная весть от Igalia (компании, подарившей нам гриды во всех основных движках и не только): сегодня они объявили о начале экспериментальной реализации в движке Blink одной из самых долгожданных фич CSS — псевдокласса :has()!

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

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

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

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

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