Normalize css

Если вы серьёзно занимаетесь созданием сайтов, то наверняка сталкивались с проблемой отображения вёрстки в разных браузерах. Особенно это касается пресловутого IE (Internet Explorer). Для решения данной проблемы существует два инструмента: reset.css и normalize.css. Эти файлы содержат набор необходимых настроек, которые облегчат задачу обеспечения кросс-браузерности. Но, конечно, полностью все проблемы это не решит. Поговорим непосредственно о Normalize CSS.

Где скачать?

Скачать его можно здесь necolas.github.io/normalize.css/

Как использовать?

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

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

Какие браузеры поддерживаются?

Normalize поддерживается всеми наиболее часто используемыми браузерами. Такими как Chrome, Mozilla, Opera, Safari 6+, IE 8+. Более ранние версии Normalize обеспечивают также поддержку IE 6+. Поддерживается также и мобильными браузерами.

Почему стоит выбрать именно Normalize CSS?

Reset CSS является худшим решением во-первых потому, что он изменяет стандартную структуру HTML и отображает весь вводимый вами текст как после присвоения атрибутам margin, padding и другим нулевого значения. Так, например, вы обнаружите, что текст, окруженный тегами H1, будет отображаться как H6.

В то же время Normalize.css использует стандартную структуру, но исправляет почти все ошибки, существующие в ней. Он исправляет общие недостатки браузеров настольных и мобильных устройств, которые выходят за рамки Reset. Сюда входят и особенности использования средств HTML5, корректировка размера шрифта в форматируемом тексте, выход за рамки SVG в IE9+ и различные проблемы отображения форм в разных как обозревателях, так и ОС.

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

Код Normalize.css создан при помощи всестороннего исследования и методического тестирования кросс-браузерности. Файл хорошо задокументирован и расширен в GitHub Wiki. Это позволяет легко определить назначение каждого элемента кода, почему используется именно он и какие различия между отображением в браузерах, что значительно облегчает вашу собственную разработку.

Normalize.css имеет существенные отличия по своему масштабу и способу исполнения от CSS Reset. Нужно попробовать его, чтобы увидеть, соответствует ли он вашим предпочтениям.

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

Дополнительные подробности и известные проблемы использования Normalize CSS

pre, code, kbd, samp

При использовании font-family: monospace, monospace исправляется наследование и масштабирование шрифта для ранее форматируемого текста. Дублирование monospace является намеренным.


sub, sup

Как правило, использование sub или sup влияет на высоту строки текста (line-box height) во всех браузерах.

svg:not(:root)

Добавление overflow: hidden исправляет SVG для IE9+. Более ранние версии IE не поддерживают SVG, так что мы можем смело использовать :not() и :root селекторы, которые современные браузеры используют в дефолтных таблицах стилей, чтобы применить этот стиль.