Использование Normalize.css для однородной разработки

Совместимость браузера - большая часть доступности в сети. Разработчики должны учитывать Дисперсия их аудитории и версии браузера, которые требуют поддержки. Хотя сброс CSS возможен, большинство разработчиков предпочитают Normalize.css за его простоту и взаимную совместимость во всех современных веб-браузерах..

В этом посте я расскажу основы нормализации и ее сравнение с общим сбросом CSS. Это не сложная библиотека, и для ее понимания не требуется более пары часов. Но ключ к нормализации - это обучение как осуществлять это правильно и разумно.

Сброс браузера против нормализации

В течение многих лет я использовал настроенную версию перезагрузки Эрика Мейера. Этого было достаточно для большинства моих проектов и не вызывало серьезных проблем. Однако Normalize изменил мой взгляд на перезагрузки, потому что он работает не так, как сброс CSS. Важно, чтобы вы понимали различия.

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

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

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

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

“Я должен был бы утверждать, что нормализация лучше, чем сброс. Это приведет к уменьшению передачи CSS по проводам, лучшему использованию значений по умолчанию UA и лучшему пониманию того, как элементы означало для отображения.”

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

Если вы хотите попробовать сброс CSS, вот несколько популярных вариантов:

Эрик Майер Сбрасывает
HTML5 Сброс
HTML5Doctor Reset

Normalize Config

Создатель нормализации Николас Галлахер написал вступительное сообщение, ведущее с этим утверждением:

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

С годами эта библиотека превратилась в надежную библиотеку, используемую разработчиками по всему миру. Normalize даже до некоторой степени использовался в Bootstrap и Pure CSS.

Существует два способа использования Normalize в проекте: отредактируйте исходный код, чтобы настроить собственную таблицу стилей Normalize, или используйте ее в качестве основы и добавьте стили сверху.

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

В качестве альтернативы некоторые разработчики включают весь файл Normalize.css и создают свою собственную таблицу стилей поверх этого. Полная таблица стилей Normalize занимает 420+ строк кода, что составляет ~ 6,8 КБ несжатого.

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

Для начала либо загрузите копию Normalize с GitHub, либо разместите ее на внешнем CDN. Вы также можете получить последнюю версию Normalize прямо из NPM, например так:

Установка npm - сохранить normalize.css

Если вы не хотите загружать какие-либо файлы, вы можете даже создать новый проект CodePen, в который можно добавить Normalize одним нажатием кнопки..

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

Каждое правило нормализации имеет соответствующий CSS-комментарий, объясняющий, что оно делает и какие проблемы / ошибки оно решает. Некоторые очевидны, как установка дисплей: блок на новых элементах HTML5.

Другие менее очевидны, как этот код SVG, который скрывает переполнение в Internet Explorer:

svg: not (: root) переполнение: скрыто;

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

Normalize.css в веб-дизайне

Новейшая версия Normalize v4.0 предлагает широкую поддержку браузера.

Хром (последние два)
Край (последние два)
Firefox (последние два)
Firefox ESR
Internet Explorer 8+
Опера (последние два)
Safari 6+

Из того, что я могу сказать, Normalize может поддерживать более старые версии браузеров с постоянными обновлениями, такими как Firefox. Но “официальный” поддержка включает только две самые последние версии Chrome / Edge / FF / Opera.

IE6 + и Safari 4+ также поддерживаются в Normalize v1, но эта версия больше не обновляется..

Очень важно проверять версии браузера с помощью такого инструмента, как Google Analytics. Это даст вам лучшее представление о том, может ли Normalize быть полезным инструментом для современной работы по веб-дизайну..

Дополнительные ресурсы

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

И, честно говоря, не так много объяснений, которые вы не можете найти, читая таблицу стилей и копируя / изменяя код по мере необходимости. Но если вы ищете другую важную информацию, я добавил несколько ссылок ниже.

Статьи по Теме

Николас Галлахер: О Normalize.css
Введение в HTML5 Boilerplate
Normalize.css против Reset.css: какой использовать?

Интро видео

Использование нормализации CSS
Сбрасывает и нормализует Envato
Николас Галлахер - Мышление за масштабируемым CSS