Ключевые слова inherit, initial и unset в CSS

Development | Amber | Комментировать запись

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

• inherit извлекает (наследует) свойство из родительского элемента.
• initial – стандартное значение свойства (значение браузера по умолчанию).
• unset работает либо как inherit, либо как initial в зависимости от ситуации: действует как inherit, если у родительского элемента есть совпадающее значение, в противном случае работает как initial.

Попробуем прояснить это на практике. Допустим, вот наша разметка:

<div class="wrapper">
  <p class="one">Snake<p>
  <p class="two">Lizard<p>
  <p class="three">Alligator</p>
  <p>Komodo Dragon</p>
</div>

А вот наш CSS:

.wrapper { color: orange; }
.wrapper p { color: purple; }
p.one { color: inherit; }
p.two { color: initial; }
p.three { color: unset; }

Snake будет оранжевого цвета, поскольку это значение наследуется от класса wrapper.

Lizard будет черного цвета, потому что принимает начальное значение браузера по умолчанию.

Alligator оранжевого цвета: в этом случае unset действует как inherit, потому что есть родительский элемент с совпадающим значением.

Komodo Dragon фиолетовый. Это единственный абзац, значение которого берется из селектора .wrapper p.

Для ключевого слова unset есть один изящный прием: его можно сочетать с сокращением all, которое автоматически влияет на все свойства селектора. Например, следующий код применит unset ко всем свойствам выбранных элементов p:

article p {
  all: unset;
}

Читайте также: Управление размерами изображений в CSS