2021-05-25 19:07:48
#заметка дня
Вчерашний опрос вызвал много бурления в чате, что неудивительно.
Помните ошибки рабочей группы 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
946 viewsedited 16:07
Б
