revert-layer

Ключевое слово 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
• unset
• all
• Модуль каскада и наследования CSS