Нормалайз 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-команды для фронтендов

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

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

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

<!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Опера

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

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

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

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

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

Что дальше

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

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

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

Редактор:

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

Художник:

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

Корректор:

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

Вёрстка:

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

Соцсети:

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

Нормализовать 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 отображают тегов

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

/