Особенности расширения в CSS

Вдобавок к уникальным парам «свойство-значение», предлагаемым в CSS, существует «горсточка изюминок» – особенностей, которые могут оказаться очень полезными. К ним относятся и несколько новинок, появившихся в спецификации CSS3.

Эти особенности зачастую остаются незамеченными, особенно новичками, потому что при обсуждении свойств CSS и их возможных значений (в учебниках, книгах или даже спецификациях) обычно об этих особенностях умалчивают в целях лаконичности изложения.

Ниже приведено краткое описание четырех таких «изюминок» расширения CSS.

Ключевое слово inherit

Каждое CSS свойство может принимать, как значение, ключевое слово inherit. Например, вот так:

span {  
    font-size: inherit;  
}

Этим мы заставляем определенный элемент наследовать указанное значение свойства от родительского элемента. Если в CSS не установлено требуемое свойство для родительского элемента, то он унаследует значение, вычисленное от родителя (которое может быть дефолтным или каким-либо другим, унаследованным от родительского элемента).

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

.module {  
  box-shadow:  0px 0px 11px rgba(0, 0, 0, 0.4);  
}  
    .module div {  
    box-shadow: inherit;  
  }

Теперь все элементы <div> внутри основного элемента .module наследуют его значение свойства box shadow.

Браузеры отлично поддерживают наследование. Длительное время inherit никто не использовал, потому что IE6/7 не поддерживал наследование за исключением свойства direction. Но сейчас эти браузеры остались не у дел, и большинство разработчиков могут чувствовать себя свободно в использовании наследования.

Ключевое слово initial

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

Каждое свойство CSS имеет начальное значение (или иначе значение по умолчанию). Определяя значение с помощью ключевого слова initial, вы указываете браузеру воспроизвести свойство, используя значение по умолчанию для данного свойства.

Таким образом, это то же самое, что и не определять свойство вообще. Поэтому вы можете подумать, что ключевое слово initial по большей части бесполезно. Это частично верно, потому что, скорее всего, вы не будете применять его так уж часто. Но если вы решитесь, это может оказаться весьма удобно.

Например, вы можете захотеть использовать initial для свойства, которое по умолчанию наследует значение от родителя, подобно, свойству color:

body {  
  color: aquamarine;  
}  
  
.example {  
  color: initial;  
}

Обычно элемент .example имеет тот же набор цветов, что и body. Но в данном случае, мы переопределили значение цвета, сбросив его на цвет в начальном состоянии (который, вероятнее всего, будет черным).

Также это может пригодиться при динамическом изменении стилей с помощью JavaScript. Посредством взаимодействия с пользователем или других изменений, свойство может быть установлено в начальное состояние, даже если ему заранее было определенно значение по умолчанию.

Однако, я не уверен насчет поддержки браузерами: это, вроде бы, должно работать в последних версиях Chrome и Firefox, но не в последних Opera или IE10.

Ключевое слово unset

Это ключевое слово раньше называлось default, но сейчас поменялось на unset. Действие unset очень похоже на действие ключевого слова initial. По существу, использование unset сотрет любое явно определенное значение, которое может быть передано элементу для свойства, или назначено где-то до этого.

body {  
  font-size: 1.5em;  
}  
  
.module {  
  font-size: unset;  
}

Разница между unset и initial в том, что unset может быть наследуемым значением. В некотором смысле, это своего рода комбинация двух предыдущих ключевых слов. При использовании unset, браузер сначала ищет наследуемое значение. Если оно не найдено (например, для свойства, которое не поддерживает наследование, как например, border-color), то браузер устанавливает начальное значение или значение по умолчанию.

Поскольку ключевое слово unset достаточно новое, я не думаю, что оно уже имеет полноценную поддержку среди популярных браузеров.

Свойство all

И наконец, еще одна новинка: свойство all. Естественно, оно не может принимать пользовательское значение, а только значение одного из ранее описанных ключевых слов: inherit, initial и unset.

Свойство all сбрасывает все свойства конкретного элемента, за исключением direction и unicode-bidi.

.example {  
  all: initial;  
}

В спецификации обращают внимание на один интересный вариант использования для all:

«Это может быть полезно для корневого элемента виджета, включенного в страницу, который не хочет наследовать стили внешней страницы»

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