Ключевое слово CSS `revert`

Ключевое слово revert в CSS возвращает каскадное значение свойства из его текущего значения к тому, которое было бы у свойства, если бы текущий источник стилей не вносил изменений для текущего элемента. Таким образом, оно сбрасывает свойство либо к значению, заданному пользовательским агентом, либо к значению, заданному пользователем, либо к унаследованному значению (если свойство наследуется), либо к начальному значению. Его можно применить к любому свойству CSS, в том числе к сокращённому свойству CSS all.

Это ключевое слово удаляет из каскада все стили, переопределённые до того стиля, к которому выполняется возврат.

• Если это ключевое слово используется в собственных стилях сайта (источник — автор), revert возвращает каскадное значение свойства к пользовательскому стилю, если он задан; в противном случае стиль возвращается к стилю по умолчанию пользовательского агента.
• Если это ключевое слово используется в пользовательской таблице стилей или если стиль применён пользователем (источник — пользователь), revert возвращает каскадное значение к стилю по умолчанию пользовательского агента.
• Если это ключевое слово используется в стилях по умолчанию пользовательского агента, оно функционально эквивалентно unset.

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

Возврат не повлияет на правила, применённые к дочерним элементам сброшенного элемента (но удалит влияние родительского правила на дочерний элемент). Поэтому, если для всех разделов задано color: green, а для конкретного раздела — all: revert, цвет раздела будет чёрным. Но если задано правило, делающее все абзацы красными, все абзацы во всех разделах останутся красными.

Примеры

Revert и unset

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

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

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 {
  border: 3px solid steelblue;
}

section {
  margin: 0.5rem;
  border: 2px dashed darkgreen;
}

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

Результат

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

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

Спецификации

Совместимость с браузерами

См. также

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