Сокращённые формы записи (font, margin, padding и пр.)

Небольшая дискуссия подвигла меня на рассмотрение темы, выведенной в заголовок. Вроде бы всё просто в использовании краткой записи CSS свойств (такую запись назвали в одном русском переводе спецификации CSS2 почему-то «стенографической»), но тем не менее есть некоторые подводные камни.

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

.class1{
font-weight:bold;
font-size:10pt;
font-family:Verdana,Arial,sans-serif;
line-height:12pt
}

.class2{
font:bold 10pt/12pt Verdana,Arial,sans-serif
}

Чтобы доскональнее разобраться с краткой записью, приведём все возможные свойства, которые согласно спецификации CSS2 могут быть указаны в сокращённом виде. После названия краткого свойства даны значения, которые это свойство может принимать. О том, как правильно читать каракули типа «||, ?, {1,4}» смотрите в спецификации.

Свойство background

Value: [ <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'> ] | inherit

Для избежания конфликтов с пользовательской таблицей стилей, рекомендуется помимо свойства background указывать также свойство color.

Свойство border

Value: [ <'border-width'> || <'border-style'> || <color> ] | inherit

В отличие от margin и padding, это свойство может задавать границу только для всех четырёх сторон сразу. Учтите также, что Internet Explorer до версии 5.5 не воспринимает это свойство у inline элементов.

Свойства border-top, border-right, border-bottom, border-left

Value: [ <'border-top-width'> || <'border-style'> || <color> ] | inherit

Если цвет не указан, то он берётся из значения CSS свойства color.

Свойство font

Value: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

CSS2 позволяет задавать с помощью данного свойства системные значения (caption, icon и пр.), чего не достичь с помощью font-family. Правда, значения message-box, small-caption и status-bar в  IE4+ выглядят как messagebox, smallcaption и statusbar.

Учтите, что некоторые браузеры требуют (и согласно спецификации, они правы), чтобы были указаны оба компонента: font-size и font-family. То есть, font:bold 120%; не пойдёт, а вот конструкция font:bold 120% Times,serif; в самый раз.

Свойство list-style

Value: [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit

Значение none устанавливает оба свойства list-style-type и list-style-image в состояние none, т. е. у списка будет отсутствовать какой-либо маркер.

Свойство margin

Value: <margin-width>{1,4} | inherit

Если заданы все четыре значения, то они применяются, соответственно, к верхней, правой, нижней и левой границе. Если же задано только одно значение, оно относится ко всем сторонам. Ну а если задано два или три значения, остальные цифры берутся из значений противоположной стороны.

Можно использовать отрицательные значения.

Internet Explorer до версии 5.5 не воспринимает это свойство у inline элементов.

Свойство outline

Value: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit

Про это свойство можно лишь сказать, что поддерживается оно только в Opera7b. UPDATE: а также в IE6+ и FF1+.

Свойство padding

Value: <padding-width>{1,4} | inherit

Относительно количества значений, смотрите комментарий у свойства margin.

Нельзя использовать отрицательные значения.

Internet Explorer до версии 5.5 не воспринимает это свойство у inline элементов. Старайтесь также не использовать padding применительно к элементу table, т. к. эффект непредсказуем во многих браузерах.