Важно! Создание прибыльных веб сайтов и поисковое продвижение сайтов в Москве: веб-компания StudioForYou!
CSS Sprites - что это и почему требует внедрения в повседневную практику веб-разработки?
Опубликовано Апрель 1st, 2008 в CSS |
Автор: Крис Койер
Перевод: Всеволод Козлов
В поиске различных приемов уменьшения количества HTTP-запросов и ускорения загрузки сайтов задействовано огромное число веб-разработчиков. Приемы находятся, но, увы, применяются только профессионалами, остальным - лень и вообще неохота разбираться в чем-то новом.
В этой статье я расскажу Вам об отличном способе снижения в разы количества HTTP-запросов и ускорения загрузки Вашего сайта!
Как Вы поняли, речь пойдет о CSS Sprites! Русского аналога я этому понятию не нашел и не придумал, посему буду называть это своим англоязычным именем.
Не буду лить теорию, а сразу перейду к наглядной демонстрации мощи данного приема!
Допустим, имеется навигационное меню, состоящее из 5 пунктов, каждый из которых помимо текста содержит изображение с эффектом ролловера (при наведении мыши на изображение оно подменяется другим):
Фрагмент CSS-кода этого меню
#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url('../img/image1.gif')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.gif')}
#nav li a.item2 {background-image:url('../img/image2.gif')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}
...
Как видите, используется 10 изображений, отсюда имеем 10 HTTP-запросов, общий вес этих ихображений 20.5 Кб.
Используя CSS Sprites, мы уменьшим число HTTP-запросов до 1, а общий вес изображения (уже одного!) до 13 кб.
Фрагмент CSS-кода с использованием CSS Sprites
#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
...
Как Вы уже поняли, суть CSS Sprites заключается в использовании 1 изображения вместо 10.
Эффект ролловера задается в CSS с помощью задания отрицательного значения по вертикали:
Для бесплатной оценки параметров загрузки Вашего сайта используйте сервис WebSiteOptimization.
Оригинал статьи: CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Похожие статьи по блогингу и веб-местерингу:
Fatal error: Call to undefined function: similar_posts() in /home/u82003/w3school.ru/www/blog/wp-content/themes/w3school-blog/single.php on line 35