Всем привет! В этой статье мы рассмотрим разницу между reset.css и normalize.css и разберемся, что лучше использовать.

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

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

NORMALIZE.CSS - файл, где стили для каждого тега не сбрасываются на ноль, а нормализуются, т.е. приводятся к стандарту отступы, параграфы, заголовки и т.д. В этом случае вам уже не нужно будет переписывать все стили, что явно экономит время.

Конкретного ответа, что использовать, никто вам не даст. Это уже дело вкуса, кому как удобнее. Как правило, через какое-то время использования первого или второго файла верстальщики разрабатывают свой собственный.

Итак, на этом все. Спасибо за внимание и удачи!

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

Что лучше reset.css или normalize.css?

Для начала давайте выясним что делает каждый из файлов:

reset . css — как и видно по названию файла, сбрасывает большинство стилей браузера, которые в нем заданы по умолчанию (а такие действительно есть, просто откройте голый HTML).

normalize . css — этот файл не только задает стили по умолчанию там где это необходимо, но и исправляет некоторые недостатки старых браузеров (привет IE).

Как вы понимаете, эти 2 файла даже не совсем корректно сравнивать, так как у них немного разная «философия». Так в чем же разница и что выбрать?

В чем отличия normalize от reset css

1. В отличие от reset, после подключения normalize css, вы визуально сможете определить где у вас находятся различные элементы, те же параграфы имеют внешние отступы. Поэтому, применяя «таблицу стилей со сбросом», вы просто приведете большое количество элементов к одному виду.
2. Исходя из 1 правила следует что нам нужно написать стили с нуля, т.к. у нас всё сброшено, что лично по мне, уже не комильфо .
3. В normalize css есть исправления различных общих ошибок, таких как отображение HTML5 тегов или тех же форм
4. Когда вы работаете с инструментами отладки в браузерах, таких, например, как фаербаг, подключая ресет вы получите огромную «простыню» из свойств, которая в итоге увеличит ваше время на написание новых стилей и поиск старых
5. В normalize каждое отдельное правило задокументировано и вы легко сможете понять для чего оно там, и если вы уверены что оно вам не нужно, то сможете легко его удалить
6. normalize.css подключен по умолчанию в bootstrap 🙂

Думаю вы и сами понимаете, что normalize выигрывает по всем параметрам. Стоит также вспомнить про извращенцев, которые используют что-то в этом стиле:

* {margin: 0; padding: 0;}

Как вы понимаете так делать не стоит.

В заключении хотелось бы сказать, что я еще не встречал человека, который бы утверждал что reset.css вообще есть смысл применять. Мне кажется, его применяли только потому что не знали про «нормализацию стилей» 🙂

Есть мнение, что стоит подключать стили в head «инлайново», хотя бы для «первого экрана» — то есть то, что сразу покажет человеку когда он откроет ваш сайт, и это действительно очень хорошая практика. Данную рекомендацию вы можете встретить в google page speed .

Возможно вам пригодится — inline normalize css and bootstrap grid 🙂 Пишем это в head, затем также само пишем свои стили для первого экрана, и вы выполните одну из рекомендаций + ваш сайт не будет шататься при загрузке, т.к. основные самые важные стили, а именно сетка, нормалайз и «первый экран» уже прогрузились.

Также вот вам версия без комментариев:

