Cтатьи по тегу «:has()»

Псевдокласс :has(), он же «родительский селектор» и «селектор предыдущего соседа» — пожалуй, одно из самых революционных новшеств CSS 2022 года (наряду с выражениями от контейнера). Его штатно поддерживают уже два стабильных браузера — Safari 15.4+ и Chrome 105+. Но кроме всеобщей радости, его внедрение принесло и неожиданные проблемы: пользователи стали жаловаться, что с новым обновлением перестали работать некоторые сайты на jQuery.

Вот уже почти месяц, как псевдокласс :has() – больше, чем «родительский селектор» — можно «пощупать» в браузере. Можно подвести первые итоги эксперимента: всё не так страшно, как думали, но не так легко, как хотелось бы.

Сложнее всего оказалось обрабатывать вложенные в :has() другие функциональные псевдоклассы — :is(), :where(), :not() и сам :has(). И Антти Койвисто — ведущий разработчик реализации :has() в WebKit, который и нашел способ добиться приемлемого быстродействия для него — обратился к Рабочей группе CSS с предложением запретить такие комбинации.

Идея вызвала было недовольство, но Джен Симмонс объяснила, что реализовать :has() совсем без ограничений едва ли возможно, и сейчас задача — выяснить, какими редкими применениями можно пожертвовать, чтобы поскорее сделать его доступным для более важных случаев. В итоге в WebKit запретили вкладывать :has() друг в друга, но разрешили остальные псевдоклассы: быстродействие таких комбинаций «не оптимально, но с этим можно жить». Код WebKit уже подправили (но спецификацию — пока нет).

На мой взгляд, это отличный компромисс. Если это ограничение поможет быстрее внедрить :has() в браузеры, есть шанс, что с него снимут пометку «необязательный», и его повсеместная поддержка гораздо важнее экзотических случаев. Согласны?

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

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

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

21 декабря, самый короткий день в 21-м году 21 века, принес сразу несколько приятных CSS-новостей.

Во-первых, у CSS в очередной раз обновилось официальное определение — уже девятое по счету (можно сказать, «CSS9»?). Отличий от прошлогоднего не очень много. В само «официальное определение» (т.е. модули, по мнению редакторов полностью проработанные, покрытые тестами и готовые к внедрению) добавились стили для счетчиков (возможность нумеровать списки любыми символами). Список стабильных, но мало опробованных в деле модулей пополнился стилями скроллбаров — псевдоэлементы типа ::-webkit-scrollbar-* окончательно уступят место CSS-свойствам из Мозиллы. Больше всего изменился раздел «Модули с более-менее единообразной реализацией» — туда вошли трансформации 2 уровня (отдельные функции translate(), scale() и rotate(), а также 3D, в котором наконец навели относительный порядок), логические свойства и значения (отступы и т.п. с учетом направления текста), размеры бокса (новые значения типа min-content), позиционирование (включая position:sticky), шрифты 4 уровня, и даже пара скриптовых API — ResizeObserver и API анимаций.

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