значки ссылок должны отображаться в виде изображений или с помощью URL-адресов фоновых изображений CSS? - PullRequest
Новая
       15

значки ссылок должны отображаться в виде изображений или с помощью URL-адресов фоновых изображений CSS?

0 голосов
/ 17 января 2011

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

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

  2. Визуализируйте только тег nchor a и используйте css для отображения изображения в качестве фона. В этом случае содержимое якоря должно описывать предполагаемое последствие, однако его необходимо заключить в элемент span, чтобы его стиль отображения мог быть установлен равным none . Якорь также должен содержать атрибут заголовка, соответствующий содержимому (конечно, без окружения).

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

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

Я что-то здесь упускаю?

Ответы [ 2 ]

2 голосов
/ 18 января 2011

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

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

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

1 голос
/ 17 января 2011

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

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

alt="Edit this widget"

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

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

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

...