следует связать значки, которые будут отображаться как изображения или с помощью css background-image url's?

Question

Я хочу использовать иконографию в веб-интерфейсе, сохраняя при этом контекстный язык того, что будет нажимать на ссылку, но, возможно, не отображает текст и пространство для UI. Например, используя экраны CRUD, я хочу показать значок плюса для добавления элемента, значок минуса для удаления, его значок карандаша для его редактирования и увеличительное стекло для поиска другого элемента. Есть несколько способов добиться этого.

1. вынести img элемент внутри a nchor. Атрибут img alt будет описывать, что представляет значок (alt = «значок карандаша»), а атрибут title будет описывать предполагаемый результат (т. Е. «Нажмите здесь, чтобы отредактировать этот виджет»).

2. Render a nchor tag only и использовать css для отображения изображения в качестве фона. В этом случае содержание анкера должно описывать предполагаемые последствия, однако it needs to be wrapped in a span element so that its display style can be set to none. Якорь также должен содержать атрибут заголовка, соответствующий содержимому (без соответствующего промежутка времени).

Мне кажется, что вариант # 2 проще реализовать в приложении asp.net mvc. Поскольку значок является проблемой дизайна, а не проблемой разметки, имеет смысл определить изображение в CSS. Это также облегчает работу с точки зрения обслуживания кода ... изменение местоположения img src потребует изменений в файле CSS и без файлов просмотра. Удаление CSS приведет к тому, что приложение снова вернется в полнотекстовую доступность.

Что смешно для меня - это часть, связанная с вложением содержимого ссылки в промежуток, чтобы он мог установить disply: none; в css. Другое дело, если я использую селектор: hover для обмена изображениями и обеспечения эффекта опрокидывания/развертывания, изображения, похоже, занимают больше времени, чем при использовании javascript.

Я ничего не теряю здесь?

Answer 1

Мы часто используем опцию № 2, но по-другому.Вместо того, чтобы обертывать содержимое привязки в промежутке, используйте CSS для привязки якоря как display: block или inline-block, затем установите его text-indent в -1000em (или аналогичный, просто выберите большое значение). Я думаю, вы также должны установить overflow в hidden.

Если вы делаете фоновое изображение как спрайт (одно изображение с состоянием не зависания и наведения), используйте :hover для изменения фона, вы должны избегать мерцания/задержки, которые вы можете видеть сейчас , Это также приводит к еще одному отдельному запросу, поражающему ваш веб-сервер.

Обратите внимание, что для этого также требуется явно установить width и height якоря в вашем CSS в соответствии с размером значка.

Answer 2

Если значок передает информацию, которая не дублирует информацию уже в документе, то она должна быть реальной <img>.

Однако атрибут alt должен содержать вариант к изображению, а не описание его.

alt="Edit this widget" 

Атрибут названия должен использоваться только для предоставления консультативной информации (думает, что «дополнительные оплачиваемые предметы»), и вы должны избегать использования конкретной реализации терминологии (например, «Нажмите здесь»).

Что смешно для меня - это часть, связанная с вложением содержимого ссылки в промежуток, чтобы он мог использовать: none; установить в CSS

Если идти по пути сдачи содержание в фоне изображения и скрывая реальный текст, по крайней мере негативно text-indent его из виду, а не display: none ИНГ его и делает его невидимым для читателей экрана.