В чем разница между Normalize.css и Reset 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([controls]){display:none;height:0;}
[hidden],
template{display:none;}
a{background-color:transparent;}
a:active,
a:hover{outline:0;}
abbr[title]{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[type="button"],
input[type="reset"],
input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],
html input[disabled]{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[type="checkbox"],
input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{height:auto;}
input[type="search"]{-webkit-appearance:textfield;}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-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;}

 

Ознакомится с оригиналом normalize.css вы можете на гитхабе.

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

2 коментаря

  1. Палка о двух концах.
    Ресет сбрасывает стили всех браузеров, включая и старых. Это полностью устраняет все их причуды. После это можно нормализовать часть стилей файлом нормализе, а часть руками. Нормализе облегчает написание кода. Но, использовать только один этот файл, я считаю не творческим подходом, это раз, а во вторых – непрофессиональным. Нормализе не решает проблему с ИЕ. Для этого, даже разработчики вордпресс используют скрипты в дефолтных темах. Настолько проблематичны эти браузеры. Никакой нормализе этой проблемы не решит.

    1. В современных браузерах все эти проблемы к счастью пофиксили (по крайней мере большинство из них), а вот ИЕ уже ничего не исправит, особенно старые версии 🙂 Если почитать насколько он отличался раньше от всемирных стандартов, причем не только по тому как должен работать HTML, CSS но и JavaScript в том числе. Спасибо за конструктивный комментарий)

Залишити коментар до Dmitriy Скасувати коментар