Использование сокращений CSS

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

Не все похожие правила в CSS возможно объединить в сокращение, но большинство из наиболее часто используемых правил могут быть упакованы в одну строчку. Не забывайте, что есть разница в каком порядке расположены значения CSS правил. Кроме того, сокращения должны быть проверены в различных браузерах, так как правила не всегда интерпретируются одинаково. Например, Internet Explorer'у 6 в некоторых случаях становиться очень плохо, когда речь заходит об отображении CSS-правил надлежащим образом. Необходимо проверять все стили во всех популярных браузерах, включая Firefox, IE6, IE7, Opera и Safari.

Шрифты

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

.keyword {
font-weight: bold;
font-size: 13px;
font-family: sans-serif, arial;
}

можна записать те же атрибуты одной строчкой:

.keyword {
font: bold 13px sans-serif, arial;
}

Поля(margin) и отступы(padding).

Еще одним распространенным применением сокращений есть применение в записи полей и отступов. Отступы задают размеры промежутков внутри контейнера или объекта, в то время как поля устанавливают размеры промежутков снаружи контейнера или объекта. К примеру, отступы для элемента #block можно задать вот так:

#block {
padding-top: 12px;
padding-right: 6px;
padding-bottom: 24px;
padding-left: 6px;
}

Намного проще и эффективнее установить все значения отступов одной строчкой:

#block {
padding: 12px 6px 24px 6px;
}

Есть простое правило, которое следует запомнить при использовании сокращений для полей и отступов. Порядок расположения значений напоминает движение часовой стрелки по циферблату начиная с 12-ти часов. Таким образом, первое значение задает верхние поля или отступы (12 часов), второе - правые (3 часа), третье - нижние (6 часов) и четвертое - левые (9 часов). Сокращение для полей или отступов можно еще более укоротить. Например, следующее объявление

margin: 5px 10px 5px 10px;

можно сократить до такого:

margin: 5px 10px;

В этом случае первое значение задает верх и низ, а второе задает лево и право.
Если вам необходимо задать одинаковые поля или отступы для всех сторон, то это можно сделать так:

margin: 20px;

Если вам не нужно задавать поля или отступы для объекта, вы можете установить все значения в 0. При этом не требуется указывать единиц измерения. Следующее выражение убирает все поля и отступы:

margin: 0;
padding: 0;

Рамки(borders)

Вместо обычного определения рамок для контейнера:

.articles {
border-width: 2px;
border-style: dashed;
border-color: #419FDD;
}

можно использовать сокращенное:

.articles {
border: 2px dashed #419FDD;
}

Фоновые изображения

Сокращения также широко используются для свойств, которые задают фон с изображением. Фоновые изображения в основном применяются для "чистой" (безтабличной) CSS верстки.

#footer {
background-color:#EEEEEE;
background-image:url(table.gif);
background-repeat:repeat-x;
background-position:top;
}

можно сократить в:

#footer {
background: #EEEEEE url(table.gif) repeat-x top;
}