Про normalize.css

Статья читается: 1 мин.

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

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

Небольшой обзор инструмента

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

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

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

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

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

Normalize или Reset?

Про normalize.css

Но надо знать и понимать чем отличается 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.

css-reset-debugging

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

Вам понравилась статья?
плохохорошо (+5 баллов, 1 оценок)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!