Статьи

Наследование CSS3 Советы и хитрости

Легко не заметить каскадные особенности таблиц стилей. Большинство разработчиков знают о ключевом слове inherit

свойство: наследовать;

Ключевое слово « inherit«использовать любое значение, назначенное моему родителю» . Если никакое значение не было явно определено для родительского элемента, браузер обрабатывает дерево DOM, пока не будет найдено свойство. В конечном итоге он заканчивается в браузере по умолчанию, например

 #myparent
{
	margin: 10px;
	border: 1px solid #000;
}

/* use the same border as the parent */
#myparent p
{
	border: inherit;
}

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

inherit Это не поддерживается в IE6 и IE7, но ваш дизайн вряд ли сломается без него.

свойство: начальное;

Ооо, блестящее новое ключевое слово CSS3! initial

 body
{
	font-size: 0.5em;
}

/* reset paragraphs to 1em */
p
{
	font-size: initial;
}

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

Поддержка разумна — Chrome, Firefox, Safari и Opera 15+. В IE это не сработает, но я изо всех сил пытаюсь придумать ситуацию, когда это будет катастрофической проблемой.

свойство: не задано;

Это немного необычный. Когда используется unsetinherit Если он не может найти его — например, это не наследуемое свойство, такое как box-shadowinitial

По общему признанию, я не могу думать о многих использованиях для unset

все: [наследовать | начальный | unset];

Наконец, all Вы можете назначить inheritinitialunset

 #mywidget
{
	all: initial;
}

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

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