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 Аутро

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

@monolit-8346

3 жыл бұрын

Да-да)))) Такая же история

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

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

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

@pepelsbey

3 жыл бұрын

Я там бывал несколько раз на KharkivJS и скучаю по завтракам в 1654 :)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Очень круто!

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

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

@pepelsbey

3 жыл бұрын

Вы так говорите, как будто это плохо

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

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

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

Гугл

Очень круто

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

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

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

Спасибо! )

На вид топчик

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

@CzarOfScripts

3 жыл бұрын

А если display: none, как нажмешь на инпут который в блоке то?)

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

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

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

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

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

подписка!

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

круто

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

Ждем хэз)

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

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

@pepelsbey

3 жыл бұрын

Они уже почти не нужны :) Но я подумаю, спасибо

@dreamypioneer3760

3 жыл бұрын

@@pepelsbey а что вы вместо этого используете?

it is good!!!

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

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

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

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

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

@pepelsbey

3 жыл бұрын

Уже работает, попробуйте

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

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

@pepelsbey

3 жыл бұрын

Свитчи NovelKeys Blueberry, клавиатура KBD67 Lite

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

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

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

@whitebox5697

3 жыл бұрын

Потихоньку....

@bugoaneo

3 жыл бұрын

@@whitebox5697 Собирают....

@gregorzhilich8696

3 жыл бұрын

Всмысле?

@user-bo2jz1pc7p

3 жыл бұрын

Причем тут препроцессоры и :has? Пока то, что написал Вадим в чистом css на любом препроцессоре можно ещё больше сократить просто за счет правильного использования &. А препроцессоры никак не позволяют реализовать :has или что-то ещё. Их призвание - ускорить рутину в первую очередь.

@lenaryan

3 жыл бұрын

@@user-bo2jz1pc7p при том, что CSS становится более развитым и мощным, и скоро препроцессоры вообще не понадобятся)

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

@pepelsbey

3 жыл бұрын

Думаю, можно комбинировать оба подхода - практика покажет, что будет лучше. Я позволил себе пофантазировать, как это может помочь :)

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

@pepelsbey

3 жыл бұрын

До абсурда доходит Tailwind, а я думаю о гибкости компонента. Стили, разметка и скрипты от такого если и вырастают, то незначительно. А могут и уменьшаться. Вы не там ищете опасность для перфоманса :) Вот вам лучше видео в тему kzread.info/dash/bejne/fpxt05WhYs7OnMY.html

@dmitrybiletskyi7020

3 жыл бұрын

@@pepelsbey спасиб:)

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

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

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

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

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

ну ты ювелир

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

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

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

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

@pepelsbey

3 жыл бұрын

Надо самому уже дизлайкнуть, сколько можно )

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

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

@pepelsbey

3 жыл бұрын

Не думаю, что вот прямо нужно (и можно) заменить все способы на этот. Но у нас появится новый инструмент :)

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

@pepelsbey

3 жыл бұрын

Не знаю, что на это ответить, но напишу что-нибудь для вежливости 😀

@user-vk4si1oz7w

3 жыл бұрын

Вадим, очевидно, что контент высочайшего качества. Редко что-то комментирую ))

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

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

@pepelsbey

3 жыл бұрын

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

@capstanfearless

3 жыл бұрын

@@pepelsbey спасибо, в итоге сам согласился с дизайнером и с тобой, смотрится второй шрифт шикарно

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

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

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

has классный

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

@pepelsbey

3 жыл бұрын

Собственно, компания Eyeo, которая делает Adblock Plus, и попросила Igalia внедрить это нативно в браузеры.

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

@pepelsbey

Жыл бұрын

codepen.io/pepelsbey/pen/WNYNbab

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

@pepelsbey

2 жыл бұрын

XPath можно использовать в JS developer.mozilla.org/en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript

@user-ds8dn7rq3b

2 жыл бұрын

@@pepelsbey Это понятно, просто можно было бы без :has достаточно удобно обрабатывать подобные селекторы. с помощью своих псевдоклассов

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

@pepelsbey

3 жыл бұрын

Экспериментальный флаг на постоянной основе - это глупость какая-то :) На самом деле, ребята придумали, как это сделать стабильно. Если у инженеров Chrome будут минимальные сомнения по перфомансу, то фича не выйдет. Но пока кажется всё в порядке - в посте есть данные по тестам перформанса.

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

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

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

@pepelsbey

3 жыл бұрын

Сложность конструкций выбираете вы сами: хотите писать проще или иначе - пишите :)

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

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

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

@pepelsbey

3 жыл бұрын

Это VS Code kzread.info/dash/bejne/kWyB2byYk8rcips.html

@mortvyyded3955

3 жыл бұрын

@@pepelsbey спасибо большое)

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

@pepelsbey

3 жыл бұрын

В статье Брайана есть ссылка на тесты скорости, почитайте.

@alekssjeva951

2 жыл бұрын

Не видел, чтобы PageSpeed снижал оценку за использование селекторов. Вот всякий jQuery он ненавидит, это факт.

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

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

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.

@pepelsbey

3 жыл бұрын

I’ve been rendering HTML 15 years ago using PHP and adding “first” and “last” class names for styling because :first-child and :last-child weren’t supported in old IE versions. I don’t wanna do this anymore. And yes, I’ve seen the code where people use JS for :hover, @media, animations and transitions. Usually it’s a slow mess that takes forever to load and render.

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

@i17talk8

3 жыл бұрын

и почему селекторы не могут быть вида xpath тоже не понимаю. Вроде там с родителями и сложными условиями тоже проблем нет

@i17talk8

3 жыл бұрын

или вида SQL :)

@pepelsbey

3 жыл бұрын

Вы можете зайти к ребятам, которые делают CSS и спросить, почему так :) github.com/w3c/csswg-drafts

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

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

@pepelsbey

3 жыл бұрын

Ну, тогда срочно забудьте всё, что я сказал )

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

@pepelsbey

3 жыл бұрын

Сайты на офигенном 3D - это узкая ниша: посмотрели, кинули ссылку друзьям и забыли. И вернулись в информационные интерфейсы, где карточки, блоки и всё сильно проще. И для таких задач этот селектор пригодится. Если вы не разделяете мои эмоции - это ничего.

@user-ql4xu5qu2u

3 жыл бұрын

@@pepelsbey в целом то так, но мы же про будущее) На флеше довольно информативно получалось, и одновременно очень красиво. Думаю туже же и вернемся, только уже без adobe(

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

@pepelsbey

3 жыл бұрын

В статье Брайана есть сслыка на исследование перфоманса нативной реализации. Быстрее хуки или нет - это не совсем корректный вопрос. Быстрее ли :has на странице без React, чем React с хуками? Конечно быстрее. А дальше уже сами усложняйте и считайте, в зависимости от вашего приложения. Главное не забывайте, что React приходит и уходит, а CSS встроен в браузеры.

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

@pepelsbey

3 жыл бұрын

Знаете, я слышал, что можно не использовать те возможности языка, которые не нравятся или не подходят к задаче. Возможно, это просто слухи, но звучит разумно :)

@smith-dev

3 жыл бұрын

@@pepelsbey к чему эта токсичность? Я написал, почему лично я не буду его использовать, Вы же сами попросили в видео написать свое мнение.

@pepelsbey

3 жыл бұрын

Извините, если это прозвучало грубо. Я как раз и пытался сформулировать, что у всех может быть свой взгляд и можно выбрать подход - язык позволяет.

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

@pepelsbey

3 жыл бұрын

Я предупредил, что браузер крашится )

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

@pepelsbey

3 жыл бұрын

Разверните, пожалуйста :)

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

@state_of_games

2 жыл бұрын

надо срочно в прод внедрять, пусть все обновляются до canary с флагом!