#фишка дня

А давайте немного заглянем в будущее.

Наверняка же кто-то из вас делал различные выпадающие списки на замену убогому select. То, почему select такой убогий — это тема для отдельной большой статьи, я ещё пытаюсь собрать материалы. Там не только про него, впрочем... Но не суть.

Так вот, если у вас есть Chrome Canary aka 120, можно пройти в chrome://flags, включить Experimental Web Features и увидеть возможности будущего элемента selectlist.

Уна Кравец собирает различные примеры использования в своей коллекции на Codepen: https://codepen.io/collection/QWeLGB?cursor=eyJwYWdlIjoyfQ==

Вот, например, меню из Airbnb с видеоиллюстрации: https://codepen.io/una/pen/PoXbgVW

А вот GitHub: https://codepen.io/una/pen/KKbNYbo

Там много разных. Повторю: только на Canary и только с Experimental Web Features.

Впрочем, естественно, давно имеется веб-компонент, ведущий себя ровно так же: https://github.com/luwes/selectlist-polyfill

Так что пробовать можно уже сейчас. Пора начинать!

P. S. я тут сделал sortable multiselect combobox на React Downshift. Надо кому инструкцию?

#select #html #future

#такое дня

Ничего необычного на иллюстрации не замечаете?

А здесь происходит ого-го какая драма!

Итак, я понятия не имею, зачем это всё делается, но всеми так любимый виджет выбора aka select до сих пор получает обновления!

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

Впрочем, из-за этой особенности он не отображается в Zoom- и Meet- и прочих презентациях.

Ладно, к делу. Вы в курсе, что начиная с Chrome 119, Firefox 122 и Safari 17 вы можете использовать горизонтальный разделитель чтобы разбить список для выбора?

Да-да, больше никаких <option disabled>-----</option>! Просто ставите <hr> и всё.

Ну, типа... ну ок.

Все, конечно, ждём popover и selectlist. Эта игра в доделки раздражает.

#css #select #form #widget

#статья дня

Ну что, давайте хором назовём самый больной элемент из всего набора стандартных HTML-виджетов.

Конечно же это select.

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

Тем временем, пропозал кастомного select дошёл до Stage 2 в WHATWG, а это значит, пришло время расчехлять хотелки. Иначе останемся с чем-то очередным поломанным и недоделанным.

Естественно, инициатива здесь исходит от команды Chrome, вот свежий RFC: https://developer.chrome.com/blog/rfc-customizable-select

Кто не знает, что такое RFC — это, буквально, Request For Comments, запрос комментариев. Ваших, конечно, чьих же ещё.

Надо заметить, что раньше переиспользование select не предполагалось. Рассчитывали создать новый компонент — selectmenu, переименованный потом в selectlist. Но от идеи в итоге отказались.

Чтобы попробовать новый select нужен Chrome Canary 130 с включённым флагом #experimental-web-platform-features.

На Linux это, впрочем, Chromium Dev. Canary для нас не нашлось.

Ну, какие будут впечатления?

P. S. Есть форма в Google Forms для отправки этих самых впечатлений команде.

#css #select #custom

#новость дня

Я терпел с 26 марта! Потому что именно 26 марта Google должны были объявить о запуске Google Chrome 135, в котором поддержка кастомизации нативного select перестаёт быть экспериментальной!

Но 26 марта, несмотря на помпу новости, они раскатили обновление лишь на малый процент пользователей.

И вот, наконец, долетело и мне! Срочно тестирую: https://developer.chrome.com/blog/a-customizable-select

Кастомные селекты прошли огромный путь от идеи забить на всё и делать новый элемент до переписывания нативного селекта.

И я, честно говоря, даже не уверен, что лучше. У нативного селекта есть большое преимущество — его не ограничивает размер окна. И даже какой-никакой поиск с клавиатуры есть, ну и управление.

Впрочем, на этом преимущества заканчиваются.

А вот в новом селекте можно даже HTML писать в option!

Есть даже дока на MDN: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select

Поддерживается, правда, пока только в Chrome, потому что реализован новый селект на CSS anchor positioning API.

Крайне рекомендую сначала с этим API ознакомиться, потому что ни одна из демок гугла не умеет правильно определять границы экрана :)

Мы в @htmlshitchat попробовали собрать демо: https://jsbin.com/yizawexeyi/edit?html,css,output

Ну такое, если честно. Могли бы хоть для презентации постараться и применить position-try на выпадающий список.

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

Кроме заказчиков.

#select #custom