Распространённые сокращённые свойства CSS

CSS-сокращение устанавливает сразу несколько полных свойств, а любое пропущенное свойство сбрасывается до значения по умолчанию, определённого сокращением, — что молча переопределяет всё, что вы задали для него ранее в каскаде.

Если вы когда-либо задавали background-size: cover и наблюдали, как оно исчезает в момент появления последующей строки background:, — вы столкнулись с этим на практике. Никаких ошибок при этом не возникает, что и делает подобные проблемы такими трудноуловимыми. Именно это поведение, а не синтаксис, является источником большинства ошибок при использовании сокращений. В этом справочнике рассматриваются шесть сокращений, которые вы пишете ежедневно (margin, padding, border, font, background и flex), с порядком значений, обязательными значениями и особенностями сброса, из-за которых каждое из них может давать сбои без каких-либо явных признаков.

Почему CSS-сокращение сбрасывает другие свойства?

Каждое CSS-сокращение разворачивается в фиксированный набор полных свойств, и значение, которое вы не указываете, устанавливается в значение по умолчанию, определённое сокращением, что переопределяет всё, что вы задали для этого свойства ранее. Запись background: red не просто устанавливает цвет — она сбрасывает background-image, background-position, background-size и все остальные полные свойства фона до их начальных значений.

Именно поэтому наиболее распространённая ошибка при использовании сокращений никогда не является синтаксической. Это более позднее сокращение, которое молча сбрасывает полное свойство, корректно заданное где-то в другом месте:

/* Ошибка: сокращение сбрасывает background-size до auto */
.hero {
  background-size: cover;
  background: url('hero.jpg') no-repeat center;
}

/* Исправление: задайте size внутри сокращения */
.hero {
  background: url('hero.jpg') no-repeat center / cover;
}

Этот сбой незаметен в самом объявлении и зачастую обнаруживается только на отрендеренной странице. Воспроизведение производственной сессии восстанавливает реальные вычисленные стили, что позволяет выявить сброшенный background-size, который локальная проверка с другими ресурсами может не обнаружить.

margin и padding: правило часовой стрелки

margin и padding принимают от одного до четырёх значений по часовой стрелке сверху: top, right, bottom, left (TRBL — согласные в слове «trouble»). Количество значений определяет, какие стороны зеркалируются:

.button  { padding: 12px 24px; }   /* вертикально 12px, горизонтально 24px */
.section { margin: 40px auto; }     /* вертикально 40px, горизонтально auto */

margin: 0 auto центрирует блочный элемент по горизонтали, равномерно распределяя оставшееся пространство по строке. На строчные элементы это не влияет, а flex- и grid-элементы центрируются с помощью собственных свойств выравнивания.

border: стиль обязателен

В сокращении border значения ширины, стиля и цвета не зависят от порядка, поскольку имеют различные типы: 2px solid red и solid red 2px эквивалентны. Однако border-style обязателен: его начальное значение — none, поэтому без указания стиля граница не отображается — независимо от ширины или цвета.

