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!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Очень круто!

Гугл

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

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

Очень круто

На вид топчик

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

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

Спасибо! )

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

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

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

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

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

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

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

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

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

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

подписка!

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

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

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

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

it is good!!!

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

круто

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

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

Ждем хэз)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ну ты ювелир

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

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

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

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

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

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

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

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

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

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

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

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

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

has классный

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

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

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

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

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

не понимаю, почему не внедряют в браузеры препроцессоры всяких 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.

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

Я считаю, что это лишнее усложнение, тяжело будет поддерживать, не зря же мы выбираем БЭМ. Проверки наличия контента внутри, все равно нужно производить js'ом. Добавить модификаторов дело 3х минут, зато будет явное представление. Больше кода, это не плохо, если его легче понимать, а родитель влияющий на ребенка это уг.

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

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

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