Освоение свойств CSS: Inherit, Initial, Unset, Revert

В этом подробном руководстве мы продолжаем постигать мощные инструменты для стилизации ваших веб-сайтов и рассмотрим четыре специальных ключевых слова: inherit, initial, unset и revert.

Inherit: наследование значений из родительских элементов

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

Например, рассмотрим сценарий, в котором у вас есть элемент div с указанным цветом текста. По умолчанию данное свойство наследуется, то есть дочерние элементы будут иметь тот же цвет текста, что и их родительские элементы. Однако вы можете использовать ключевое слово inherit для явного применения этого поведения, даже если оно явно не указано в CSS родительского элемента.

div {
  color: black; /* Цвет текста для родительского элемента div */
}

a {
  color: inherit; /* Наследует цвет текста от родительского элемента */
}

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

Initial: сброс к значениям по умолчанию

Ключевое слово initial используется для возврата свойства CSS к его первоначальному значению, указанному в спецификации CSS. Каждое свойство CSS имеет начальное значение, определенное спецификацией W3C, которое служит значением по умолчанию. Используя initial, вы можете переопределить любой предыдущий стиль и вернуть свойству его исходное состояние.

Начальные значения, определенные в спецификации, могут варьироваться. Некоторые начальные значения интуитивно понятны, в то время как другие могут показаться произвольными. Например, float: none и background-color: transparent являются примерами начальных значений, которые соответствуют общим ожиданиям. Однако такие свойства, как display: inline, могут показаться нелогичными, но эти начальные значения были определены исходя из исторических причин или необходимости установить отправную точку.

button {
  color: initial; /* Сброс значения цвета на начальное */
}

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

Unset: полный сброс значений

Ключевое слово unset - это мощный инструмент, который позволяет вам полностью сбросить значение свойства CSS. Он сочетает в себе функциональные возможности ключевых слов inherit и initial, предоставляя более гибкую возможность сброса.

Для свойств, которые не наследуются, функция unset работает аналогично ключевому слову initial. Она возвращает свойству его начальное значение, как определено в спецификации CSS. Это гарантирует, что свойство будет запущено заново без каких-либо изменений в предыдущих стилях.

div {
  margin: unset; /* сброс свойства margin к его исходному значению */
}

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

p {
  color: unset; /* Позволяет свойству color наследоваться от его родительского элемента */
}

В этом примере для свойства color элемента p установлено значение unset, что позволяет ему наследовать цвет от своего родительского элемента. Если для родительского элемента не определен явный цвет, наследование по умолчанию будет сохранено.

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

Revert: возврат к стилям браузера

Ключевое слово revert - это новейшее дополнение к семейству ключевых слов CSS. Как и в случае с unset, оно позволяет сбросить свойство CSS. Однако, revert учитывает каскадный характер таблиц стилей и учитывает стили браузера по умолчанию.

При применении к свойству функция revert отменяет все предыдущие стили и возвращает свойству значение, определенное в таблице стилей браузера по умолчанию. По сути, она возвращает свойство в исходное состояние, определенное браузером.

h1 {
  font-size: revert; /* Возвращает значение font-size к значению браузера по умолчанию */
}

В приведенном выше примере свойству font-size элемента h1 присвоено значение revert, что позволяет использовать размер шрифта, определенный в таблице стилей браузера по умолчанию. Это обеспечивает соответствие общему стилю веб-страницы и учитывает предпочтения пользователя.

Важно отметить, что поведение revert зависит от того, является ли свойство наследуемым или ненаследуемым, аналогично ключевому слову unset. Для наследуемых свойств функция revert восстанавливает естественное поведение наследования, в то время как для ненаследуемых свойств она возвращается к значению браузера по умолчанию.

Заключение

В этом подробном руководстве мы рассмотрели специальные ключевые слова CSS inherit, initial, unset и revert. Эти ключевые слова предоставляют ценный контроль над свойствами CSS, позволяя вам передавать значения из родительских элементов, возвращать свойствам их начальное состояние или состояние по умолчанию и манипулировать каскадными стилями.