CSS: inherit, initital, unset, all

Добрый день!

Сегодня я расскажу о четырех интересных ключевых словах CSS. Начнем!

 

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

Сразу рассмотри пример:

span {
    font-size: inherit;
}

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

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

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

  .module div {
    box-shadow: inherit;
  }

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

 

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

Ключевое слово initial впервые появилось в CSS3. Каждое CSS свойство имеет начальное значение или значение по умолчанию.

Определяя значение свойство используя ключевое слово initial, вы говорите браузеру: «используй значение свойства по умолчанию».

Например, вы можете захотеть использовать значение цвета по умолчанию:

body {
  color: aquamarine;
}

.example {
  color: initial;
}

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

Что касается поддержки браузерами: initial работает в последних версиях Chrome и Firefox. Насчет остальных браузеров я не уверен.

 

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

body {
  font-size: 1.5em;
}

.module {
  font-size: unset;
}

Различие между unset и initial в том, что значения, которые могли быть унаследованы элементом, сбрасываются.

 

Свойство: all

Свойство all сбрасывает все свойства элемента.

.example {
  all: initial;
}

В спецификации сказано:

«Данное свойство может использоваться для элементов виджетов на странице, где нежелательно наследовать стили страницы».

 

Спасибо за внимание!

Подписывайтесь на рассылку! 😉

 

 

 

Автор статьи: Alex. Категория: CSS
Дата публикации: 29.09.2013