CSS: сброс стилей

простой способ сброса стилей, установленных по умолчанию в CSS

2024-05-30 I Shar

время чтения 2 мин.

Рано или поздно каждый frontend-разработчик сталкивается со стилями, установленными по умолчанию. Это приносит в проект массу неудобств. Обычно, верстальщик в таком случае начинает волноваться, чувствует себя неуверенно и, занимая свое время поиском решения проблемы, вспоминает всех: от создателей CSS до программистов, мастерящих известные браузеры.

Как же избавиться от такого кошмара? Существует ли какая-то секретная кнопка, которая может быстро и эффективно справиться с проблемой CSS-стилей, установленных по умолчанию?

“Да, существует” - вот короткий ответ на этот вопрос. Но, все-таки, как решить озвученную проблему? В этой короткой статье или заметке, мы познакомимся с очень простой реализацией сброса CSS-стилей, установленных по умолчанию, а точнее CSS-стилей, навязываемых нам клиентским приложением (user-agent), то есть браузером.

Содержание

Стили по умолчанию

Перед тем, как перейти к решению проблемы, давайте разберемся: откуда, собственно, берутся базовые значения CSS-свойств или, если изъясняться более привычными формулировками: стили, установленные по умолчанию (default styles).

В CSS все свойства имеют начальные (initial) значения. И эти значения никаким образом не связаны с HTML-элементами.

Стили клиентского приложения

Итак, мы уже поняли, что каждое CSS-свойство имеет начальное или базовое значение. Но, при загрузке страницы в браузер, для HTML-элементов загружаются значения, установленные по умолчанию, так же известные, как стили клиентского приложения или браузера (user-agent styles).

Таким образом, сами стили клиентского приложения никак не изменяют начальные значения CSS-свойств. Они применются в соответствии с правилами, установленными для каскадных стилей и отображаются в инструментах разработчика (developer tools) браузера.

Например:

Сами HTML-элементы не имеют никаких базовых или начальных значений. Любые стили, применяемые к HTML-тегам (например:

) изначально предоставляются браузером (клиентским приложением).

Повторим еще раз:

initail: базовые или начальные значения существуют только для CSS-свойств и не имеют никакого отношения к HTML-элементам,
user-agent: стили клиентского-приложения (браузера) являются CSS-свойствами и их значениями, устанавливаемыми для каждого HTML-элемента браузером по умолчанию.

О сбросе стилей

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

Например, сбросим стили для заголовков первого уровня:

h1 {
    all: unset;
}

Следует помнить, что свойство all может принимать и другие значение, такие как initial или inherit.

Поддержка браузерами

inherit: работает во всех актуальных версиях популярных браузеров, включая Internet Explorer 11,
initial, unset, revert: работает во всех актуальных версиях популярных браузеров, кроме Internet Explorer 11.