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

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

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

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

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

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

Ответ 1

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

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

Разработка веб-стандартов (Zeldman)
Веб-дизайн Bullet Proof (Dan Cederholm)
Мастерство CSS (Энди Кларк, Энди Бадд, Кэмерон Молл)

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 6

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

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

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