Распечатать статью

Про normalize.css

Normalize.css – маленький CSS файл, обеспечивающий лучшую согласованность браузеров в стандартном оформлении элементов. Это новая, HTML5 совместимая, альтернатива традиционному CSS сбросу.

Normalize.css сейчас используется, в том или ином виде, в  HTML5 Boilerplate, Twitter Bootstrap, GOV.UK Tinker.io, CSS Tricks и еще во многих фреймворках, инструментариях и сайтах.

Краткий обзор

Normalize.css – альтернатива CSS сбросу. Этот проект – продукт сто-часового труда necolos‘а и jon_neal‘а по выявлению различий оформления в разных браузерах.

Цели normalize.css такие:

  • Сохранить полезные браузерные дефолтные стили, вместо их стирания.
  • Нормализовать стили широкого круга HTML5 элементов
  • Пофиксить баги и общие несоответствия браузеров
  • Увеличить юзабилити
  • Объснить код, используя комментарии и детализированную документацию.

 

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

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

Нормализация против Сброса

Стоит понять подробнее чем Normalize.css отличается от традиционного CSS сброса.

Normalize.css сохраняет полезные стили

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

Когда элемент имеет разные стандартные стили в разных браузерах, Normalize.css делает их последовательными и соответствующими современным стандартам, где это представляется возможным.

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

Он фиксит большинствой багов десктопных и мобильных браузеров, которые выходят за рамки сброса. В них входят настройки отбражения HTML5 элментов, корректирование размера шрифта (font-size) для преформатированного текста, переполнение(overflow) SVG в IE9, и много багов, связанных с формами.

К примеру, вот как Normalize.css делает новый поисковой инпут (search) кросс-браузерным и стилизуемым:

 

/*
 * 1. Назначает оформление в Safari 5 и chrome
 * 2. Присваивает значение border-box свойству box-sizing в Safari 5  Crome(Включая -moz- на будущее)
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Уберает внутренние поля и кнопку отменить в Safari 5 и Chrome в (Mac)OS X
 */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

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

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

Людей часто раздражает, когда огромная цепочка наследования сброса загромождает окно средства отладки.

Это не проблема в Normalize.css из-за правильного использования селекторов в наборах правил.

Normalize.css модульный

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

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

Код normalize.css основан на обширных исследованиях и тестировании. Файл хорошо задокументирован построчно(!) и всесторонне в Github Wiki. Это значит, что вы без труда сможете найти что делает каждая строчка кода, какие различия между браузерами, и еще проще проводить собственные тесты.

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

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

Для начала скачайте normalize.css c гитхаба. Далее есть два способа использовать его.

Подход первый: используйте normalize.css в вашем базовом файле для всех проектов. Изменяя код вы сможете легко подстроить его под себя.

Подход второй: подключите normalize.css нетронутым и перезаписывайте свойства в собственном css файле, если необходимо.

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

 

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи