Все представляемые изображения должны быть определены в CSS?
Я учился (X) HTML & CSS недавно, и один из основных принципов - то, что HTML для структуры и CSS для презентации.
Имея это в виду, мне кажется, что достаточное количество изображений на большинстве сайтов только для презентации, и как таковой должен быть в CSS (с отделением или промежутком для содержания их в HTML) - например, логотипы, изображения заголовка, фоны.
Однако, в то время как примеры в моей книге помещают некоторые изображения в CSS, они находятся все еще часто в HTML. (Я просто говорю о 'представляемых' изображениях, не 'структурных', которые являются ключевой ролью содержания, например, фотографии на фото-сайте).
Все такие изображения должны быть в CSS? Или есть ли технические или логические причины сохранить их в HTML?
Спасибо, предоставление
6 ответов
Если изображение является «содержанием», скажем, в газетной статье, редакционным изображением, тогда используйте тег img. Если это часть вашего пользовательского интерфейса, темы, скина или любого другого имени, тогда да, поместите его в CSS.
Рекомендуемая литература
- Дизайн с использованием веб-стандартов (Зельдман)
- Пуленепробиваемый веб-дизайн (Дэн Седерхольм)
- Мастерство CSS (Энди Кларк, Энди Бадд, Кэмерон Молл)
Ну, это зависит от обстоятельств. Например, если вы хотите создать какие-либо эффекты, когда курсор мыши находится над изображением, оно должно быть в HTML. Когда вы помещаете изображение в HTML, вы можете позиционировать его более свободно, чем в CSS. Кроме того, насколько мне известно, изображения, включенные в CSS, не сканируются (вы можете быть заинтересованы в том, чтобы логотип вашей компании сканировали поисковики).
Если вы думаете о доступности, встроенные изображения HTML могут иметь информацию о alt и заголовке. Так, например, когда вы наводите указатель мыши на логотип своей компании, браузер может отображать девиз вашей компании, если вы встроите его с атрибутом title = "motto" в тег img. Вы не можете этого сделать с помощью CSS.
Также люди привыкли помещать изображения в HTML, а не в CSS, и поведение сложно изменить.
В заключение, в зависимости от ваших потребностей, CSS недостаточно гибок, чтобы соответствовать вашим потребностям, и вам следует помещать изображения в HTML. Но если CSS соответствует вашим потребностям в изображениях пользовательского интерфейса, тогда CSS лучше.
Если возможно, я помещаю их в CSS. Одна из причин заключается в том, что я думаю, что они принадлежат именно этому, как вы упомянули, а другая - возможность использовать спрайты . Это может значительно сократить время загрузки вашей страницы.
Одной из причин для помещения этих изображений в CSS может быть обслуживание разных браузеров с одного и того же веб-сайта, просто изменив CSS: например, если вы обнаружите мобильный / встроенный / карманный браузер, вы можете предоставить им тот же HTML, но с помощью CSS, не включающего изображения.
Иногда загрузка изображений пользовательского интерфейса с помощью CSS также не позволяет пользователям загружать изображения пользовательского интерфейса на свои диски при сохранении страницы.
Но, конечно, есть и другие способы сохранить их, но это просто замечание.
И браузеры склонны отдавать предпочтение CSS больше, чем HTML, поэтому загрузка изображений через CSS может быть немного быстрее, чем через HTML.
Свойство src тега img является обязательным согласно HTML 4.01/XHTML 1.0 DTD. Поэтому оно всегда должно быть включено в HTML.
Вы можете указать его в CSS в целях подгонки, но большинство изображений в большинстве случаев статичны и не меняются, поэтому вставлять его в CSS - ненужный шаг.