:has в CSS - псевдокласс из будущего 👽 на примере карточки новости 

00:00 Интро 00:31 Как работают селекторы 01:19 Изменение цели 02:53 Описание карточки 04:22 Описание задачи 04:56 Создание вариаций 06:19 Варианты модификаторов 07:23 Как тут поможет has 08:15 Запуск Chrome с флагом 09:30 Замена модификаторов 10:31 Случай посложнее 11:27 Простой сложный селектор 12:24 Демонстрация гибкости 12:50 Кухня разработки has 14:33 Выводы 15:30 Аутро

Пойду внедрять в прод. Заказчикам буду говорить, что ничего не знаю, у меня работает :)

CSS: - У меня для тебя хорошие новости: теперь ты сможешь использовать родительский селектор! Компания, где я работаю: - У меня для тебя плохие новости: я буду и дальше требовать от тебя поддержки IE, потому что мои менеджеры просто не задумываясь переписывают требования с предыдущих проектов на следующие.

Я из Харькова. Мне так, почему-то, приятно стало, что ты знаешь про Харьков) Спасибо тебе)

Вот он, вот он селектор моей мечты! :haas! :haaas!

Добрый день! Отличное видео, уникальный контент! Однозначно лайк!

По моему больная тема css - постучаться выше (либо к родителю, либо как ~ только выше), и :has по сути решает эту проблему немного необычно, но полезности от этого не меньше

Я ещё только учусь в академии, но уже сталкивался с моментом, когда мне такой функционал был очень нужен и я искал, думая, что что-то подобное уже реализовано. Как же приятно осознавать, что твой разум и знания немного опережают реализации. Этого ещё не существует, а я уже вижу примеры где это можно было бы применить. Спасибо, Вадим.

Спасибо за то, что ты есть, Вадим!)

Афигеный селектор! Спасибо, что делишься с нами новыми фишками;)

Каждый новый ролик Вадима прям праздник. Благодарю, очень интересно, успехов😎

Спасибо за труд.

Отличные новости. Спасибо.

Благодарю за видео! 😀👍

Отдельное спасибо за ссылки и вставку с "Can i :has()"

Спасибо за интересное видео

Очень круто!

Ухо вот как же этого не хватало!

Скоро :has будет встречаться чаще чем

Спасибо, Вадим =)

Очень круто

С React будет бомба ! Спасибо !

Очень круто. Думал, что цсс уже полноценный и в нём есть всё, что мне нужно. Но вот сначала были адаптации от контейнеров, которые я теперь очень жду, а теперь ещё жду селектор хас.

Лайк из Харькова 👍

Спасибо! )

Увидел color: tomato - сразу подписался)

помню, еще в недавнем подкасте обсуждались проблемы :has, рекурсивность и тому подобнее, а тут уже спецификация прилетела. Приятно, быстрее бы пощупать в реальных условиях

Гугл

Больше всего впечатлило включение флага)))

Хммм, интересная хереновина, будем ждать. 😁

На вид топчик

круть, не знал что :empty работает, хоть и слышал про :has

помню когда то играл с переключением контента с помощью input:radio и там приходилось выносить input'ы вне контейнера с блоками и писать что то типо input:nth-child(2):checked ~ .container .box:nth-child(2) { display: block;} теперь выходит можно будет структурно сделать более приятно все .box:has(input:checked) {display: block;}

Красота, эх быстрей бы ввели поддержку этой красоты))). Сафари как всегда будет самым последним куда это завезут((.

Крайне полезная штука, особенно для иерархических меню с сложными ветвлениями и переходами стилей.

круто

крутяк конечно..

подписка!

С нетерпением ждём, кода в css можно будет написать игру Жизнь и делать sql-запросы

it is good!!!

CSS программирование не за горами)

Это has хорош, но в очень очень редких случаях. На практике он будет применяться очень редко, как :empty, :nth-* (:first,:last), :not и т.д. А учитывая когда оно появится у большинства....ждать устанем, пока сможем использовать в продакшене. ИМХО как мне кажется было бы удобнее, если бы сделали обратный вложенному поиск img < a, то есть ищем выше картинки по иерархии ссылку (как вариант a < ing) примерно как работает js closest().

Отличный контент) . Было бы здорово если бы вы сняли видео про автопрефиксеры.

