Рецепты CSS

Всем привет. Если иного не требуется все картинки лучше подгружать бакгроундом через css. Это позволяет очень сильно уменьшить вес конечного html кода и в конечном итоге увеличить скорость загрузки страницы.

Сегодня я расскажу о способе немного оптимизировать и упростить CSS
Допустим надо сделать меню вида:

Что можно сделать. Можно нарезать 5 маленьких картинок и в стильнике прописать бакгроунд.
Например так:
CSS:

ul#menu li {
	list-style-type: none;
	padding-left: 35px; /* отступ на ширину картинки */
	height: 27px;
	}
ul#menu li.news {
 	background: url(news.gif) no-repeat;
 	}
ul#menu li.fav {
 	background: url(fav.gif) no-repeat;
 	}

HTML:

<ul id="menu">
     <li class="news"><a href="#">Новости</a></li>
     <li class="fav"><a href="#">Избранное</a></li>
</ul>

Хороший аккуратный и валидный код. Но если таких пунктов будет не 5 а 20, то стильник превратится в простыню, а это уже не хорошо.

Что нужно сделать. Нужно эти 5 маленьких картинок обеденить в одну — example_mbg.gif и немножко поправить стильник.

CSS:

ul#menu li {
	list-style-type: none;
	background: url(example_mbg.gif) no-repeat;
	padding-left: 35px;
	height: 27px;
	}
ul#menu li.news {background-position: 0px -27px;}
ul#menu li.fav {background-position: 0px -83px;}
	...

HTML не меняется.

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

Посмотреть пример.

Подпишитесь на RSS

Следуй за мной в Твиттере

Обновления на e-mail