Html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;} body{margin:0;} article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary{display:block;} audio, canvas, progress, video{display:inline-block;vertical-align:baseline;} audio:not(){display:none;height:0;} , template{display:none;} a{background-color:transparent;} a:active, a:hover{outline:0;} abbr{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;} b, strong{font-weight:inherit;} b, strong{font-weight:bolder;} dfn{font-style:italic;} h1{font-size:2em;margin:0.67em 0;} mark{background-color:#ff0;color:#000;} small{font-size:80%;} sub, sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} sup{top:-0.5em;} sub{bottom:-0.25em;} img{border:0;} svg:not(:root){overflow:hidden;} figure{margin:1em 40px;} hr{box-sizing:content-box;height:0;overflow:visible;} pre{overflow:auto;} code, kbd, pre, samp{font-family:monospace, monospace;font-size:1em;} button, input, optgroup, select, textarea{font:inherit;margin:0;} button{overflow:visible;} button, select{text-transform:none;} button, html input, input, input{-webkit-appearance:button;cursor:pointer;} button, html input{cursor:default;} button::-moz-focus-inner, input::-moz-focus-inner{border:0;padding:0;} button:-moz-focusring, input:-moz-focusring{outline:1px dotted ButtonText;} input{line-height:normal;} input, input{box-sizing:border-box;padding:0;} input::-webkit-inner-spin-button, input::-webkit-outer-spin-button{height:auto;} input{-webkit-appearance:textfield;} input::-webkit-search-cancel-button, input::-webkit-search-decoration{-webkit-appearance:none;} fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;} legend{border:0;padding:0;} textarea{overflow:auto;} optgroup{font-weight:bold;}

Статистика: если ты имеешь кастрюлю с кипятком, а твой сосед курицу, то в среднем у вас куриный суп

Приведение стандартных стилей к базовому с помощью 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 удобен если вы изучите его структуру, можете видоизменить его под себя — настроив базовый внешний вид тегов. И работа с ним также будет удобной на потоке — когда верстать приходится много и часто.

От автора: сайтостроение в Сети бывает похоже на строительство на зыбучих песках. Браузеры делают все то же, но время от времени у них получаются раздражающе непредсказуемые отличия. Например, у всех браузеров есть «таблицы стилей user agent» - набор стилей CSS по умолчанию, чтобы заголовок выглядел заголовком и т.д., еще до назначения вами стилей странице1. Конечно, в каждом браузерном движке наборы по умолчанию применяются немного разные.

Одним из примеров являлись стили списка по умолчанию, где изначально в браузерных таблицах стилей по умолчанию Internet Explorer’а и Opera был отступ списка margin-left: 30pt;, тогда как Firefox и KHTML шли с padding-left: 40px;. Если вам хотелось изменить отступ по умолчанию, определив ul {padding-left: 0;}, то в браузерах это приводило к очень разным результатам.

СБРОС ИСХОДНЫХ НАСТРОЕК CSS

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

* {margin: 0; padding: 0;}

Определив отступ списка и начав с этого свою таблицу стилей, вы получите то, что ожидали. Однако применение * означало, что поле и отступ по умолчанию «грохнулись» для всех элементов и, как только вы добавляли элемент form, становилось совсем тяжко.

Цель сброса состоит в том, чтобы обнулить все, что можно… [и] послужить стартовой точкой ваших собственных основных стилей - Эрик Майер (Eric Meyer)

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

Он делает сброс некоторых свойств многих (но не всех) элементов до эквивалента простого текста. Так как сбрасываются только соответствующие элементы, таким образом обходятся некоторые проблемы * {margin: 0; padding: 0;}. Затем мы можем определять стили для этих сброшенных «обесстиленных» свойств, будучи уверенными в том, что строим на стабильной кроссбраузерной основе. Такое назначение стилей, кроме того, действует как сигнализатор потребности в осознанной установке подходящих стилей для этих элементов.

ПРОБЛЕМЫ СБРОСА НАСТРОЕК CSS

Сбросы CSS были настоящим спасением, но сейчас, особенно при условии возвышения каркасов-фреймов, они часто используются «как есть». Например, Эрик предполагал, что другие разработчики начнут строить сайты на предложенных им стилях сброса, соответствующим образом отменяя их, и в первую версию Meyer Reset временно включалось это правило:

/* помните о том, что нужно определить стили фокуса! */ :focus { outline: 0; }

К сожалению, на деле не все определяли стили фокуса, и из второй версии Эрик его удалил.

Применяя сбросы, ощущаешь себя немного извращенцем. Сброс стилей браузера по умолчанию заставляет размышлять о том, как должен показываться каждый элемент, помогая убедиться, что элементы применяются по семантике, а не стилям по умолчанию. Но для элементов вроде i и em почти всегда имеется стиль браузера по умолчанию. Другие браузерные стили по умолчанию, такие, как бывший некогда смехотворно большим размер текста заголовков, изменились и по умолчанию стали довольно сносными. Проблемы начинаются, когда кто-то хочет после передачи применить сброшенный элемент HTML только с назначенными «обесстиленными» стилями сброса.

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

Правила сброса CSS, повторяемые по причине наследования

NORMALIZE.CSS

Николас Галлахер (Nicolas Gallagher) и Джонатан Нил (Jonathan Neal) предприняли иной подход с помощью Normalize.css , «маленького файла CSS, гарантирующего лучшую кроссбраузерную последовательность в стилях по умолчанию элементов HTML». Как и в случае со сбросами CSS, он дает нам надежную кроссбраузерную стартовую точку - в первую очередь основную причину применения сброса - но два этих подхода разнятся с философской точки зрения.

Сбросы CSS отменяют стили агента пользователя и возвращают множество элементов к их «обесстиленному» состоянию, некому ровному основанию, на котором можно безопасно строить. Однако затем нужно назначить стили большей части элементов до того, как мы сможем строить с их помощью. Вместо этого Normalize.css адресуется только к несообразностям стилей агента пользователя, выбирая самые подходящие настройки по умолчанию, в чем и заключается различие. Здесь мы тоже получаем безопасный кроссбраузерный фундамент, но такой, который включает нормализованные стили агента пользователя в качестве готовых к использованию базовых строительных материалов. В основном это нечто вроде идеализированной кроссбраузерной версии таблицы стилей по умолчанию CSS 2.1. В обоих случаях мы затем должны добавлять собственные доминирующие стили для создания изображения, но оттого, что настройки браузера по умолчанию в Normalize.css остаются, в общем приходится добавлять меньше стилей.

Так как изменения в Normalize.css более адресные, в ваших браузерных инструментах разработки отсутствует каскад наследования переписанных правил. Вот простой ul:, «обесстиленный» с помощью Meyer Reset и Normalize.css версий 1 и 2:

«Обесстиленный» элемент неупорядоченного списка

Применяем Meyer Reset

Применяем Normalize.css v1

Applying Normalize.css v2

Явно видна разница в философии, когда пример Meyer Reset появляется как пара строк простого текста без полей, отступа или маркеров, тогда как примеры Normalize.css похожи на стили по умолчанию. Разница в стилях, примененных к этому ul, тоже легко заметна.

Однако это не все стили, примененные к ul. Для сравнения вот вам тот же самый «обесстиленный» скриншот, но с видимыми стилями агента пользователя, в Firefox 21 и Opera Next 15.