Есть два метода спрайтов изображений. В "классической" версии используются свойства css и background-position css. (как описано здесь http://www.alistapart.com/articles/sprites)
В "второй" версии используется тег изображения и его свойство css для клипа. (http://css-tricks.com/css-sprites-with-inline-images/)
Мой вопрос в том, что есть преимущества использования "второй" версии над "классической" версией?
спасибо и лучше, Виктор
Разница в основном сводится к семантике документа: вы должны использовать только фоны для декоративной и макетной графики и использовать только теги изображений для графики, которые являются частью содержимого вашей страницы.
Помните, что страницы должны быть полезными и полезными без CSS: со второй техникой это означало бы, что вся ваша карта спрайтов будет видна (вы не получили бы отсечения) везде, где вы использовали спрайт, - очень запутанный
В первой технике не было бы никаких спрайтов, но не было бы неправильным или запутанным.
Является ли графический контент или украшение немного сложным, когда вы рассматриваете такие вещи, как значки, - где спрайт-методы действительно полезны. Лично я предпочитаю использовать фоновые изображения для значков, поскольку они добавляют информацию другому элементу (например, ссылку или кнопочное управление), а не сами по себе элементы.
Вкратце - спрайты на основе тегов изображений - это немного сломанная техника - я бы не использовал ее.
Существует прецедент, когда вы хотите распечатать страницу со значками на ней (например, карта контактов организации с телефоном/skype/и т.д.). Таким образом, у вас есть два варианта:
- use separate img elements - use sprite via pseudo(:after) elements with 'content' and 'clip' property
Не забудьте указать размеры в теге img при использовании второго метода (клипа), чтобы весь спрайт не отображался даже при отключении 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 и
Я бы не рекомендовал этот метод. Это может быть не проблема, если вы просто хотите отображать небольшое количество изображений, но это очень медленно, если вы применяете его к сотням элементов (псевдо-элементы CSS плохо подходят для производительности в целом), особенно на медленных машинах (смартфонах и т.д.). ) или более старые браузеры, такие как IE8.