Добрый день!
Сегодня я расскажу о четырех интересных ключевых словах 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; }
В спецификации сказано:
«Данное свойство может использоваться для элементов виджетов на странице, где нежелательно наследовать стили страницы».
Спасибо за внимание!
Подписывайтесь на рассылку! 😉