revert-rule

Ключевое слово revert-rule из набора ключевых слов CSS-wide откатывает каскадное значение свойства к тому значению, которое оно имело бы, если бы текущее правило стилей отсутствовало. Затем каскад определяет значение по оставшимся объявлениям — это может быть другое правило в том же слое каскада, правило в другом слое, другой источник стилей или значение по умолчанию (inherited или initial).

При использовании внутри CSS-анимации (источника анимации) ключевое слово revert-rule ведёт себя как revert-layer.

Это ключевое слово можно применять к любому свойству CSS, включая сокращённое свойство CSS all.

Сравнение revert-rule, revert-layer и revert

Ключевые слова revert-rule, revert-layer и revert откатывают каскад, но на разных уровнях детализации:

• revert удаляет все объявления из текущего источника стилей, откатываясь к предыдущему источнику (например, от стилей автора к стилям пользовательского агента).
• revert-layer удаляет все объявления из текущего слоя каскада, откатываясь к предыдущему слою в том же источнике.
• revert-rule удаляет только объявления из текущего правила стилей. Остальные правила в том же слое каскада продолжают действовать.

Это делает revert-rule полезным для условного игнорирования отдельных объявлений в правиле с сохранением действия объявлений из других правил того же слоя.

Примеры

Откат к предыдущему правилу

В этом примере два правила применяются к одному и тому же элементу. Во втором правиле для свойства color используется revert-rule, из-за чего каскад определяет значение так, словно правила p.special не существует, и возвращается к значению, заданному первым правилом.

HTML

<p class="special">This paragraph has special styling.</p>

CSS

body {
  font-family: system-ui;
}

@supports not (color: revert-rule) {
  body::before {
    content: "Your browser doesn't support the revert-rule keyword yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em;
  }
}

p {
  color: blue;
  font-weight: bold;
}

p.special {
  color: revert-rule;
  border: 1px solid currentColor;
}

Результат

Текст абзаца синий благодаря правилу p, поскольку color: revert-rule приводит к игнорированию объявления color в p.special. Объявления font-weight и border не затрагиваются.

Откат значения из атрибута style

При использовании revert-rule в атрибуте style каскад ведёт себя так, словно атрибут style отсутствует. Это работает, поскольку атрибут style рассматривается как отдельное правило стилей.

HTML

<p style="color: revert-rule">This text uses the stylesheet color.</p>

CSS

body {
  font-family: system-ui;
}

@supports not (color: revert-rule) {
  body::before {
    content: "Your browser doesn't support the revert-rule keyword yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em;
  }
}

p {
  color: green;
}

Результат

Текст абзаца зелёный, поскольку revert-rule заставляет каскад игнорировать объявление из атрибута style, и вступает в силу правило p.

Цепочка из нескольких значений revert-rule

Если в нескольких правилах для одного и того же свойства используется revert-rule, каскад по очереди игнорирует каждое из них, последовательно переходя к более ранним правилам, пока не найдёт конкретное значение.

HTML

<p class="a b">This text is styled by a chain of revert-rule values.</p>

CSS

body {
  font-family: system-ui;
}

@supports not (color: revert-rule) {
  body::before {
    content: "Your browser doesn't support the revert-rule keyword yet.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em;
  }
}

p {
  color: red;
}
p.a {
  color: revert-rule;
}
p.b {
  color: revert-rule;
}

Результат

Правила p.b и p.a игнорируются благодаря revert-rule. Каскад переходит к правилу p, поэтому текст красный.

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

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

См. также

• initial
• inherit
• revert
• revert-layer
• unset
• all
• модуль каскадирования и наследования CSS