ГлавнаяСтилиСокращённые формы записи

Сокращённые формы записи

Небольшая дискуссия подвигла меня на рассмотрение темы, выведенной в заголовок. Вроде бы всё просто в использовании краткой записи 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'> || ] | inherit

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


Свойства border-top, border-right, border-bottom, border-left
Value: [ <'border-top-width'> || <'border-style'> || ] | 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: {1,4} | inherit

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

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

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


Свойство outline
Value: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit

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


Свойство padding
Value: {1,4} | inherit

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

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

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