.card { border: 1px solid #e0e0e0; }  /* отображается */
.card { border: 1px #e0e0e0; }        /* нет стиля → ничего не отображается */

Ширина и цвет необязательны и возвращаются к значениям по умолчанию (medium и currentcolor). Если взять за привычку указывать стиль первым, этот класс ошибок исчезнет.

font: size и family обязательны

Сокращение font объединяет font-style, font-variant, font-weight, font-size, line-height и font-family, причём оба свойства — font-size и font-family — обязательны. При отсутствии любого из них всё объявление игнорируется. Порядок строгий: style, variant и weight должны стоять перед font-size, а line-height допустим только непосредственно после font-size, через косую черту.

/* полная запись: style variant weight size/line-height family */
.text { font: italic small-caps bold 16px/1.5 'Segoe UI', sans-serif; }

/* минимально допустимое объявление */
.text { font: 16px Arial, sans-serif; }

/* недопустимо — family перед size, объявление молча отбрасывается */
.text { font: Arial 16px; }

Поскольку font сбрасывает каждый пропущенный компонент до начального значения, применение этого сокращения после того, как вы задали, например, font-weight в другом месте, вернёт это значение к normal.

background: косая черта между position и size

background — наиболее подверженное ошибкам сокращение. Правило, которое сбивает с толку большинство разработчиков: background-size допустим только непосредственно после background-position, разделённый косой чертой (center / cover), поэтому size без предшествующего position и косой черты недопустим и отбрасывается. Это опровергает устаревшие руководства, в которых background-size рассматривается как отдельное объявление; он принадлежит сокращению.

Канонический порядок значений: image, position / size, repeat, attachment, origin, clip, color.

/* правильно: position / size */
.panel { background: #000 url('bg.jpg') center / cover no-repeat fixed; }

/* неправильно: size без position перед косой чертой → недопустимо */
.panel { background: url('bg.jpg') / cover; }

/* неправильно: нет косой черты, поэтому 'cover' воспринимается как второе значение position */
.panel { background: url('bg.jpg') center cover; }

Цвет может стоять в любом месте синтаксиса одного слоя, однако размещение его последним соответствует порядку MDN и обеспечивает единообразие.

flex: flex: 1 — это не 1 1 auto

Браузеры вычисляют flex: 1 как flex: 1 1 0%, а не 1 1 auto, поэтому элемент игнорирует собственную ширину и размер содержимого при распределении пространства. Браузеры используют flex-basis равный 0% при указании одного числа, хотя в тексте спецификации указано 0. Это можно проверить в DevTools, открыв вкладку Computed и прочитав значение flex-basis.

.grow  { flex: 1; }          /* 1 1 0%  — растёт, игнорирует размер содержимого */
.auto  { flex: auto; }       /* 1 1 auto — растёт от размера содержимого */
.fixed { flex: 0 0 200px; }  /* фиксированный трек 200px, без grow/shrink */
.none  { flex: none; }       /* 0 0 auto — размер по содержимому, жёсткий */

Используйте flex: auto, когда хотите, чтобы элементы имели размер по содержимому, и flex: 0 0 <size> для фиксированного трека.

Каковы наиболее распространённые ошибки при использовании CSS-сокращений?

Четыре паттерна сбоев составляют большинство ошибок при использовании сокращений. Каждый из них является прямым следствием одного из правил, описанных выше:

1. Более позднее сокращение сбрасывает полное свойство. Переопределение темы, отправляющее background:, стирает более ранний background-size: cover. Оставьте значение внутри сокращения или примените полное свойство после него.
2. Отсутствует font-family или font-size. Всё объявление font отбрасывается — без частичного применения.
3. Отсутствует border-style. Без стиля применяется значение по умолчанию none, и ничего не отображается.
4. background-size без position и косой черты. Пишите center / cover, никогда — просто cover.

Редко используемые сокращения, такие как list-style, outline и place-items, подчиняются тем же правилам сброса, но встречаются значительно реже; применяйте их так же, как только шесть ежедневных станут для вас привычными.

Одна привычка, которая предотвращает почти все подобные ошибки: воспринимайте каждое сокращение как полный сброс группы свойств, а не как аддитивное изменение. Когда стиль, заданный в другом месте, исчезает, откройте панель Computed и проверьте, не перезаписало ли его более позднее сокращение. Почти всегда виновник именно в этом.

Часто задаваемые вопросы

Когда следует использовать CSS-сокращения, а когда — полные свойства?

Используйте сокращение, когда хотите задать большинство или все свойства группы сразу и готовы к сбросу пропущенных значений до значений по умолчанию. Используйте полное свойство, когда нужно изменить одно свойство, не затрагивая остальные, — например, скорректировать только background-size, оставив существующий background-image нетронутым. Сокращение всегда сбрасывает пропущенные полные свойства, поэтому точечное изменение через полное свойство позволяет избежать этого побочного эффекта.

Почему добавление сокращения background нарушает работу background-size: cover?

Потому что сокращение background сбрасывает каждое полное свойство фона, которое вы не указываете, до его начального значения, а background-size сбрасывается до auto. Если background-size: cover задан в более раннем правиле, а последующее объявление background: не включает size, это более позднее сокращение перезапишет его. Исправьте это, записав size внутри сокращения после position в виде center / cover, или разместив полное свойство background-size после сокращения.

В чём разница между flex: 1 и flex: auto?

Браузеры вычисляют flex: 1 как 1 1 0%, задавая flex-basis равный 0%, поэтому элемент игнорирует собственный размер содержимого и растёт исключительно за счёт доступного пространства. flex: auto разворачивается в 1 1 auto, поэтому элемент начинает с размера своего содержимого и затем растёт. Используйте flex: 1 для равных колонок независимо от содержимого и flex: auto, когда элементы должны иметь размер относительно того, что они содержат.

Имеет ли значение порядок значений в сокращении border?

Нет, значения ширины, стиля и цвета в сокращении border не зависят от порядка, поскольку имеют различные типы: 2px solid red и solid red 2px эквивалентны. Единственное жёсткое требование — наличие border-style. Его начальное значение — none, поэтому без ключевого слова стиля граница не отображается — независимо от указанных ширины или цвета.