🥨 Попап вместо селекта: ✨новые HTML-элементы✨ наконец-то решат старую проблему 

00:00 Интро 00:22 В чём проблема? 01:50 Описание задачи 02:34 Недостатки селекта 04:36 Что нам нужно 05:22 Open UI 07:20 Попап вместо селекта 09:46 Стилизация попапа 11:45 Доступность и фокус 13:52 Кроссбраузерность 15:41 Выводы 16:59 Аутро

Всего лишь 30 лет понадобилось для стилизации селекта) Правильно дорогой идем, товарищи

Эх так бы в школе учли. Классно начал с готового примера, описал проблемы, потом перешёл на новый вариант и рассказал про его особенности. На самом деле не маленький объем информации, а уложен всего в 15 минут.

А что с локтем случилось? Авария на велосипеде или снова за доступность подрался?

Музыка и вставки-перебивки кайфовые. Надеюсь будет время и желание почаще снимать такие интересные и полезные ролики.

Прям так радостно стало)) А как глаз радуется) Скорее бы уже... Спасибо, Вадим🙏😁

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

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

Вадим, большое спасибо! Пожалуйста продолжай, очень ждем новое видео!

О, это прекрасно! Да свершится чудо 🙌

Выглядит многообещающе! Спасибо за контент! Как и всегда круто! 👍🏻

Вот действительно наконец за это взялись у самого куча велосипедов на тему селекта! Спасибо за видео!

Вадим! поздравляю тебя с новым местом!!!!

Вадим вы так доступно по полочкам даёте информацию. Огромное вам спасибо. Очень нравится ваша подача. Буду ждать новых обучающих видео

Вадим, огромное спасибо за материал! Как всегда одно удовольствие слушать 🙂

Как всегда очень интересно, спасибо за видео)

Поздравляю с переездом)

Мои поздравления с переездом.

Фантастика, осталось пару лет подождать. А пока - ng-select :)

Спасибо мужик. Нужная тема, и хорошая подача

Спасибо большое за ваш труд!

Когда это появится во всех браузерах - я напьюсь )) Спасибо за видео!

Круто спасибо!Совершилось чудо!

Как всегда - огонь! 👍

Надеюсь мультиселект тоже подвезут. Так, кайф конечно.

хорошие новости) спасибо за новинку

Лайк и подписка! ждем продолжения

Вадим, благодарю за крутое видео!

Вадим красавчик) 👑 Первый выпуск в новом 2022 году просто топчик)📌👍 Подкаст Веб-стандартов не в счет))) ⚡ Что с правым локтем?

Вадим, спасибо за обзор!

Круто! Спассибо, что рассказал. Неужели первые подвижки в этом направлении, давно пора. Чо я могу сказать, ребята "проанализировали" то, что и так уже было сделано везде одинаково, добавили слоты как во vue или react. Ничего инновационного, конечно, тут нет. Паттерны уже устоявшиеся и рабочие. Насчёт обратной совместимости, разве не для этого существует бесполезный доктайп? Если нужен старый селект, пишите старый доктайп. Если нужен новый, то новый. Зачем изобретать какие-то новые теги? Пока не понимаю, с какими трудностями столкнулись, мне кажется, достаточно было добавить слоты. А если бы старый селект ломался, то оставить старую реализацию только для старого доктайпа или ещё как-нибудь это дело версионировать.

Когда начал говорить про UI сообщество. как они анализируют - сразу перед глазами всплыла картинка из Идиократии, где вставляли фигурки в отверстия.

Сразу лайк за переезд в Берлин

Я тут внизу оставляю очередной респект за новое, интересное и понятное :)

*Увлекательно!*

блин, ну это супер. Ждем, ждем, ждем вот такого нативного компонента селекта + попапа. Вадим как всегда впереди планеты всей в обзоре будущих супер новинок веба, за что тебе огромное спасибо. И новое оформление вставочек в видео супер! )))

Писал свой компонент для оборачивания select, с клавиатурой и фолбэком к нативной реализации на мобильных устройствах, так что очень близко и актуально! В Берлин тоже переехал бы или в Амстердам ))

Давайте мы все сегодня немного порадуемся - Рад за селект и за ваш переезд в Берлин!

It's revolution, Johnny!

А все так хорошо начиналось...)

Оч круто И, возможно, имеет смысл выделить все это в спецификацию HTML 6

Превасзодная подача)

Огонь!

Привет из Берлина! 👋

Лучший!)

добро пожаловать в Берлин )))

ну круто. правда было бы здорово чтобы это бы без вот этого дива со слотом, а так огонь !)

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

30 лет уже тегу select. В прошлый раз datalist ввели. Теперь вот popup. Итог будет как всего: +1 тэг - рост энтропии. Вообще поведение form controls оно не совсем с легаси связано, изначально большую часть контроллов браузер пробрасывал в ОС, чтобы уже ОС решала что должно быть на месте button/input etc. И да изначально это было фичей - отсутствие влияния стилей на стандартные контролы системы дабы не сбивать пользователя с толку. Например в пресловутом IE select был всегда отдельным объектом Windows (который ОС, а не браузерный), и можно было получить его хэндл из внешней программы и посылать извне ему сообщения. Это если меня память не подводит.

