главная / CSS / Сокращаем стили css

Сокращаем стили css

Сокращаем стили css О сокращении объемов файлов стилей css шаблона сайта и его влияние на скорость загрузки сайта уже рассказывалось. На сайте в топ меню даже представлен сервис оптимизации файлов стилей.

Остановимся на некоторых моментах, которые дополнительно позволят вам уменьшить размеры файлов без ухудшения работоспособности. Сокращенные формы записи стилей вполне применимы к таким свойствам как margin, border, padding, background, font, list-style.

Часто в файле стилей можно видеть примерно такую запись:

1..widget{

2.margin-top:10px;

3.margin-right:20px;

4.margin-bottom:10px;

5.margin-left:20px;

6.}

Сокращенный же аналог записи имеет вид:

1..widget{margin:10px 20px 10px 20px;}

Свойства определяются от top и по часовой до left.

Последнюю запись можно сократить еще. Параметры определяются попарно top-bottom, right-left. И, если параметры пар повторяются, то вполне можно убрать определение для второго параметра:

1..widget{margin:10px 20px;}

Аналогичные сокращения применимы и к padding, border.

Пример сокращений для свойства font:

1..riba{

2.font-style:italic;

3.font-size:12px;

4.font-family:arial;

5.}

Запись говорит, что стиль оформляется шрифтом в стиле italic размером 12 px набором arial. Сокращенная запись будет иметь уже следующий вид:

1..riba{font:italic 12px arial;}

Отметим еще один момент, для интерпретатора запись 0px аналогична записи 0. Всего то 2 знака, а если таковых обнаружится не один десяток?

Это лишь несколько примеров в использовании форм сокращений свойств CSS. Их использование корректно, позволяет дополнительно сократить ваш код.