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

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

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

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

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

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

Классный своего рода CSS Reset! Постоянно использую как дополнительный «нормализатор» стилей.

Normalize.css — принуждает браузеры отображать все элементы более систематично, последовательно и в соответствии с современными стандартами. Он нацелен ТОЛЬКО на стили, которые должны быть нормализованы.

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height : 1.15 ; /* 1 */ -webkit-text-size-adjust : 100% ; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin : 0 ; } /** * Render the `main` element consistently in IE. */ main { display : block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size : 2em ; margin : 0.67em 0 ; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing : content-box; /* 1 */ height : 0 ; /* 1 */ overflow : visible; /* 2 */ } pre { font-family : monospace, monospace; /* 1 */ font-size : 1em ; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color : transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr { border-bottom : none; /* 1 */ text-decoration : underline; /* 2 */ text-decoration : underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b , strong { font-weight : bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code , kbd , samp { font-family : monospace, monospace; /* 1 */ font-size : 1em ; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size : 80% ; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub , sup { font-size : 75% ; line-height : 0 ; position : relative; vertical-align : baseline; } sub { bottom : -0.25em ; } sup { top : -0.5em ; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style : none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button , input , optgroup , select , textarea { font-family : inherit; /* 1 */ font-size : 100% ; /* 1 */ line-height : 1.15 ; /* 1 */ margin : 0 ; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button , input { /* 1 */ overflow : visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button , select { /* 1 */ text-transform : none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button , , , { -webkit-appearance : button; } /** * Remove the inner border and padding in Firefox. */ button ::-moz-focus-inner , ::-moz-focus-inner , ::-moz-focus-inner , ::-moz-focus-inner { border-style : none; padding : 0 ; } /** * Restore the focus styles unset by the previous rule. */ button :-moz-focusring , :-moz-focusring , :-moz-focusring , :-moz-focusring { outline : 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding : 0.35em 0.75em 0.625em ; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing : border-box; /* 1 */ color : inherit; /* 2 */ display : table; /* 1 */ max-width : 100% ; /* 1 */ padding : 0 ; /* 3 */ white-space : normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align : baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow : auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ , { box-sizing : border-box; /* 1 */ padding : 0 ; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ ::-webkit-inner-spin-button , ::-webkit-outer-spin-button { height : auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ { -webkit-appearance : textfield; /* 1 */ outline-offset : -2px ; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance : none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance : button; /* 1 */ font : inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display : block; } /* * Add the correct display in all browsers. */ summary { display : list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display : none; } /** * Add the correct display in IE 10. */ { display : none; }

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

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // вывожу свой размер миниатюры?>

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

Браузеры и базовые стили

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

большим размером и жирным начертанием,

чуть меньшим размером и так далее. Браузер выделит текст в теге курсивом, сделает подчеркнутым, а — жирным.

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

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

reset.css — что он делает и как его использовать

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

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

Скачать reset.css

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

Или можете скачать версию Eric Meyer’s “Reset CSS” 2.0 по кнопке ниже, с моего блога:

normalize.css — как он работает и в чем разница

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

Если вы еще не использовали normalize.css то рекомендую попробовать его в своем следующем, прокте, и кто знает, возможно вы уже не сможете от него отказаться 😉

Скачать normalize.css

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

Или загрузить с моего блога:

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

Однозначного ответа нет.

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

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

Каждый инструмент хорош, главное правильно его использовать 😉