Ждем хэз)

Если has будет работать с селекторами типа :checked будет топ

Случайно попал сюда через рекомендации. Ух, как давно я не заглядывал в web-dev тусовку. Но тут всё еще есть Макеев, нет псевдокласса :has, в комментах всё еще бомбят из-за поддержки IE. Как будто ничего не поменялось :D

еще одна фича на пути к тому, что CSS постепенно становится не просто языком каскадных стилей, а нечто большим. Спасибо Вадиму за то, что выкладывает будущие цсс фичи ))

Вадим, это уже какое-то программирование на СSS :)

Спасибо за видео! has жду с нетерпением! @Vadim, приятный тап у свичей, подскажи пожалуйста, что за они и что за клавиатура?

Да, действительно, штука очень удобная (когда она появится). Очень хорошо использовать для задач, которые требуют подобной манипуляции с объектами. Однако, хочется заметить, что в использовании для многообразия элементов, получается, что нам нужно создавать документацию или описание каждого взаимодействия. В противном случае, зайдя на проект, нам трудно будет разобраться, почему, например, картинка менятся таким образом, когда она есть, а когда нет, что-то другое происходит. В случае же с БЭМ нам не приходится этого делать, так как сами скажут о том, что именно они делают (если, конечно, писать их так, чтоб это было явно и понятно). В целом, мне видео очень понравилось. И я даже знаю, что есть такие задачи, для которых это решение было бы куда лучше, чем использование нескольких модификаторов. Жаль, что это будет ещё не скоро. Поддержка пока очень скудная у этого свойства. Спасибо за обзор и разбор!

6 дней прошло с момента релиза видео, а дизов до сих пор нет. Крутяк)

Пойду запущу канарейку и попробую! Спасибо за видео.

Прям слышу, как препроцессоры потихоньку собирают свои пожитки...

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

Очень крутая штука для корректировки дизайна, на фрилансе зачастую просят изменить что-то в дизайне, но как правило не все имеется доступ к html т.к. он приходит с сервера в php и дополнительный класс прописать возможности нет, если не разбираешься в этом. И :has все это позволяет сделать

Круто, удобно. Надеюсь дождемся раньше, чем нас маразм разобьет. :))

Прям очень круто) ну к 2025 внедрим :D

Вот это вот все, has(:not) очень гибкий инструмент из яп, называется выражения, быстрей бы запилили, такая дикая вещь и удобно, и все такое. И главное в js как удобно такими селекторами пользоваться для изоляции. А не вот эти [data-selector="any-value"]

Спасибо за видео, has и правда оч полезный инструмент. Кажется у вас декомпозиция стилей доходит до абсурда: по одному стилю на модификатор. Интересно во сколько раз увеличится размер бандла в среднестатистическом проекте и насколько это себя оправдает...

Ждём поскорее :has во всех браузерах. Люди будут использовать :has, а галерники будут поддерживать IE9 :(

Для меня, самое ожидаемое от :has это решение для если у ссылок стильное подчёркивание c border-bottom вместо text-decoration, когда, начиная с логотипа, все картинки-ссылки подчёркиваются. Сейчас это нельзя исправить селектором. О большем и не мечтал...

интересно на сколько сильно увеличится производительность при использовании :has и вставки в дерево вместо проставления классов? кто-нибудь проводил сравнительные тесты?

Прикольно, но, конечно, возникает вопрос как это потом читать... С одной стороны длинную портянку стилей не охватишь сразу, а с другой сам синтаксис усложняется в разы. Без крутого ide скоро css не расковыряешь :)

has - это манна небесная) Со всеми этими модификаторами, особенно для несведущих, постоянная путаница. Человек хочет статью просто написать, а ему ещё приходится помнить про разные модификаторы, в зависимости от наполнения...

