Разница между "initial", "inherit" и "unset"
Maksym PohribniakВ CSS существуют ключевые слова по умолчанию для различных значений. В этой статье я расскажу о трех из них: initial (начальном), inherit (наследуемом) и относительно новом, unset (неустановленном).
Вы, вероятно, с ними сталкивались , но, понимаете ли разницу между этими значениями до конца? Долгое время я знал об этих ключевых словах только то, что они используются для сброса стилей и наследования в CSS. Какие именно различия между ними? Сегодня мы разберем эти три ключевых слова, чтобы раз и навсегда понять это.
Стили в браузере
Прежде чем мы начнем разбираться с ключевыми словами описанными выше, важно понять, откуда вообще берутся стили в нашем браузере.
Исходные значения CSS свойств
Каждое CSS свойство имеет начальное значение. Это значение не связано с типом HTML-элемента, к которому применяется.
Пример значения initial для свойства line-height:
Стили в браузере
После применения начальных стилей всех свойств CSS браузер загружает свои собственные стили. Эти стили не имеют ничего общего с базовыми/начальными значениями CSS свойств.
Сами по себе HTML элементы не имеют начальных значений стиля!
Основные стилистические элементы HTML, такие как тег <h1>, указаны в таблице стилей браузера, а не из стилей начального значения свойств CSS.
Теперь давайте поговорим о ключевых словах CSS!
Inherit
Ключевое слово inherit указывает на то, что браузер должен искать значение ближайшего родительского элемента и унаследовать это значение. Если у ближайшего родителя свойство тоже inherit, он продолжит подниматься по DOM дереву, пока не найдет какое-то значение. Если значения нет, браузер будет использовать свой стиль пользовательского агента, а если такого стиля нет, он будет использовать исходный базовый стиль.
Initial
Чтобы понять это свойство, мы должны помнить важный факт: каждое свойство в CSS имеет значение по умолчанию, которое не имеет ничего общего со значением по умолчанию браузера. Стили браузера - это основные стили, которые, собственно, браузер и применяет к HTML элементам. Мы склонны думать, что они приходят автоматически с HTML, но это не так.
Ключевое слово initial указывает браузеру использовать значение CSS по умолчанию для данного свойства. Например:
- initial для color - black
Такое поведение может быть запутанным, потому что, как я уже говорил, значение свойства CSS по умолчанию (initial) не обязательно является значением по умолчанию, которое браузер определяет для элемента.
Например, initial свойство display является inline для всех элементов.
Поэтому, если элемент <div> получает display: initial – его отображение будет исходным, а не block (что является его стилем в браузере).
div.box{
background-color: red;
display: initial; /* inline а не block */
}
Пример на codepen.
Unset
Ключевое слово unset уникально тем, что оно работает по-разному на разных типах свойств. В CSS есть два типа свойств:
- Наследуемые свойства — свойства, которые распространяются на дочерние элементы. Все свойства, которые влияют на текст, ведут себя таким образом. Например, если мы определим размер шрифта для HTML элемента, он будет применяться ко всем его потомкам, пока вы не установите другой размер шрифта для конкретного элемента.
- Ненаследуемые свойства — все остальные свойства, которые не имеют отношения к стилизации текста. Например свойство border. Когда мы задаем его элементу, дочерние элементы не получают это свойство.
Ключевое слово unset работает как inherit для наследуемых свойств.
Например, для свойства color будет работать как inherit, то есть, ищет родительский элемент с определением для свойства color, и если ничего не найдено – будут использованы значение user-agent стилей, и если нет никакого стиля в браузере, он будет использовать исходный базовый стиль.
Для не наследуемых свойств unset будет работать так же, как и initial, то есть будет применено значение по умолчанию. Например, для border-color он будет работать как initial.
.some-class{
color: unset; /* работает как "inherit" */
display: unset; /* работает как "initial" */
}
Так зчем использовать unset, если он работает точно так же, как inherit и initial?
Если мы сбрасываем только одно свойство, тогда unset не требуется: мы можем просто вместо этого использовать наследование или начальные значения.
Но у нас есть свойство, all, которое дает новую возможность: сбросить все унаследованные свойства и не унаследованные свойства одновременно!
Таким образом, вам не нужно сбрасывать свойства по одному.
Применение unset значения к свойству all приведет к сбросу всех унаследованных свойств, которые будут наследоваться, и всех ненаследуемых свойств, к исходному.
Это единственная причина существования ключевого слова unset! В противном случае мы могли бы вместо него использовать inherit и initial.
Вместо сброса свойств по одному, например:
.common-content *{
font-size: inherit;
font-weight: inherit;
border-width: initial;
background-color: initial;
}
Мы можем использовать новое свойство all со значением unset, которое повлияет на все существующие свойства, например:
.common-content *{
all: unset;
}
Но что, если мы хотим сбросить стили свойства в исходный стиль браузера, а не в базовый стиль свойства? Например, чтобы вернуть свойство display элемента <div> в block (его стиль браузера), а не inline (его базовый стиль CSS)?
Встречайте свойство:
Revert
Ключевое слово revert очень похоже на unset, с той лишь разницей, что оно предпочитает стили пользовательского агента базовому стилю свойства CSS. Например:
div{
display: revert; /* = block */
}
h1{
font-weight: revert; /* = bold */
font-size: revert; /* = 2em */
}
Таким образом, если мы хотим сбросить все стили тега HTML до стиля браузера, мы можем сделать это следующим образом:
.common-content *{
all: revert;
}
Поддержка браузерами
- inherit — работет везде включая Internet Explorer 11
- initial & unset — работает везде кромк Internet Explorer 11 и ниже
- revert — Firefox, Safari, Chrome
Спасибо за внимание! Ссылка на оригинал.