Разделители внутри select HTML

Разделители внутри select HTML

От автора: например, дизайн требует разделителя между параметрами в меню select HTML. Насколько трудным это может оказаться?

Подход имитации option

Это то, что вы обычно видите в StackOverflow:

К сожалению, этот хак не работает, как есть:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Вы не можете знать, каким шрифтом он будет отображаться, поэтому, возможно, подчеркивания не образуют непрерывную линию. (Другие символы Unicode дают еще более запутанные результаты.)

Вспомогательные технологии не объявляют имитированный разделитель единым целым, в худшем случае зачитывают «подчеркивание подчеркивание подчеркивание подчеркивание…» (К сожалению, мы не можем добавить role=»separator».)

Функция Bizarre WebKit / Blink

Если мы вставляем между элементами option разделитель hr через скрипт, он отображается как нативный разделитель выпадающего меню (по крайней мере, на MacOS):

Как ни странно, это не работает, если он находится в исходном HTML. По-моему, это одна из тех функций, которые запрашивала команда Apple Mail, как и странные старые -webkit-line-clamp. В конце концов, в Windows нет даже разделителей в выпадающих меню.

Возможно, это может работать в стандартном HTML, без необходимости использовать скрипты. <menu type=»context»> дает возможность использовать дочерние элементы hr для этого эффекта. Но это только специфичная для движка особенность. Что еще мы можем сделать?

Работать в рамках ограниченной семантики Web с optgroup

Вам нужно разделить меню на части, да? Ну, единственный реальный способ сделать это в HTML — optgroup. Это не разделитель, но функционально это эквивалентно — section это своего рода hr.

Для optgroup требуется атрибут label, так что вам придется задавать имена для групп — легче сказать, чем сделать. Например, посмотрите на все разделители в этом стандартном меню «Edit» в MacOS:

Разделители внутри select HTML

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

Единственное реальное решение

Всегда есть самый надежный и доступный способ: изменить дизайн. Изменение дизайна из-за ограничений программного обеспечения может быть допустимым компромиссом.

Автор: Taylor Hunt

Источник: https://codepen.io/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий