О normalize.css
Это перевод статьи Николаса Галахера — «About normalize.css».
Это перевод статьи Николаса Галахера — «About normalize.css»
Normalize.css — это небольшой CSS-файл, который обеспечивает для HTML-элементов лучшую кроссбраузерность в стилях по умолчанию. Это современная, готовая к HTML5 альтернатива традиционному reset.css.
- Normalize.css — сайт проекта
- Normalize.css — исходный код на GitHub
В настоящее время normalize.css используется в Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks и во многих других фреймворках, инструментах и сайтах.
Обзор
Normalize.css является альтернативой CSS Reset. Проект является продуктом сотен часов глубокого исследования различий между изначальными стилями браузера. Это исследование провели Николас Галахер, @necolas и Джонатан Нил, @jon_neal.
- сохранять полезные настройки браузера, а не стирать их;
- нормализовать стили для широкого круга HTML-элементов;
- корректировать ошибки и основные несоответствия браузера;
- совершенствовать юзабилити незаметными улучшениями;
- объяснять код, используя комментарии и детальную документацию.
Он поддерживает широкий диапазон браузеров (в том числе мобильных) и включает в себя CSS, который нормализует HTML5-элементы, типографику, списки, встраиваемый контент, формы и таблицы.
Несмотря на то, что проект основан на принципе нормализации, он использует стандартные настройки там, где они предпочтительны.
Нормализовать или сбрасывать?
Стоит понимать более подробно, в чём отличие normalize.css от традиционного reset.css.
Normalize.css сохраняет полезные настройки по умолчанию
Reset.css накладывает однородный визуальный стиль, выравнивая стили по умолчанию почти для всех элементов. В отличие от этого, normalize.css сохраняет многие полезные стили браузеров по умолчанию. Это значит, что не требуется повторно объявлять стили для всех стандартных элементов типографики.
Когда элемент имеет различные стили по умолчанию в разных браузерах, normalize.css там, где это возможно, стремится сделать эти стили совместимыми и соответствующими современными стандартам.
Normalize.css исправляет популярные ошибки
Он исправляет основные баги на мобильных и десктопных устройствах, которые не затрагивает reset.css. Это включает в себя параметры отображения элементов HTML5, исправление font-size для предварительно отформатированного текста, отображение SVG в IE9, и многие другие баги, связанные с отображаемым в разных браузерах и операционных системах.
Например, вот как normalize.css делает HTML5-элемент формы с типом search кроссбраузерным и стилизованным.
/** * 1. Переопределяет свойство `appearance`, заменяет `searchfield` в Safari и Chrome. * 2. Переопределяет свойство `box-sizing`, заменяет `border-box` в Safari и Chrome. */ input[type="search"] < -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ >/** * Убирает внутренний отступ и кнопку очистки строки поиска в Safari и Chrome в OS X */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration
Reset.css часто не приводит браузеры к тому уровню, где отправной точкой считается то, как элемент отрисовывается. Это особенно верно в отношении форм — именно здесь normalize.css может существенно помочь.
Normalize.css не мешает вашим инструментам отладки
Обычно при использовании reset.css раздражает огромная цепочка наследования свойств, которая отображается в инструментах разработчика.
Такая проблема не возникает с normalize.css из-за целенаправленных стилей и умеренного использования множественных селекторов в наборе правил.
Normalize.css модульный
Проект разбит на относительно независимые участки, что позволяет увидеть, каким именно элементам нужны конкретные стили. Кроме того, это даёт вам возможность удалить блоки свойств (например, нормализацию форм), если известно, что они никогда не понадобятся на сайте.
Normalize.css имеет подробную документацию
Код normalize.css основан на детальном кроссбраузерном методичном тестировании. Подробно документированный файл вы можете найти на GitHub. Это значит, что вы можете узнать, что делает каждая строка кода, зачем она добавлена, какие различия существуют между браузерами. Также вы легко можете провести собственные тесты.
Цель проекта — показать людям, как по умолчанию браузеры отображают элементы, и помочь им упростить процесс внедрения улучшений.
Как использовать normalize.css
Сперва установите или скачайте normalize.css с GitHub. Есть два способа как можно его использовать.
Первый способ: используйте normalize.css как отправную точку CSS для вашего собственного проекта, изменяя значения согласно требованиям дизайна.
Второй способ: используйте normalize.css нетронутым и, основываясь на нём, переопределяйте стили в своём CSS при необходимости.
Заключение
Normalize.css значительно отличается от reset.css. Стоит попробовать его, чтобы увидеть, соответствует ли он вашему подходу и предпочтениям в разработке.
Проект развивается в открытом доступе на GitHub. Любой желающий может сообщить о проблемах и предложить исправления. Полная история проекта доступна всем для просмотра, а в коммитах и тикетах находятся контекст и причины всех изменений.
Вся информация о стилях по умолчанию
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Зачем нужен нормализатор CSS
Когда веб-разработчик создаёт новый сайт, он хочет, чтобы в каждом браузере этот сайт выглядел одинаково. Но у каждого браузера есть свои стандарты отступов, оформления ссылок или форматирования блоков. В результате то, что в «Хроме» выглядит хорошо, в «Сафари» может выглядеть не очень, а в «Мозилле» вообще разрывает.
Для примера возьмём простой код, который нарисует нам на странице несколько стандартных элементов:
- две горизонтальных линии-разделителя,
- поле ввода с текстом внутри,
- кнопку,
- текст со ссылкой.
А после этого посмотрим, как выглядит этот код в разных браузерах.
Делаем одинаково
Привет, это журнал «Код»! 
Почему так происходит
Несмотря на то что внутри многих разных браузеров стоят одинаковые движки, у каждой компании свои представления о прекрасном и о том, как отображать разные HTML-элементы и CSS-стили. Например, в разных браузерах могут отличаться:
- толщина линий обводки,
- радиус скругления,
- размер текста,
- внешние и внутренние отступы у элементов,
- правила оформления ссылок,
- формы и кнопки.
Всё это записано в стандартных стилях браузера. Каждый раз, когда браузер встречает элемент, у которого не задан один из параметров, он берёт его из своей встроенной таблицы стилей. Разные браузеры — разные стили.
При этом браузер справится со своей основной задачей — показать HTML-страницу в понятном для пользователя виде. Но если веб-разработчик хочет, чтобы сайт выглядел идентично в каждом браузере, он должен предусмотреть это заранее и прописать в стилях.
Что такое нормализатор стилей
Чтобы сайт выглядел в каждом браузере почти одинаково, разработчики используют нормализатор стилей — normalize.css. По сути, это просто большой CSS-файл, который делает следующее:
- стандартизирует все отступы;
- устанавливает единый размер шрифта;
- приводит к единому внешнему виду все формы, кнопки и элементы на странице;
- устанавливает для всех браузеров единые начальные параметры для форматирования текста, изображений и стандартных элементов.
Для этого нормализатор использует специальные CSS-команды, чтобы каждому браузеру объяснить на его языке, что нужно сделать.
Пример
Код ниже делает две вещи:
- Устанавливает одинаковую высоту строки во всех браузерах.
- Предотвращает изменения размера шрифта в iOS при повороте экрана.
html <
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
>
-webkit-text-size-adjust — это специальная команда, которая состоит из двух частей:
-webkit, который сообщает, что эта команда относится к браузерам на движке WebKit. Остальные браузеры проигнорируют эту команду, а, например, Safari в iOS поймёт, что это команда для неё.
text-size-adjust — команда, которая говорит браузеру, какой размер шрифта нужно использовать.
Получается, что все браузеры поймут первую команду line-height , потому что она стандартная для всех браузеров, а на вторую -webkit-text-size-adjust среагируют только те браузеры, у которых могут быть проблемы с отображением размера текста (например, Safari).
Как использовать
Подключить нормализатор как обычную CSS-таблицу стилей к своей странице:
Ещё вариант — можно взять нормализатор и использовать его как шаблон или основу для собственной таблицы стилей. Так в одном файле вы получите одинаковое отображение в браузерах и нужные настройки внешнего вида страницы.
Вот как будут выглядеть наши страницы после подключения нормализатора:
Что такое reset.css и normalize.css
Сегодня мы рассмотрим что такое reset.css и normalize.css и для чего они нужны. Пренебрегать данными файлами стилей не следует, так как их отсутствие может серьёзно исказить внешний вид сайта на разных версиях браузеров.
Каждый начинающий верстальщик так или иначе сталкивается с проблемой кроссбраузерности (когда html страница по разному отображается на каждом из браузеров). Отличия могут быть как несущественные так и критические в следствии чего «плывёт» вся вёрстка. Данная статья не расскажет как решить все проблемы кроссбраузерности, речь пойдёт о файлах стилей reset.css и normalize.css.
Разработчики браузеров сами решают каким образом оформлять тот или иной элемент страницы, будь то заголовок (h1), список (ul) и т.д. Разница может заключаться в значениях отступов (margin, padding), размерах шрифтов и прочем. Также каждый пользователь может настроить свой браузер под себя, то есть сделать первоначальные установки по шрифтам или, что ещё хуже, фонам. Это влечёт за собой следующий не мало важный момент — например если пользователь поменял цвет фона на красный, а верстальщик не переопределил значение для фона страницы, то у пользователя будет свой «уникальный» дизайн. От верстальщика требуется чтобы сайт отображался одинаково (или приближённо) вне зависимости от браузера клиента, а для этого требуется переопределять все значения элементов не смотря, что его браузер уже имеет белый фон.
Reset.css
Идея о создании данного набора файлов стилей пришла в голову Эрику Майеру. Идея reset.css проста — перечислить все возможные теги и сбросить для них стили в нулевые значения. Остаётся лишь подключить данный файл к странице как обычный файл стилей.
Существует ещё одна вариация сброса:
1 2 3 4
* { margin: 0; padding: 0; }
Недостатком сброса стилей является необходимость повторно задавать стили для элементов (переопределять сброшенные значения).
Normalize.css
Автор данного подхода Николас Галлахер
Normalize.css — не сбрасывает стили для элементов, а нормализует (стандартизирует), что избавляет от необходимости переопределять повторно все стили.
Заключение:
Популярны оба файла и в своей практике можно использовать любой из них. Бывают случаи когда приходится на основе этих файлов создать один свой, который объединяет оба эти подхода. Ещё одним решением, которое избавляет нас от необходимости использования сброса и нормализации стилей — это использование CSS-фреймворков, которые в себе уже содержат сборку из этих файлов.
В чем разница между Normalize.css и Reset CSS?
Если вы когда-нибудь делали коммерческий заказ на верстку, то наверняка сталкивались с таким требованием как кроссбраузерность, то есть чтобы ваша страница отображалась максимально одинаково во всех браузерах. И поэтому возникает вопрос – что же выбрать, 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 выигрывает по всем параметрам. Стоит также вспомнить про извращенцев, которые используют что-то в этом стиле:
Как вы понимаете так делать не стоит.
В заключении хотелось бы сказать, что я еще не встречал человека, который бы утверждал что reset.css вообще есть смысл применять. Мне кажется, его применяли только потому что не знали про “нормализацию стилей” ��
Есть мнение, что стоит подключать стили в head “инлайново”, хотя бы для “первого экрана” – то есть то, что сразу покажет человеку когда он откроет ваш сайт, и это действительно очень хорошая практика. Данную рекомендацию вы можете встретить в google page speed.
Возможно вам пригодится – inline normalize css and bootstrap grid �� Пишем это в head, затем также само пишем свои стили для первого экрана, и вы выполните одну из рекомендаций + ваш сайт не будет шататься при загрузке, т.к. основные самые важные стили, а именно сетка, нормалайз и “первый экран” уже прогрузились.
Также вот вам версия без комментариев:
html body article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary audio, canvas, progress, video audio:not([controls]) [hidden], template a a:active, a:hover abbr[title] b, strong b, strong dfn h1 mark small sub, sup sup sub img svg:not(:root) figure hr pre code, kbd, pre, samp button, input, optgroup, select, textarea button button, select button, html input[type=»button»], input[type=»reset»], input[type=»submit»] button[disabled], html input[disabled] button::-moz-focus-inner, input::-moz-focus-inner button:-moz-focusring, input:-moz-focusring input input[type=»checkbox»], input[type=»radio»] input[type=»number»]::-webkit-inner-spin-button, input[type=»number»]::-webkit-outer-spin-button input[type=»search»] input[type=»search»]::-webkit-search-cancel-button, input[type=»search»]::-webkit-search-decoration fieldset legend textarea optgroup