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

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

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

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

* {margin: 0; padding: 0;}

* { 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; }

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.

Классный своего рода 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; }

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

Pure CSS

Pure – это набор CSS-модулей, разработанных компанией Yahoo, которые вы можете использовать как основу в любом веб-проекте. Фреймворк значительно облегчает CSS-разработку и если вы о нем еще не слышали, самое время попробовать.

CSS only responsive navigation

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

CSS Trashman

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

Glue

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

Очень часто в больших CSS-файлах остаются неиспользуемые стили, которые, к сожалению, не так уж просто обнаружить. Helium — это, запускаемый в браузере, JavaScript-инструмент, определяющий неиспользуемые стили из вашего CSS-файла.

Topcoat – это очень аккуратная библиотека CSS-классов, специализирующаяся на элементах формы: кнопках, флажках, слайдерах и т.д. Самый простой способ украсить ваш сайт или веб-приложение за несколько минут.

Fitgrd – это прочный фундамент для создания собственного адаптивного сайта. Все в ваших руках, кроме сетки, о ней позаботиться.Fitgrd, сэкономив вам кучу времени на написание несущественного кода.

Normalize.css это HTML5-альтернатива CSS-сбросам. Он заставляет браузер отрисовывать все элементы более согласованно и в соответствии с современными стандартами. Normalize.css используется множеством популярных сайтов, таких как Twitter Bootstrap, Soundcloud, TweetDeck и многих других.

Bear CSS

Bear CSS это не только красивый сайт, но и очень полезный инструмент. Просто создайте HTML-документ и загрузите туда. Bear CSS автоматически сгенерирует загружаемый CSS-файл, основанный на используемых HTML-элементах. Отличная экономия времени!

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

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