revert

Хотя revert и unset похожи, они отличаются для некоторых свойств для некоторых элементов.

Итак, в примере ниже мы устанавливаем пользовательское font-weight, но затем пытаемся revert и unset его в строке HTML-документа. Ключевое слово revert вернёт текст жирным, так как это значение по умолчанию для заголовков в большинстве браузеров. Ключевое слово unset сохранит текст обычным, поскольку, как унаследованное свойство, font-weight унаследует своё значение от тела.

HTML

<h3 style="font-weight: revert; color: revert;">
  This should have its original font-weight (bold) and color: black
</h3>
<p>Just some text</p>
<h3 style="font-weight: unset; color: unset;">
  This will still have font-weight: normal, but color: black
</h3>
<p>Just some text</p>

CSS

h3 {
  font-weight: normal;
  color: blue;
}

Результат

Сброс всех значений полезен в ситуации, когда вы внесли несколько изменений в стиль, а затем хотите вернуться к значениям по умолчанию браузера. Так, в приведённом выше примере вместо отдельного сброса font-weight и color, вы можете сбросить их все сразу — применив ключевое слово revert к all.

HTML

<h3>This will have custom styles</h3>
<p>Just some text</p>
<h3 style="all: revert">This should be reverted to browser/user defaults.</h3>
<p>Just some text</p>

CSS

h3 {
  font-weight: normal;
  color: blue;
  border-bottom: 1px solid grey;
}

Результат

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

HTML

<main>
  <section>
    <h3>This h3 will be dark green</h3>
    <p>Text in paragraph will be red.</p>
    This stray text will also be dark green.
  </section>
  <section class="with-revert">
    <h3>This h3 will be steelblue</h3>
    <p>Text in paragraph will be red.</p>
    This stray text will also be steelblue.
  </section>
</main>

CSS

main {
  color: steelblue;
}
section {
  color: darkgreen;
}
p {
  color: red;
}
section.with-revert {
  color: revert;
}

Результат

Обратите внимание, как абзац остаётся красным, даже если свойство color для секции было сброшено. Также обратите внимание, что заголовок и простой текстовый узел являются steelblue. Результатом сброса является то, что section { color: darkgreen; } как будто не существовало для секции с применённым color: revert.

Кроме того, если ни пользовательский агент, ни пользователь не переопределяют значения цвета <h3> или <section>, то цвет steelblue наследуется от <main>, так как свойство color является свойством, наследуемым по умолчанию.

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