Нормалайз css: Make browsers render all elements more consistently.

О normalize.css — Блог HTML Academy

Это перевод статьи Николаса Галахера — «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.

Цели normalize.css:

• сохранять полезные настройки браузера, а не стирать их;
• нормализовать стили для широкого круга 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 кроссбраузерным и стилизованным.

Reset.css часто не приводит браузеры к тому уровню, где отправной точкой считается то, как элемент отрисовывается. Это особенно верно в отношении форм — именно здесь normalize.css может существенно помочь.

Normalize.css не мешает вашим инструментам отладки

Обычно при использовании reset.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. Любой желающий может сообщить о проблемах и предложить исправления. Полная история проекта доступна всем для просмотра, а в коммитах и тикетах находятся контекст и причины всех изменений.

Материалы к прочтению

Вся информация о стилях по умолчанию:

• WHATWG suggestions for rendering HTML documents.
• Internet Explorer User Agent Style Sheets.
• CSS2.1 User Agent Style Sheet Defaults.

Бесплатные упражнения по CSS

Всего в двух кликах от вас, в тренажёрах по вёрстке. Это концентрат пользы для любого фронтендера.

Регистрация

Что такое нормализатор CSS и зачем он нужен — Журнал «Код»

Когда веб-разработчик создаёт новый сайт, он хочет, чтобы в каждом браузере этот сайт выглядел одинаково. Но у каждого браузера есть свои стандарты отступов, оформления ссылок или форматирования блоков. В результате то, что в «Хроме» выглядит хорошо, в «Сафари» может выглядеть не очень, а в «Мозилле» вообще разрывает. 

Одной строкой: новые CSS-команды для фронтендов

Для примера возьмём простой код, который нарисует нам на странице несколько стандартных элементов:

• две горизонтальных линии-разделителя,
• поле ввода с текстом внутри,
• кнопку,
• текст со ссылкой.

А после этого посмотрим, как выглядит этот код в разных браузерах.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Делаем одинаково</title>
</head>
<body>
  <hr>
  <hr>
  <input type="text" placeholder="Напишите свой текст">
  <br>
  <br>
  <button>Кнопка</button>
  <br>
  <br>
  <a href="#">Привет, это журнал «Код»! </a>
</body>
</html>

Хром, версия 87.

Сафари, версия 14. Текст в стандартных элементах гораздо меньше, чем в Хроме.Firefox, версия 84. Выглядит почти так же, как и в Сафари, но линии гораздо жирнее.

Почему так происходит

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

• толщина линий обводки,
• радиус скругления,
• размер текста,
• внешние и внутренние отступы у элементов,
• правила оформления ссылок,
• формы и кнопки.

Всё это записано в стандартных стилях браузера. Каждый раз, когда браузер встречает элемент, у которого не задан один из параметров, он берёт его из своей встроенной таблицы стилей. Разные браузеры — разные стили.

При этом браузер справится со своей основной задачей — показать HTML-страницу в понятном для пользователя виде. Но если веб-разработчик хочет, чтобы сайт выглядел идентично в каждом браузере, он должен предусмотреть это заранее и прописать в стилях.

Что такое нормализатор стилей

Чтобы сайт выглядел в каждом браузере почти одинаково, разработчики используют нормализатор стилей — normalize.css. По сути это просто большой CSS-файл, который делает следующее:

• стандартизирует все отступы;
• устанавливает единый размер шрифта;
• приводит к единому внешнему виду все формы, кнопки и элементы на странице;
• устанавливает для всех браузеров единые начальные параметры для форматирования текста, изображений и стандартных элементов.

Для этого нормализатор использует специальные CSS-команды, чтобы каждому браузеру объяснить на его языке, что нужно сделать. 

Пример

Код ниже делает две вещи:

1. Устанавливает одинаковую высоту строки во всех браузерах.
2. Предотвращает изменения размера шрифта в 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-таблицу стилей к своей странице:

<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">

Ещё вариант  — можно взять нормализатор и использовать его как шаблон или основу для собственной таблицы стилей. Так в одном файле вы получите одинаковое отображение в браузерах и нужные настройки внешнего вида страницы.

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

ХромСафариFirefoxОпера

Но что-то же всё равно отличается даже на этих скриншотах!

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

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

Это единственный нормализатор?

Нет, на самом деле их много. Просто этот самый популярный и проверенный. 

Что дальше

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

Текст и скриншоты:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Мария Дронова

Соцсети:

Олег Вешкурцев

Normalize.css — CSS Reset

Skip to content

Классный своего рода 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 `h2` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h2 {
  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 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
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[title] {
  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,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-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.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1.   Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-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.
   
 */
[hidden] {
  display: none;
}

---

Поделиться или сохранить:

Про normalize.css

Normalize.css — это маленький файл CSS, который обеспечивает кроссбраузерную согласованность в моделировании HTML элементов. Новая и современная замена старого и доброго reset.css.

Normalize.css сейчас работает в формах на Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks и во многих других инструментах и сайтах.

Normalize.css является новой альтернативой старого reset.css. Этот проект стал продуктом 100-часового интенсивного исследования в различиях стилей разных браузеров.

Normalize.css — задачи таковы:

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится — тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

• Не изменять пользовательские настройки браузера и не стирать их.
• Нормализация стилей для большого круга HTML тегов.
• Исправлять ошибки и несовместимости разных браузеров.
• Улучшает юзабилити.
• Обширные комментарии в коде и подробную документацию.

Он использует поддержку огромного количества браузеров (охватывая, конечно и мобильные) и использует свои стили, чтобы нормализовать теги HTML5, включая списки, таблицы, формы, контент и типографику.

Несмотря на то, что он нужен только для нормализации, он еще использует прагматические значения по умолчанию, где они более нужнее.

Normalize или Reset?

Но надо знать и понимать чем отличается normalize.css от reset.css.

Normalize.css не трогает нужные значения, которые установлены по умолчанию.

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

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

Normalize.css поправляет распространенные ошибки.

Он правит распространенные ошибки компьютерных и мобильных браузеров, которые не в состоянии поправить reset.css. Это включает в себя параметры отображения элементов HTML5, исправляя font-size для форматирования текста в SVG IE9, и много ошибок, связанные с формами отправки в разных веб-обозревателях и операционных системах.

Например, вот как normalize.css делает новый тег HTML5 input type=[search] кроссбраузерным и стильным:

/**
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */
input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}
/**
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

Reset.css часто не приносит желаемого результата для браузера. Это очень видно в отношении форм — область, где normalize.css может обеспечить некоторую ощутимую помощь.

Normalize.css не грузит вашу систему отладки.

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

С normalize.css такой проблемы нет, потому что используется несколько селекторов в наборе правил таблиц стилей.

Normalize.css — модульная система.

Проект разбивается на относительно самостоятельные разделы, что делает его легким для вас, чтобы увидеть, какие именно элементы нуждаются в специфических стилей. Кроме того, это дает вам возможность удалить разделы (например, формы) если вы точно знаете, что их никогда не будет на вашем сайте.

У normalize.css есть подробная документация.

Код normalize.css основан на детальном исследовании кроссбраузерности и методического тестирования. Есть подробная документация файла на GitHub Wiki. Это означает, что вы можете выяснить, что каждая строка кода делает, почему она включена, какие различия между браузерами, и более легко запускать свои собственные тесты.

Задача этого проекта — показать людям то, как разные обозреватели отрисовывают элементы по умолчанию, и сделать его проще для них и лучше.

Как пользоваться normalize. css.

Во-первых, установить или загрузить normalize.css из GitHub. Есть 2 основных способа использовать это.

Способ 1: использовать normalize.css как начало для своего собственного проекта CSS, изменяя значения в соответствии с дизайном заказчика.

Способ 2: оставить normalize.css как есть и строить уже непосредственно на нем, чтобы переопределить значения по умолчанию для вашей таблицы стилей при необходимости.

Закрытие комментариев.

Normalize.css очень отличается по своим масштабам и исполнению от reset.css. Это стоит чтобы его использовать и посмотреть, соответствует он вашему подходу к развитию и предпочтению.

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

Юрич:

Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.

Кстати о Normalize.css — Русские Блоги

• Резюме
• Normalize.css vs Reset.css
• Установить, скачать

Резюме

Normalize.css — альтернатива сбросу CSS. После того, как @necolas и @jon neal потратили сотни часов на изучение различий в стилях по умолчанию в разных браузерах, этот проект наконец стал тем, чем он является сейчас.
Мы создали normalize.css для следующих целей:

Защитите полезные стили браузера по умолчанию вместо их полного удаления
Общий стиль: для большинства элементов HTML.
Исправьте собственные ошибки браузера и обеспечьте согласованность каждого браузера.
Оптимизация удобства использования CSS: воспользуйтесь некоторыми советами
Объясните код: используйте комментарии и подробную документацию, чтобы

Normalize.css поддерживает множество браузеров, включая мобильные браузеры, а также обобщает элементы HTML, макет, списки, встроенный контент, формы и таблицы. Хотя в этом проекте есть общие принципы, мы по-прежнему используем более практичные значения по умолчанию, где это необходимо.

Normalize.css — это всего лишь небольшой файл css, но он обеспечивает высокую степень согласованности между браузерами в стиле элемента HTML по умолчанию. По сравнению с традиционным сбросом css, Normalize.css — современная высококачественная альтернатива HTML5. Normalize.css теперь используется в Twitter Bootstrap, HTML5 Boilerplate,GOV.UK, Rdio, CSS Tricks и многие другие фреймворки, инструменты и веб-сайты.

Normalize.css vs Reset.css

Очень важно знать разницу между Normalize.css и традиционным.

1.Normalize.css защищает ценные значения по умолчанию
Reset использует стили по умолчанию почти для всех элементов, чтобы заставить элементы иметь одинаковый визуальный эффект. Напротив, Normalize.css поддерживает множество стилей браузера по умолчанию. Это означает, что вам больше не нужно изменять стиль всех общедоступных типографских элементов. Когда элемент имеет разные значения по умолчанию в разных браузерах, Normalize.css будет стремиться сделать эти стили согласованными и соответствовать современным стандартам.

2.Normalize.css исправляет ошибку браузера
В нем исправлены распространенные ошибки браузеров настольных компьютеров и мобильных устройств. Часто это выходит за рамки того, что может сделать Reset. На этом этапе проблемы, исправляемые Normalize.css, включают настройки отображения элементов HTML5, проблему размера шрифта форматированного текста, переполнение SVG в IE9 и многие формы, связанные с браузерами и операционными системами. ошибка.
Вы можете взглянуть на следующий пример, чтобы увидеть, как Normalize.css гарантирует кроссбраузерность для нового поиска типа ввода в HTML5.

/** *1.Addresses appearance set to searchfield in ss,Chrome *2Addresses box-size set to border-box in ss,Chrome(include -moz to future-proof) */ input[type="search"]{ -weblit-appearance:textfield;/* 1 */ -moz-box-sizing:content-box; -webkit-box-sizing:content-box;/* 2 */ box-sizing:content-box; } /** *Removes inner padding and search candle button in ss,Chrome on OS X */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-candle-button{ -webkit-apprance:none; }

3. Normalize.css не испортит ваши инструменты отладки
Самым неприятным аспектом использования Reset является использование больших цепочек наследования в инструментах отладки браузера. В Normalize.css такой проблемы нет, потому что в наших рекомендациях использование нескольких селекторов очень осторожно, и мы стилизуем элементы только с определенной целью.

4.Normalize.css является модульным
Этот проект разделен на несколько связанных, но независимых частей, что позволяет легко и ясно узнать, для каких элементов установлены определенные значения. Таким образом, это позволяет вам выборочно удалять определенные части, которые вы никогда не будете использовать (например, обобщение форм).

5.Normalize.css имеет подробную документацию

Адрес GitHub:https://github.com/necolas/normalize.css

Код Normalize.css основан на подробном и всестороннем кроссбраузерном исследовании и тестировании. Этот файл имеет подробные описания кода и дополнительные описания в Github Wiki. Это означает, что вы можете точно знать, какую работу выполняет каждая строка кода, зачем вы пишете этот код, различия между браузерами, и вам будет проще реализовать свои собственные тесты.
Цель этого проекта — помочь людям понять, как браузер обрабатывает элементы по умолчанию, а также упростить понимание того, как улучшить отображение в браузере.

6. Как использовать Normalize.css
Сначала установите или загрузите Normalize.css из Github. После импорта Normalize.css не изменяйте код в Normalize.css. Если вам нужно изменить стиль, напишите стиль, чтобы перезаписать его.

Установить, скачать

1、NPM

npm install --save normalize.css

2、CDN

https://yarnpkg.com/en/package/normalize.css

3、Download

https://necolas.github.io/normalize.css/latest/normalize.css

Normalize css что это

Что такое normalize css ?

Все браузеры имеют свой собственный CSS для рендеринга элементов. Обратите внимание, как по-разному выглядит кнопка отправки в операционных системах и приложениях браузера. CSS страницы по умолчанию гарантирует, что каждый файл, независимо от того, насколько он прост, доступен для чтения. Дело в том, что все сss-стили по умолчанию разные, потому что они придерживаются бренда авторской компании. Если вы разрабатываете пользовательский интерфейс, последнее, что вам нужно, — это непоследовательность. Есть два варианта очистки css: Сбросить все стили: буквально сбрасывает каждый элемент HTML в его состояние по умолчанию. Дизайнер строит ВСЕ с нуля. Это дает вам абсолютный контроль, но также требует большей работы. Даже ваши списки или теги заголовков больше не оформлены. Весь документ выглядит как обычный текст с разрывами строк и без полей или отступов. Normalize all styles: если вы не хотите перестраивать каждый элемент с нуля, это промежуточная мера, она позволяет вам иметь относительно согласованный рендеринг элементов во всех браузерах и операционных системах, что делает ваше приложение более красивым и удобным в использовании и читке. Данный метод помогает вам сделать примерно одинаковый вид во всех браузерах(включая мобильные) .Пользовательские css стили также соответствуют. Большую часть времени вы хотите нормализовать. Если у вас действительно продвинутый дизайн, вы сбросите настройки.

About normalize.css

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

• Normalize.css project site
• Normalize.css source on GitHub

Normalize.css is currently used in some form by Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks, and many other frameworks, toolkits, and sites.

Overview

Normalize.css is an alternative to CSS resets. The project is the product of 100’s of hours of extensive research by @necolas and @jon_neal on the differences between default browser styles.

The aims of normalize. css are as follows:

• Preserve useful browser defaults rather than erasing them.
• Normalize styles for a wide range of HTML elements.
• Correct bugs and common browser inconsistencies.
• Improve usability with subtle improvements.
• Explain the code using comments and detailed documentation.

It supports a wide range of browsers (including mobile browsers) and includes CSS that normalizes HTML5 elements, typography, lists, embedded content, forms, and tables.

Despite the project being based on the principle of normalization, it uses pragmatic defaults where they are preferable.

Normalize vs Reset

It’s worth understanding in greater detail how normalize.css differs from traditional CSS resets.

Normalize.css preserves useful defaults

Resets impose a homogenous visual style by flattening the default styles for almost all elements. In contrast, normalize.css retains many useful default browser styles. This means that you don’t have to redeclare styles for all the common typographic elements.

When an element has different default styles in different browsers, normalize.css aims to make those styles consistent and in line with modern standards when possible.

Normalize.css corrects common bugs

It fixes common desktop and mobile browser bugs that are out of scope for resets. This includes display settings for HTML5 elements, correcting font-size for preformatted text, SVG overflow in IE9, and many form-related bugs across browsers and operating systems.

For example, this is how normalize.css makes the new HTML5 search input type cross-browser consistent and stylable:

Resets often fail to bring browsers to a level starting point with regards to how an element is rendered. This is particularly true of forms – an area where normalize.css can provide some significant assistance.

Normalize.

css doesn’t clutter your debugging tools

A common irritation when using resets is the large inheritance chain that is displayed in browser CSS debugging tools.

A common sight in browser debugging tools when using a CSS reset

This is not such an issue with normalize.css because of the targeted styles and the conservative use of multiple selectors in rulesets.

Normalize.css is modular

The project is broken down into relatively independent sections, making it easy for you to see exactly which elements need specific styles. Furthermore, it gives you the potential to remove sections (e.g., the form normalizations) if you know they will never be needed by your website.

Normalize.css has extensive documentation

The normalize.css code is based on detailed cross-browser research and methodical testing. The file is heavily documented inline and further expanded upon in the GitHub Wiki. This means that you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests.

The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements.

How to use normalize.css

First, install or download normalize.css from GitHub. There are then 2 main ways to make use of it.

Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.

Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.

Closing comments

Normalize.css is significantly different in scope and execution to CSS resets. It’s worth trying it out to see if it fits with your development approach and preferences.

The project is developed in the open on GitHub. Anyone can report issues and submit patches. The full history of the project is available for anyone to see, and the context and reasoning for all changes can be found in the commit messages and the issue threads.

Related reading

Translations

Nicolas Gallagher lives and works in San Francisco. He’s on Twitter and shares software using GitHub.

Зачем нужен нормализатор CSS

Когда веб-разработчик создаёт новый сайт, он хочет, чтобы в каждом браузере этот сайт выглядел одинаково. Но у каждого браузера есть свои стандарты отступов, оформления ссылок или форматирования блоков. В результате то, что в «Хроме» выглядит хорошо, в «Сафари» может выглядеть не очень, а в «Мозилле» вообще разрывает.

Для примера возьмём простой код, который нарисует нам на странице несколько стандартных элементов:

• две горизонтальных линии-разделителя,
• поле ввода с текстом внутри,
• кнопку,
• текст со ссылкой.

А после этого посмотрим, как выглядит этот код в разных браузерах.

Почему так происходит

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

• толщина линий обводки,
• радиус скругления,
• размер текста,
• внешние и внутренние отступы у элементов,
• правила оформления ссылок,
• формы и кнопки.

Всё это записано в стандартных стилях браузера. Каждый раз, когда браузер встречает элемент, у которого не задан один из параметров, он берёт его из своей встроенной таблицы стилей. Разные браузеры — разные стили.

При этом браузер справится со своей основной задачей — показать HTML-страницу в понятном для пользователя виде. Но если веб-разработчик хочет, чтобы сайт выглядел идентично в каждом браузере, он должен предусмотреть это заранее и прописать в стилях.

Что такое нормализатор стилей

Чтобы сайт выглядел в каждом браузере почти одинаково, разработчики используют нормализатор стилей — normalize.css. По сути это просто большой CSS-файл, который делает следующее:

• стандартизирует все отступы;
• устанавливает единый размер шрифта;
• приводит к единому внешнему виду все формы, кнопки и элементы на странице;
• устанавливает для всех браузеров единые начальные параметры для форматирования текста, изображений и стандартных элементов.

Для этого нормализатор использует специальные CSS-команды, чтобы каждому браузеру объяснить на его языке, что нужно сделать.

Пример

Код ниже делает две вещи:

1. Устанавливает одинаковую высоту строки во всех браузерах.
2. Предотвращает изменения размера шрифта в iOS при повороте экрана.

-webkit-text-size-adjust — это специальная команда, которая состоит из двух частей:

-webkit, который сообщает, что эта команда относится к браузерам на движке WebKit. Остальные браузеры проигнорируют эту команду, а, например, Safari в iOS поймёт, что это команда для неё.

text-size-adjust — команда, которая говорит браузеру, какой размер шрифта нужно использовать.

Получается, что все браузеры поймут первую команду line-height , потому что она стандартная для всех браузеров, а на вторую -webkit-text-size-adjust среагируют только те браузеры, у которых могут быть проблемы с отображением размера текста (например, Safari).

Как использовать

Подключить нормализатор как обычную CSS-таблицу стилей к своей странице:

Ещё вариант — можно взять нормализатор и использовать его как шаблон или основу для собственной таблицы стилей. Так в одном файле вы получите одинаковое отображение в браузерах и нужные настройки внешнего вида страницы.

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

Но что-то же всё равно отличается даже на этих скриншотах!

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

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

Это единственный нормализатор?

Нет, на самом деле их много. Просто этот самый популярный и проверенный.

Что дальше

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

Нормализовать CSS или Сбросить CSS?!. Архитектура CSS — Часть 1 | by Elad Shechter

Архитектура CSS — Часть 1

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

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

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

Стили пользовательского агента CSS

Когда браузер отображает HTML-страницу, он применяет базовые стили еще до того, как вы написали хотя бы один стиль. Например, HTML-теги с

по

во всех браузерах отличаются от обычного текста: в целом размер их шрифта больше, их вес шрифта жирный ( вес шрифта: полужирный ), и у них есть поля сверху и снизу.

стили по умолчанию в chrome

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

Попытка решить проблему несогласованности браузера породила два подхода: подход «Нормализовать CSS» и подход «Сброс CSS» 9.0010 . Вкратце, мы можем описать Normalize CSS как мягкое решение и Reset CSS как более агрессивное решение . Теперь уточним.

Нормализовать CSS

Нормализовать . css — это небольшой файл CSS , обеспечивающий кросс-браузерную согласованность стилей HTML-элементов по умолчанию.

Это означает, что если мы посмотрим на стандарты W3C стилей, применяемых браузерами, и обнаружим несоответствие в одном из браузеров, то normalize.css стили исправят стиль браузера, в котором есть разница.

Но в некоторых случаях мы не можем исправить неисправные браузеры по стандарту, обычно из-за IE или EDGE. В этих случаях исправления в Normalize будут применять стили IE или EDGE к остальным браузерам.

Вот пример из реальной жизни : Chrome, Safari и Firefox отображают тегов

, которые находятся внутри

/