Должны ли все презентационные изображения быть определены в CSS?

Question

Я недавно изучал (X) HTML и CSS, и один из основных принципов заключается в том, что HTML предназначен для структуры, а CSS - для представления.

Учитывая это, мне кажется, чтоЗначительное количество изображений на большинстве сайтов предназначено только для презентации и поэтому должно быть в CSS (с div или span для хранения их в HTML) - например, логотипы, изображения заголовков, фоны.

Однако,хотя примеры в моей книге помещают некоторые изображения в CSS, они все еще часто находятся в HTML.(Я просто говорю о «презентационных» изображениях, а не о «структурных» изображениях, которые являются ключевой частью контента, например фотографии на фото-сайте).

Должны ли все такие изображения быть в CSS?Или есть технические или логические причины держать их в HTML?

Спасибо, Грант

Answer 1

Если изображение является «контентом», скажем, в газетной статье, в редакционном изображении, то используйте тег img.Если это часть вашего пользовательского интерфейса, темы или обложки, или как там ни зовут, то да, поместите это CSS.

Рекомендуемые значения

• Разработка с использованием веб-стандартов (Зельдман)
• Пуленепробиваемый веб-дизайн (Дэн Седерхолм)
• Мастерство CSS (Энди Кларк, Энди Бадд, Кэмерон Молл)

Answer 2

Одной из причин размещения этих изображений в CSS может быть обслуживание разных браузеров с одного и того же веб-сайта, просто путем изменения CSS: например, если вы обнаружите мобильный / встроенный / карманный браузер, вы можете дать им тот же HTML, нос CSS, который не включает изображения.

Answer 3

Я положил их в CSS, если это возможно.Одна причина в том, что я думаю, что они принадлежат там, как вы упомянули, а другая - возможность использовать спрайтов .Это может значительно сократить время загрузки вашей страницы.

Answer 4

Иногда загрузка изображений пользовательского интерфейса с помощью CSS также не позволяет пользователям загружать изображения вашего пользовательского интерфейса на свои диски при сохранении страницы.

Но, конечно, есть и другие способы их сохранения, но только один момент, который нужно добавить.

И браузеры склонны отдавать приоритет CSS больше, чем HTML, поэтому загрузка изображений через CSS может быть немного быстрее по сравнению с HTML.

Answer 5

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

Если вы думаете о доступности, встроенные в HTML-изображения могут содержать альтернативную информацию и заголовок. Так, например, когда вы наводите курсор мыши на логотип вашей компании, браузер может показать девиз вашей компании, если вы добавите его с атрибутом title = "motto" в тег img. Вы не можете сделать это с помощью CSS.

Также люди используют для вставки изображений в HTML, а не в CSS, и поведение сложно изменить.

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

Answer 6

Свойство src тега img является обязательным в соответствии с HTML 4.01 / XHTML 1.0 DTD. Вот почему он всегда должен быть включен в HTML.

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