От автора: например, дизайн требует разделителя между параметрами в меню select HTML. Насколько трудным это может оказаться?
Подход имитации option
Это то, что вы обычно видите в StackOverflow:
<!-- This will work poorly, see below --> <select name="because-you-are" required> <option value="provocative">One great thing</option> <option value="fascinating">And another great thing</option> <option disabled value="">__________</option> <option value="robotnik">That’s two great things</option> </select>
К сожалению, этот хак не работает, как есть:
Вы не можете знать, насколько широко будет отображаться меню, особенно на мобильных ОС, так что имитированный разделитель, созданный из подчеркиваний, может быть перенесен.
Вы не можете знать, каким шрифтом он будет отображаться, поэтому, возможно, подчеркивания не образуют непрерывную линию. (Другие символы 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.
<select name="handsomest"> <optgroup label="The Brothers Strong"> <option>Strong Sad</option> <option>Strong Mad</option> <option>Strong Bad</option> </optgroup> <option>The Cheat</option> </select>
Для optgroup требуется атрибут label, так что вам придется задавать имена для групп — легче сказать, чем сделать. Например, посмотрите на все разделители в этом стандартном меню «Edit» в MacOS:
Можете вы дать краткое и точное название для каждой из этих групп? Что еще более важно, помогут они пользователю в принципе, или внесут словесный беспорядок? Apple утверждает, что они просто внесут беспорядок: Используйте разделительные линии для создания визуально различимых групп связанных пунктов меню. Количество групп, которые необходимо предоставить, является частично эстетическим решением, а частично решением юзабилити.
Единственное реальное решение
Всегда есть самый надежный и доступный способ: изменить дизайн. Изменение дизайна из-за ограничений программного обеспечения может быть допустимым компромиссом.
Автор: Taylor Hunt
Источник: https://codepen.io/
Редакция: Команда webformyself.