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