Если вы когда-нибудь делали коммерческий заказ на верстку, то наверняка сталкивались с таким требованием как кроссбраузерность, то есть чтобы ваша страница отображалась максимально одинаково во всех браузерах. И поэтому возникает вопрос – что же выбрать, reset или normalize?
Что лучше reset.css или normalize.css?
Для начала давайте выясним что делает каждый из файлов:
reset.css – как и видно по названию файла, сбрасывает большинство стилей браузера, которые в нем заданы по умолчанию (а такие действительно есть, просто откройте голый HTML).
normalize.css – этот файл не только задает стили по умолчанию там где это необходимо, но и исправляет некоторые недостатки старых браузеров (привет IE).
Как вы понимаете, эти 2 файла даже не совсем корректно сравнивать, так как у них немного разная “философия”. Так в чем же разница и что выбрать?
В чем отличия normalize от reset css
- В отличие от reset, после подключения normalize css, вы визуально сможете определить где у вас находятся различные элементы, те же параграфы имеют внешние отступы. Поэтому, применяя “таблицу стилей со сбросом”, вы просто приведете большое количество элементов к одному виду.
- Исходя из 1 правила следует что нам нужно написать стили с нуля, т.к. у нас всё сброшено, что лично по мне, уже не комильфо.
- В normalize css есть исправления различных общих ошибок, таких как отображение HTML5 тегов или тех же форм
- Когда вы работаете с инструментами отладки в браузерах, таких, например, как фаербаг, подключая ресет вы получите огромную “простыню” из свойств, которая в итоге увеличит ваше время на написание новых стилей и поиск старых
- В normalize каждое отдельное правило задокументировано и вы легко сможете понять для чего оно там, и если вы уверены что оно вам не нужно, то сможете легко его удалить
- 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 вы можете на гитхабе.
Палка о двух концах.
Ресет сбрасывает стили всех браузеров, включая и старых. Это полностью устраняет все их причуды. После это можно нормализовать часть стилей файлом нормализе, а часть руками. Нормализе облегчает написание кода. Но, использовать только один этот файл, я считаю не творческим подходом, это раз, а во вторых – непрофессиональным. Нормализе не решает проблему с ИЕ. Для этого, даже разработчики вордпресс используют скрипты в дефолтных темах. Настолько проблематичны эти браузеры. Никакой нормализе этой проблемы не решит.
В современных браузерах все эти проблемы к счастью пофиксили (по крайней мере большинство из них), а вот ИЕ уже ничего не исправит, особенно старые версии 🙂 Если почитать насколько он отличался раньше от всемирных стандартов, причем не только по тому как должен работать HTML, CSS но и JavaScript в том числе. Спасибо за конструктивный комментарий)