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

revert-layer — это универсальное ключевое слово CSS, которое откатывает значение свойства в слое каскада к значению свойства в CSS-правиле, соответствующем элементу в предыдущем слое каскада. Значение свойства с этим ключевым словом пересчитывается так, как если бы для целевого элемента в текущем слое каскада не было задано никаких правил.

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

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

Revert-layer и revert

Ключевое слово revert-layer позволяет откатить стили к заданным в предыдущих слоях каскада в рамках источника стилей автора. В отличие от него, ключевое слово revert позволяет откатить стили, применённые в источнике стилей автора, к стилям, заданным в источнике стилей пользователя или агента пользователя.

Ключевое слово revert-layer предназначено в первую очередь для свойств внутри слоя каскада. Однако, если применить его к свойствам вне слоя каскада, значения свойств будут возвращены к значениям, заданным презентационными подсказками (например, атрибутами width и height или элементом <s> в HTML); если таких значений нет, используются значения из таблицы стилей агента пользователя или пользовательских стилей. В отличие от ключевого слова revert, которое рассматривает презентационные подсказки как часть источника стилей автора и также отменяет их, ключевое слово revert-layer игнорирует презентационные подсказки вне слоя каскада и поэтому не отменяет их.

Примеры

Поведение слоёв каскада по умолчанию

В приведённом ниже примере в CSS определены два слоя каскада: base и special. По умолчанию правила в слое special переопределяют конфликтующие правила в слое base, поскольку special указан после base в инструкции объявления @layer.

HTML

<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

CSS

@layer base, special;

@layer special {
  .item {
    color: red;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}

Результат

Все элементы <li> соответствуют правилу item в слое special и окрашены в красный цвет. Это поведение слоёв каскада по умолчанию: правила в слое special имеют приоритет над правилами в слое base.

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

Рассмотрим, как ключевое слово revert-layer меняет поведение слоёв каскада по умолчанию. В этом примере слой special содержит дополнительное правило feature, нацеленное на первый элемент <li>. Свойству color в этом правиле задано значение revert-layer.

HTML

<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

CSS

@layer base, special;

@layer special {
  .item {
    color: red;
  }
  .feature {
    color: revert-layer;
  }
}

@layer base {
  .item {
    color: blue;
  }
  .feature {
    color: green;
  }
}

Результат

Поскольку для color задано значение revert-layer, значение свойства color откатывается к значению из соответствующего правила feature в предыдущем слое base, поэтому «Элемент один» теперь зелёный.

Откат к стилю из предыдущего источника

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

HTML

<p>This example contains a list.</p>

<ul>
  <li class="item feature">Item one</li>
  <li class="item">Item two</li>
  <li class="item">Item three</li>
</ul>

CSS

@layer base {
  .item {
    color: revert-layer;
  }
}

Результат

Стили всех элементов <li> возвращаются к значениям по умолчанию из источника агента пользователя.

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

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

См. также

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