Что такое reset.css и normalize.css

Сегодня мы рассмотрим что такое reset.css и normalize.css и для чего они нужны. Пренебрегать данными файлами стилей не следует, так как их отсутствие может серьёзно исказить внешний вид сайта на разных версиях браузеров.

 
Каждый начинающий верстальщик так или иначе сталкивается с проблемой кроссбраузерности (когда html страница по разному отображается на каждом из браузеров). Отличия могут быть как несущественные так и критические в следствии чего «плывёт» вся вёрстка. Данная статья не расскажет как решить все проблемы кроссбраузерности, речь пойдёт о файлах стилей reset.css и normalize.css.
 
Разработчики браузеров сами решают каким образом оформлять тот или иной элемент страницы, будь то заголовок (h1), список (ul) и т.д. Разница может заключаться в значениях отступов (margin, padding), размерах шрифтов и прочем. Также каждый пользователь может настроить свой браузер под себя, то есть сделать первоначальные установки по шрифтам или, что ещё хуже, фонам. Это влечёт за собой следующий не мало важный момент — например если пользователь поменял цвет фона на красный, а верстальщик не переопределил значение для фона страницы, то у пользователя будет свой «уникальный» дизайн. От верстальщика требуется чтобы сайт отображался одинаково (или приближённо) вне зависимости от браузера клиента, а для этого требуется переопределять все значения элементов не смотря, что его браузер уже имеет белый фон.
  

Reset.css

Идея о создании данного набора файлов стилей пришла в голову Эрику Майеру. Идея reset.css проста — перечислить все возможные теги и сбросить для них стили в нулевые значения. Остаётся лишь подключить данный файл к странице как обычный файл стилей.

Существует ещё одна вариация сброса:

1
2
3
4

* {
   margin: 0; 
   padding: 0;
}

Недостатком сброса стилей является необходимость повторно задавать стили для элементов (переопределять сброшенные значения).
  

Normalize.css

Автор данного подхода Николас Галлахер
Normalize.css — не сбрасывает стили для элементов, а нормализует (стандартизирует), что избавляет от необходимости переопределять повторно все стили.
 
 
 
Заключение:

Популярны оба файла и в своей практике можно использовать любой из них. Бывают случаи когда приходится на основе этих файлов создать один свой, который объединяет оба эти подхода. Ещё одним решением, которое избавляет нас от необходимости использования сброса и нормализации стилей — это использование CSS-фреймворков, которые в себе уже содержат сборку из этих файлов.