Годный контент

Круто!

Круто. А можно сделать свежий обзор, уже прошел год, может появилось что-то новое и что-то добавили к этой штуке.

Вчера пытался реализовать. Накостылял через list_menu > ul > li

Штука очень классная, жду. Но т.к. часто делаю для аудитории, которые ещё и IE пользуют (всякие организации с традициями), то ждать ещё норм так)

От элемента формы требуется выбранное значение, остальной интерактив переносят в логику WebComponent или компонент Vue/Angular/React со слотом в виде options, которые логикой парсятся.

Супер!

Вау, это просто невероятно! Интересно, как это будет себя вести в мобильных браузерах, всё-таки нативные селекты довольно удобны на телефонах.

Очень крутые ролики, полезная информация, приятная подача, ты не зря стараешься) крутой чел

как всегда очень интересно, спасибо

Еще дейт пикеры гарячее место для стилизации :)

Ухххх.... Агонь. Ещё лет 30 и остальные браузеры начнут поддерживать)))

Интересно, спасибо за видео. Мне кажется, нужно ещё на эту кнопку добавить "svg стрелку вниз", чтобы пользователь понимал, что это выпадайка и можно выбрать другие опции. Но без неё красивее. Дилема...

👏 BRAVO !!!

Как я рад

Имхо, можно сделать что-то на наподобие 'use strict', но для html. Так можно было бы оставить привычные всем теги и добавить стилизацию. Но конечно же ждем светлое будущее в котором все будет прекрасно

Воу круто)) А вот интересно как долго ждать когда такие элементы будут работать в других браузерах?

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

наконец-то, пропажа нашлась) как добрался до Берлина ?)

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

Спасибо

Вадим, лучше Трептов-Кёпеника района нет 🙂

Пишется компонент select-menu на любимом фреймворке или веб-компонентах, api оставляем прежним от select, где надо реализуем слоты (optgroup и options), развешиваем директивы или тэг меняем. Настраиваем как нравится, можно инициализирующий скрипт по прежним select запустить. Так бы решал инженер, а не просто верстальщик.

Круто, спасибо 👍🔥

Через js пункты списка доступны? Например, я хочу выделить часть карты, которая будет выбрана в случае клика (но еще не выбрана), выделить ее пунктирным контуром, например. Или изменить selected option нажав на карту..

Вадим, привет! Подскажи, где почитать про rsync gulp? В конфигах по интернетам смотрел - ругается консоль при попытке залить файлы на сервер. Причем кракозябры какие-то, неочевидно очень.

Спасибо за видео, но не раскрыта тема вставки изображений в option ? он вообще возможен с новыми компонентами ?

Вадим, пожалуйста подскажи, какой у тебя шрифт в редакторе кода? Он очень красивый и удобный, хочу такой же попробовать!

Да, пришлось сделать свой селект который не селект вовсе а в конечном счёте текстовый инпут. Если эта вещь появится в браузерах будет отлично! Ждём :-)

Даже не верится, что однажды мы перестанем изобретать велосипеды для таких компонентов)

Пошел переписывать весь код :D

2022 год, мы радуемся, что примерно в 2024 году появится нативная стилизация тега select ))) мои слёзы, моя печаль

Ахринеть ... переезжаю в Берлин 17-го. Неужели Accenture захантили вас?)

Вадим, подскажите пожалуйста, какая у вас тема vscode установлена?

Хорошая новость, эх, быстрее бы все это заработало. Два года как-то многовато... Поздравляю с переездом! Аккуратнее на велике)

Вадим, добрый день, подскажите, пожалуйста, с помощью чего отрисовали такую карту? P.s. Berlin one love

даа это оч. актуальная проблема

Я джвадцать лет этого ждал 🤯

elbow-color: red;

самая главная проблема с селектом на всех работах это был селект с чекбоксами. который приходилось либо писать самим, либо качать что-то типа ng-select с npm

А при расположении элемента в форме его значение будет автоматически передаваться на сервер подобно нативному селекту? И присутствуют ли возможности поиска в списке опций?

Расскажите пожалуйста какой монитор у вас ? Пытаюсь что-то подобрать чтобы много читать или писать. Но от VA / 144 Hz глаза устают.

А что на счёт автоматического определения положения и выпадения вверх\вниз или за пределы браузера?

Спасибо! полезно! что с локтём?

я немножко порадовалась ^_^ спасибо!

Возможно не стоит менять ракурс 0:22 ? и так интересно слушать

Интересно, а можно ли данные из селекта вытащить, если закинуть в тег form? У меня когда-то был такой макет сайта, где список услуг выпадал селектом. И клиент выбирал селектами услуги и потом отправлял данные. Селект я стилизовал, через приложуху jquery, который прятал оригинальный селект, а новый который был сделан из div был виден пользователю. Вот только данные из такого селекта не отправлялись...)

Время открывать шампанское😄

А бордер-радиус для аутлайна с каких пор начал применяться? Я что то упустил этот момент

Хм, слоты в спецификации. Они там vue вдохновились или слоты были в веб-компонентах?

Есть надежда забыть про плагины для селекта))Т. н. велосипеды всегда намного больше нравились, чем стилизация того же select2)