#заметка дня

Вчерашний опрос вызвал много бурления в чате, что неудивительно.

Помните ошибки рабочей группы CSS? Вот inherit, initial, unset и revert можно смело в них записывать.

Потому что это какой-то ад. Смотрите сами:

inherit

Тут всё достаточно просто. Значение свойства будет отнаследовано от ближайшего родителя и так далее вверх по DOM, пока не найдёт. Если не найдёт — применит значение заданное по-умолчанию в браузере (user-agent styles).

Если и там не найдёт — то возьмёт значение, определённое для этого свойства в спецификации CSS, и это будет…

initial

Давайте откроем MDN для свойства display и пролистаем до раздела «Formal definition».

Мы увидим там нечто под названием «Initial value». И оно равно inline. Вот и наш ответ: initial это значение, определённое в спецификации CSS. Вот только оно не всегда очевидно.

Небольшой взрыв мозга: значение initial свойства display для тега div равно… тоже inline. Потому что поведение элементов в потоке и CSS-свойства — это разные сущности и связь их прописана на более высоких уровнях.

Например, в таблице стилей по-умолчанию, которая поставляется с любым браузером. И тут мы плавно подходим к значению…

revert

И уже эта прелестная штучка сбросит свойство до значений, установленных в таблице стилей браузера. Да, свойство display элемента div примет значение block.

Кстати, предыдущее название — default. Вы видите разницу между default и initial? А она, оказывается, есть.

unset

Тут мы на развилке. Свойство работает как inherit для наследуемых свойств (тех, которые применятся к потомкам, вроде color) и как initial для ненаследуемых (они, соответственно, не применятся к потомкам, вроде border).

Вроде как и не нужно оно выходит, не правда ли?

Но с его помощью можно сбросить все установленные значения, благодаря свойству all:

.element {
  all: unset;
}

Таким образом все свойства наследуемые свойства сбросятся до inherit, а ненаследуемые — до initial.

Вместо итога

Честное слово, я стараюсь проектировать архитектуру так, чтобы избегать откат значений свойств, но могу себе представить ситуации, когда это может быть очень удобно.

#css #unset #initial #revert