ну ты ювелир

Поставил лайк, Вадим) У меня такой вопрос - зачем дизайнеры используют два разных шрифта? Один основной, а один только для заголовков, по сути для 20 символов на странице. Пришел такой макет, и думаю, стоит ли подключать второй шрифт для этого, или же использовать основной Lato.

Нужно запилить gh репозиторий с возможными кейсами нового псевдоклассаа также заменой старых способов.

10:15 Мне в этом момент показалось, что Вселенная сейчас скалапсирует. Неужели такое возможно?!))

Можете посоветовать не очень сложный и максимально совместимый способ стилизовать инпуты? У меня в макете цвет вводимого текста должен быть белым, а замещающий текст - серым. Когда делаю самому полю цвет текста один, а замечающему тексту через ::placeholder другой, получается что они оба становятся цвета текста - белыми. Если задавать цвет текста только активному состоянию, он вообще не применяется. Искала в интернете, но у вас всегда проще и изящнее

4:18 о Харьков я там живу

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

1500 лайков, 0 дизлайков)

В следующий раз, когда услышу, что AdBlock используют не хорошие люди, не желающие вознаграждать долларом контент-мейкеров, скажу: "Мне это по работе надо". :)

Не знаю что тут комментировать, прост оставлю коммент для продвижения )))

А можно узнать на чём вы пишите? Очень сильно хочу серьёзно вкатиться в html, а sublime text даже с дополнениями не такой удобный как на видео

Даже и не знал что я все время писал стили по методологии бэм, хех

Через пару-тройку лет можно будет вспомнить о нем…

Пора бы xpath начать использовать в CSs

В адблокерах такая штука уже есть, кстати

А таки добавили

has классный

идея прекрасная и селектор замечательный - но в текущий момент в крупных проектах жаль не внедрить :(

и кто теперь скажет что CSS не язык программирования ))))

Остается узнать одно - на сколько быстрым будет селектор такого рода, так как если он будет дико жрать ресурсы - это будет печально (ведь если завтра половина разработчиков будет пилить всё с has - что мы получим...). А то будет как с :last-child в IE когда-то. Так-то рендеринг оптимизировали, но не припомню, PageSpeed по-моему до сих пор не жалует определенные моменты. Хотя если через эдак лет 5-7 выйдет :has - к тому времени у бОльшей части народу будут вменяемые быстрые устройства.

Такими темпами проще будет добавить ветвления в css, нежели городить такую сложные конструкции

Как же это ужасно и нечитаемо) но где-то определенно удобно будет применить

Еще лет 5 и глядишь внедрят. Из-за отсутствия таких селекторов, даже крупные сайты годами используют костыли в css, вместо того чтобы под копотом расставить классы ))

Фокус витин я его называю

Я думал в контре обнова ;с

В браузерах уже сайты на офигенном 3d, а мы тут восхищаемся возможностью не писать пару строчек кода на js?

не понимаю, почему не внедряют в браузеры препроцессоры всяких sass, less или типа того. Аналогия такая же как и с has, из jQuery. Хотя бы в режиме разраба. Тогда можно было бы легко менять темы. Желательно конвертить в обе стороны. В этом случае можно сильно сжать или модифицировать старые проекты.

Мне этого селектора не хватало в userCSS

Мне интересно, как сильно это будет съедать производительность при огромном сайте, и не будет ли это медленнее решений в реакт с хуками

Круто конечно, только поддержки нет нигде еще...

Один раз я пытался найти модификатор обратный для: not(). Минут 5 тупил

А где дисклеймер "не пытайтесь повторить это дома"?

Вроде этот селектор так долго не развивали потому что он ломает каскад. А каскад это цсс

Напишите ответ на комментарий, если это уже заработало

Really cool selector. On the other hand nowadays we render html using js so you can add any extra css class conditionally. It might be much cleaner to understand why stuff look differently.

Скоро селекторы и регулярки не отличишь друг от друга...