Bezdepbonusu7Программирование: статьи и ответы

Вопрос

Должны ли значки ссылок отображаться как изображения или с URL-адресом фонового изображения css?

Автор вопроса: danludwigОтветов: 2

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

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

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

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

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

Я что-то пропустил здесь?

imageiconscssbackground-image

Ответы

Ответ 1 · рейтинг 2 · super_seabass

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

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

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

Ответ 2 · рейтинг 1 · Quentin

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

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

alt="Edit this widget"

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

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

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы