Легко упустить из вида свойство каскадности таблицы стилей. Многие разработчики знакомы со значением inherit (наследование), но есть еще несколько свойств наследования CSS3, о которых знают не все.

property: inherit; 

Значение наследования означает: «Использовать то значение, которое присвоено родительскому элементу». Если значение не было однозначно задано родительскому элементу, то браузер будет искать выше по дереву документа, пока свойство не будет найдено. Если свойство так и не будет найдено, применится значение браузера по умолчанию. Пример кода CSS:

#myparent
{
	margin: 10px;
	border: 1px solid #000;
}
/* использовать такую же границу, как у родительского элемента */
#myparent p
{
	border: inherit;
} 

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

Значение наследования безопасно использовать в любых браузерах. Оно не поддерживается в старых версиях браузера Internet Explorer, таких как 6 и 7, но маловероятно, что сайт перестанет от этого работать.

property: initial; 

Новое значение CSS3, начальное значение, возвращает свойство к значению, заданному браузером по умолчанию, например:

body
{
    font-size: 0.5em;
}
/* возвращает размер абзаца в 1em */
p
{
    font-size: initial;
}

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

Это значение поддерживается во всех современных версиях браузеров: Chrome, Firefox, Safari и Opera от версии 15. Начальное значение не поддерживается в браузере Internet Explorer, но сложно представить ситуацию, где это стало бы серьезной проблемой.

property: unset; 

Это несколько необычное свойство. При использовании незаданного значения, применится наследуемое значение, если оно есть. Если его нет, например, если незаданное значение у ненаследуемого свойства тени блока, то применится начальное значение, т. е., значение браузера по умолчанию.

Правда, трудно представить, где может пригодиться незаданное значение, и оно не очень широко поддерживается браузерами.

all: [ inherit | initial | unset ]; 

И последнее свойство, а не значение, которое называется все. Ему можно задать значения наследования, начальное или незаданное, чтобы повлиять сразу на все свойства, например, вернуть все свойства CSS к значениям браузера по умолчанию:

#mywidget
{
    all: initial;
} 

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

К сожалению, не все браузеры пока что поддерживают это свойство, но со временем оно может стать широко используемым.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:

• Использование псевдокласса CSS3 :target
• Как отцентровать абсолютно спозиционированный элемент с использованием CSS
• Альтернативный способ спрятать текст у графического заголовка