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

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

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

Содержание

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

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

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

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

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

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

Например:

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

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

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

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

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

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

h1 {
    all: unset;
}

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

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

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

Заключение.

Надеюсь эта статья позволит Вам чуть упростить работу над проектами.

Спасибо за внимание.

Перевод статьи Alireza Hamid “A headache named default style in CSS”.