Бортовой журнал Ктулху

Приведение стандартных стилей к базовому с помощью reset.css и normalize.css

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

Отображение базовых стилей в браузерах

Каждый браузер имеет по умолчанию набор базовых стилей которые он применяет к странице по умолчанию. И если мы создать страницу на «голом» html без оформления и стилей, браузер все равно отобразит тег с некоторым оформлением, например H1 будет жирным и большим.

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

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

reset.css

Первым появился файл reset.css. Этот css файл содержит в себе перечисление всех возможных html тегов, и сбрасывает их значение на ноль. То ест убирает все возможные отступы, делает шрифт одинаковым во всех тегах, сбрасывая все стили текста. Так что все заголовки и абзацы отображаются простым текстом, одним размеров и без отступов. В результате получаем сброс стилей по умолчанию во всех браузерах.

Работает это так, сначала на странице подключаем файл reset.css, и уже после него свой файл со стилями. В итоге мы сначала сбрасываем все стили, и уже потом в style.css задаем оформление html тегам. Таким образом мы достигаем того что все браузеры сбросят свои стили по умолчанию, и вся разметка будет основываться на тех стилях которые мы зададим в style.css.

Скачать reset.css можно на сайте cssreset.com

normalize.css

После того как на странице подключен reset.css все стили приходится прописывать заново. И каждый раз это занятие утомляет. Поэтому на смену reset.css пришел другой инструмент — normalize. Normailze — как понятно из названия, не сбрасывает все стили, а нормализует, приводит их к единому виду во всех браузерах. После его применения базовые стили отображени заголовков, размер шрифтов, отступы унифицируются и отображаются во всех браузерах одинаково. Используя его можно сэкономить определенное количество времени, которое в случает с reset было бы потрачено на прописывание сброшенных стилей.

Скачать normalize.css можно с сайта necolas.github.io/normalize.css

Так reset или normalize?

Первый — сбрасывает все стили, второй — приводит к единому знаменателю. Опытные верстальщики, которые используют reset.css обычно имеют свои наборы стилей которые сразу же подключают после reset для оформления контента. И им не приходится каждый раз в новой верстке заново определять стили для базовых элементов.

normalize удобен если вы изучите его структуру, можете видоизменить его под себя — настроив базовый внешний вид тегов. И работа с ним также будет удобной на потоке — когда верстать приходится много и часто.