Техника CSS Sprite, CSS фон или клип IMG

Question

Существует два метода спрайта изображения. «Классическая» версия использует свойства CSS background-position и background-position. (как описано здесь http://www.alistapart.com/articles/sprites)

«Вторая» версия использует тег image и его свойство clip css. (http://css -tricks.com / css-sprites-with-inline-images / )

У меня вопрос: есть ли преимущества использования «второй» версии по сравнению с «классической» версией?

спасибо и всего наилучшего, Viktor

Answer 1

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

Помните, что страницы по-прежнему должны быть полезными и пригодными для использования без какого-либо CSS: со вторым методом это будет означать, что вся ваша спрайт-карта будет видна (вы не получите никакого отсечения) везде, где вы использовали спрайт - очень запутанно !

Первая техника не показала бы никаких спрайтов, но также не была бы неправильной или сбивающей с толку.

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

Короче говоря - спрайты на основе тегов изображений - это немного неработающая техника - я бы не стал ее использовать.

Answer 2

Существует случай, когда вы хотите напечатать страницу с иконками (например, карточку контакта организации с телефоном / скайп / и т. Д.). Итак, у вас есть два варианта:

 - use separate img elements
 - use sprite via pseudo(:after) elements with 'content' and 'clip' property

Answer 3

Не забудьте также указать размеры в теге img при использовании второго метода (clip), чтобы весь спрайт не отображался, даже если CSS отключен. Одним из преимуществ этого метода является то, что с клипом изображения отображаются даже в том случае, если в Windows включены высококонтрастные темы, что не относится к фоновым изображениям.

Проверьте эти две статьи для получения дополнительной информации:

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

использовать sprite через псевдо (: after) элементы со свойствами 'content' и 'clip'

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