Легко не заметить каскадные особенности таблиц стилей. Большинство разработчиков знают о ключевом слове 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 это не сработает, но я изо всех сил пытаюсь придумать ситуацию, когда это будет катастрофической проблемой.
свойство: не задано;
Это немного необычный. Когда используется unset
inherit
Если он не может найти его — например, это не наследуемое свойство, такое как box-shadow
initial
По общему признанию, я не могу думать о многих использованиях для unset
все: [наследовать | начальный | unset];
Наконец, all
Вы можете назначить inherit
initial
unset
#mywidget
{
all: initial;
}
Это может быть альтернативой ограниченному CSS, если вы добавляете сторонние виджеты на страницу и хотите избежать столкновения таблиц стилей.
К сожалению, в течение некоторого времени вы не сможете зависеть от постоянной поддержки кросс-браузерной работы, но это может оказаться полезным для просмотра.