6 сокращений в CSS, о которых должен знать каждый

Недавно появилось желание привести CSS файлы в порядок — избавиться от ненужного кода, использовать сокращения вместо описания. Таким образом мы можем уменьшить размер файлов css и ускорить загрузку сайта в целом. Сегодня мы начнем с самых распространенных сокращений в CSS: фон (background), отступы (margin & padding), границы (border), шрифты (font), стили списков (list) и затемнение (transition).

Background

Определение стилей для background встречаются довольно часто. Поэтому начнем мы именно с фонов. Давайте посмотрим на типичное задание стилей для фона:

background-color: #eee;
background-image: url(background.jpg);
background-repeat: no-repeat;

А теперь запишем определение стилей для фона в сокращенном варианте и увидим сколько места экономит сокращенная конструкция:

background: #eee url(background.jpg) no-repeat;

У свойства background есть еще два параметра, которые используются реже — это background-attachment и background-position. Чтобы вспомнить для чего они, давайте разберем их подробнее.
background-attachment — дает возможность зафиксировать фоновое изображение, тем самым запретив его прокрутку вместе со страницей. Значение по умолчанию scroll позволяют изображению прокручиваться вместе со страницей. Если поменять значение на fixed, то фоновое изображение не будет смещаться даже тогда, когда весь остальной контент будет прокручиваться.
background-position — позволяет задать положение изображения на странице. Значение могут быть как и left top, bottom right или center center или же вы можете задать значение в процентах или пикселях.
Вот так вот будет выглядеть обычный код с использованием этих двух параметров:

background-color: #eee;
background-image: url(background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;

Обратите внимание на порядок задания параметров — именно такой порядок используется в сокращенной версии. Давайте теперь используем все 5 параметров в сокращенной версии:

background: #eee url(background.jpg) no-repeat fixed center top;

Margin & Padding

В случае с margin и padding сокращенная форма формируется одинаково, так что я дам пример только для одного из свойств — margin.
Сначала разберем обычную, длинную конструкцию. Обратите внимание на порядок задания параметров — именно такой порядок мы будем использовать в сокращенной версии. Вот так вот будет выглядеть обычная форма:

margin-top: 10px;
margin-right: 11px;
margin-bottom: 12px;
margin-left: 13px;

Далее сокращенная форма:

margin: 10px 11px 12px 13px;

Порядок в данном случае очень важен. Запомнить этот порядок проще всего ориентируясь на направление часовой стрелки. Начинается ход стрелки сверху (top), далее стрелка движется вправо (right), вниз (bottom) и влево (left).

Если у нас все отступы равны, то короткая форма у нас еще больше упрощается:

margin: 10px;

Данный код означает, что отступы от всех краев равны значению 10px.
Есть еще два варианта сокращенной формы для margin и padding:
1. У вас заданы только 2 параметра из четырех. Это означает, что первый отвечает за отступы сверху и снизу, а второй за отступы от левого и правого краев.

2. У вас заданы 3 параметра из четырех. Это означает, что первый отвечает за отступ сверху (top), третий за отступ снизу (bottom), а второй за отступы от правого и левого краев (left & right).

Border

Свойство border имеет три основных параметра: width (толщина), style (стиль) и color (цвет). Длинная форма:

border-width: 2px;
border-style: solid;
border-color: red;

Вы можете менять порядок следования параметров — в данном случае это не критично. Но рекомендуется придерживаться именно такого порядка при задании короткой формы:

border: 2px solid red;

Бывают случаи, когда параметры границы задаются по отдельности для каждой из сторон:

border-top: 2px solid red;
border-right: 4px solid red;
border-bottom: 8px solid red;
border-left: 16px solid red;

Сократить данную запись можно используя такую конструкцию:

border: 1px solid red;
border-width: 2px 4px 8px 16px;

Обратите внимание, что сначала мы задаем общую для всех границ толщину — 1px. Далее мы перекрываем эту толщину заданием разных значений для каждой из сторон границы.
Есть еще один вариант сокращенной записи свойства border:

border: 5px solid;
border-color: blue red;

Это позволит нам задать границы толщиной 5 пикселей со стилем solid. Верхняя и нижняя границы будут синего цвета, а левая и правая будут красными.

Font

Существует целый список параметров для свойства font, которые позволяют изменять типографику на сайте. Чаще всего ваш файл CSS будет наполнен подобными конструкциями:

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 15px;
line-height: 30px;
font-family: Helvetica, sans-serif;

Сокращенная конструкция довольно-таки серьезно экономит пространство:

font: italic small-caps bold 15px/30px Helvetica, sans-serif;

Чаще всего сокращенная конструкция еще короче, так как мы обычно не используем все эти параметры, а только некоторые из них:

font: 15px/30px Helvetica, sans-serif;

Списки

Сокращенная форма для задания свойств списков показалась мне достаточно интересной, так как обычно мало кто использует сокращенную. Код, который мы привыкли видеть:

list-style-type: circle;
list-style-position: inside;
list-style-image: url(marker.jpg);

А вот так будет выглядеть короткая форма:

list-style: circle inside url(marker.jpg);

CSS3 transition

Новое свойство transition, пришедшее к нам вместе с CSS3, на данный момент очень популярно и поддерживается почти всеми браузерами. Конечно, пока имеет смысл добавлять специфические конструкции с использованием -webkit-transition, -moz-transition и -o-transition. Вот те параметры, которые обычно задают для свойства transition:

transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 2s;

Сокращенная форма на данный момент популярна более чем обычная. Если вы сталкивались с применением transition, то скорее всего использовали вот такой сокращенный код:

transition: width 2s linear 2s;

Однако, как я упоминал выше, нам потребуется использовать специфические конструкции для различных браузеров. Окончательный вид сокращенной формы таков:

transition: width 2s linear 2s;
-moz-transition: width 2s linear 2s;
-webkit-transition: width 2s linear 2s;
-o-transition-transition: width 2s linear 2s;

Заключение

Использование сокращенных форм экономит и ваше время и место. Многие считают сокращенные версии более удобными для чтения кода. Однако, если вы пишете инструкцию или мануал, то полезнее будет использовать полные формы. Ну или хотя бы давайте разъяснения для коротких форм.
А вы используете сокращенные формы у себя на сайте?