🥨 Попап вместо селекта: ✨новые 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 Аутро
Нравится? Становитесь патронами https://www.patreon.com/pepelsbey
Демо с попапом https://pepelsbey.github.io/playground/popup-select/
Демо Патрика Броссета https://codepen.io/captainbrosset/pen/jOGVebx
Селект в Open UI https://open-ui.org/components/select
⚠️ Не забудьте включить Experimental Web Platform features в chrome://flags/
* * *
Камера: Sony A7C
Объектив: Sony 24–70 мм, f/4
Звук: Sound Devices MixPre-3
Микрофон: Audio-Technica BP40
Свет: Amaran 200d + Light Dome
Софт: DaVinci Resolve, iZotope RX
Видео 🥨 Попап вместо селекта: ✨новые HTML-элементы✨ наконец-то решат старую проблему канала Вадим Макеев
00:22 В чём проблема?
01:50 Описание задачи
02:34 Недостатки селекта
04:36 Что нам нужно
05:22 Open UI
07:20 Попап вместо селекта
09:46 Стилизация попапа
11:45 Доступность и фокус
13:52 Кроссбраузерность
15:41 Выводы
16:59 Аутро
Нравится? Становитесь патронами https://www.patreon.com/pepelsbey
Демо с попапом https://pepelsbey.github.io/playground/popup-select/
Демо Патрика Броссета https://codepen.io/captainbrosset/pen/jOGVebx
Селект в Open UI https://open-ui.org/components/select
⚠️ Не забудьте включить Experimental Web Platform features в chrome://flags/
* * *
Камера: Sony A7C
Объектив: Sony 24–70 мм, f/4
Звук: Sound Devices MixPre-3
Микрофон: Audio-Technica BP40
Свет: Amaran 200d + Light Dome
Софт: DaVinci Resolve, iZotope RX
Видео 🥨 Попап вместо селекта: ✨новые HTML-элементы✨ наконец-то решат старую проблему канала Вадим Макеев
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Где использовать флексы, а где гриды? 🤨 Спойлер: да где хотите](https://i.ytimg.com/vi/ST1EvRemB_U/default.jpg)
![Война](https://i.ytimg.com/vi/TwlklIjvB88/default.jpg)
![Меню для меню, гриды или Бутстрап, целесообразность удобства](https://i.ytimg.com/vi/QAEQ6CG-xBQ/default.jpg)
![Новый image-set как 🖼 тег picture в CSS: не только ретина, но и WebP и AVIF](https://i.ytimg.com/vi/VnjrIGvoO_Y/default.jpg)
![](https://i.ytimg.com/vi/Zr-btzq8OhE/default.jpg)
![Мой VS Code ⚙️ Светлая тема, удобный поиск, полезные расширения и настройки](https://i.ytimg.com/vi/_8MwZ_cgvZ8/default.jpg)
![Use dialog for the easiest way to make a popup modal](https://i.ytimg.com/vi/TAB_v6yBXIE/default.jpg)
![✅ Кастомные чекбоксы правильно](https://i.ytimg.com/vi/E6kLaaQFctU/default.jpg)
![Табы или пробелы? ➡️ Почему мы повернули не туда и как табы помогают](https://i.ytimg.com/vi/k-fwgO6m-9M/default.jpg)
![Неправильные правила по доступности вёрстки Студии Лебедева](https://i.ytimg.com/vi/yXW2uvA-SsY/default.jpg)
![Погружение в object-fit: cover с полифилом и без](https://i.ytimg.com/vi/aZJMOVpMhtc/default.jpg)
![ПРОГРАММА ДУШИ](https://i.ytimg.com/vi/kd_YNmK4pmM/default.jpg)
![:has в CSS — псевдокласс из будущего 👽 на примере карточки новости](https://i.ytimg.com/vi/aJ1XMcwys48/default.jpg)
![Светлая 🌕 и тёмная 🌑 темы на CSS: кастомные свойства, подключение, фолбэк для старых браузеров](https://i.ytimg.com/vi/Qwuyeo7iuNY/default.jpg)
![Цветные вкладки 🌈 на theme-color для Safari, Vivaldi и Chrome. Бонусом ES-импорты, сервер на Node.js](https://i.ytimg.com/vi/YQM56jX4yEc/default.jpg)
![EditorConfig — порядок в текстовых файлах: принципы работы, интеграция в редакторы, автоматизация](https://i.ytimg.com/vi/wWbDC1C7JEE/default.jpg)
![Звёздный рейтинг ⭐️⭐️⭐️⭐️⭐️](https://i.ytimg.com/vi/EbajTYI-gg8/default.jpg)
![Модальные окна (попапы) на HTML CSS JavaScript. Всплывающие окна. Как это сделать?](https://i.ytimg.com/vi/qoO1ZNi1LyI/default.jpg)
![Стилизация Checkbox и Radio Button. Как изменить checkbox css. Стилизация radio css](https://i.ytimg.com/vi/L0M9Q6tt5Ss/default.jpg)
![6+5 способов сделать две колонки ✌️ От таблиц и флоатов до гридов и полной дичи 😱](https://i.ytimg.com/vi/DxSjlTKvmS8/default.jpg)