CSS unset работает не так, как ожидалось. Как решить?

#html #css

#HTML #css

Вопрос:

Я all: unset должен отменить все свойства наследования, но разрешить таблицу стилей пользовательского агента. Как я могу это сделать? Как вы можете видеть в коде, он отключает все стили, даже таблицы стилей пользовательского агента. Как я могу предотвратить отключение таблицы стилей пользовательского агента?

 h1, h2 {
    color: red;
    font-size: 24px;
    font-weight: bold;
}
.editor_data * {
    all: unset;
}

 <div class="main_block">
    <h2>Should be red</h2>
    <div class="editor_data">
    <h1><u><em><strong>Should be underlined, bold, italics, but not red</strong></em></u></h1>
    </div>
</div>

1. в качестве примечания наследование не переопределяет стиль пользовательского агента, так зачем использовать unset?

2. Возможно, попробуйте initial вместо unset ?

3. начальное свойство не работает.

Ответ №1:

Попробуйте ключевое revert слово вместо initial или unset

Ключевое слово revert полезно для изоляции встроенных виджетов или компонентов от стилей страницы, которая их содержит, особенно при использовании со свойством all .

В пользовательских таблицах стилей revert откатывает каскад и сбрасывает свойство до значения по умолчанию, установленного таблицей стилей user-agent.

MDN

 h2 {
  color: red;
  font-size: 24px;
  font-weight: bold;
}

.editor_data * {
  all: revert;
}

 <div class="main_block">
  <h2>Hello world!</h2>
  <div class="editor_data">

    <h1><u><em><strong>Hello world!</strong></em></u></h1>
  </div>
</div>

1. Никто не знает, будет ли это соответствовать фактическим спецификациям. И это не работает в Chrome.

2. Я впервые вижу такое значение атрибута, но это помогло мне. Я сбрасываю все поля и отступы на 0, * {margin: 0; padding: 0;} но где-то это нужно. unset и initial не сработали. Это редкий случай, но приятно, что есть решение. 2022, работает в firefox, Chrome и edge кстати

Ответ №2:

Вы должны установить all: initial для родительского элемента, а затем объявить all: unset для всех его дочерних элементов.

 .editor_data {
  all: initial;
}
.editor_data * {
  all: unset;
}