Файл Normalize.css и единообразие CSS-стилей в браузерах
26.03.2016 Создание сайта
Mr. Edyan
В закладки

Файл Normalize.css и единообразие CSS-стилей в браузерах

На удобство использования интернет-ресурсов существенно влияет совместимость с различными браузерами. Разработчикам необходимо учитывать самую разную аудиторию и обеспечивать поддержку различных версий браузеров.

Файл Normalize.css

Можно использовать т. н. «сброс CSS-стилей», однако обычно разработчики предпочитают библиотеку нормализации стилей Normalize.css — за её простоту и совместимость со всеми современными веб-браузерами.

Я расскажу об основных особенностях этой библиотеки и сравню её с обычным сбросом CSS-стилей. Библиотека эта несложная, поэтому разобраться с ней можно за пару часов. Но самое главное — научиться правильно и разумно применять с её помощью нормализацию.

Сброс стилей браузера — или нормализация?

Довольно долго я использовал доработанную версию файла сброса CSS-стилей, написанного Эриком Мейером (Eric Meyer). Для большинства проектов этого хватало, причём каких-либо серьёзных проблем не было. Однако после библиотеки Normalize, которая работает совсем иначе, мой взгляд на сброс CSS-стилей изменился. В первую очередь разберёмся, чем отличаются подходы этих библиотек.

Нормализация — это когда мы единообразно «одеваем» все браузеры, а сброс CSS — это как взрывать браузеры термоядерной бомбой.

Библиотека Normalize задаёт стили и форматы заголовков, абзацев и блоков с цитатами, а также других стандартных элементов таким образом, чтобы они одинаково (или почти одинаково) выглядели во всех поддерживаемых браузерах. А сброс CSS полностью «обнуляет» стили: вы начинаете с чистого листа, без каких-либо значений по умолчанию в принципе.

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

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

Я бы сказал, что нормализация лучше, чем сброс стилей: уменьшается объём передаваемых файлов CSS, эффективнее используются настройки браузеров (UA) по умолчанию. Кроме того, разработчик лучше понимает, как должны отображаться элементы.

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

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

Нормализация настроек

Николас Галлахер (Nicolas Gallagher), автор библиотеки Normalize, описывает её так:

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

За годы разработки файл превратился в библиотеку, которой доверяют разработчики по всему миру. В некоторой степени она использовалась даже в проектах Bootstrap и Pure CSS.

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

Если вы требовательны к используемым инструментам и хотите разбираться в них досконально, следует пойти первым путём: исследовать файл Normalize.css, удалить всё ненужное и сделать из него собственную таблицу стилей — это удобно, если для проекта требуется сократить размер файла.

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

Нельзя сказать, что какой-то из этих путей однозначно лучше: следует выбирать то, что подойдёт для конкретного проекта или привычного рабочего процесса.

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

npm install --save normalize.css

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

CodePen

У библиотеки модульная конструкция, поэтому некоторые её части можно временно исключить — и даже сделать собственную сборку. Поэтому для конкретного проекта можно использовать лишь необходимые модули: например, оставить настройки отображения элементов HTML5 и удалить стили для встраиваемого содержимого.

Для каждого правила библиотеки Normalize есть CSS-комментарий, который объясняет, что оно делает и какие проблемы решает. Некоторые правила очевидны — например, установка свойства «display: block» на новых элементах HTML5.

Другие менее очевидны — например, вот код, который скрывает выходящее за границы SVG-объекта в браузере Internet Explorer:

svg:not(:root) { 
  overflow: hidden; 
}

Я настоятельно советую просмотреть таблицу стилей нормализации: вы разберётесь, как именно она работает, и поймёте, подойдёт ли эта библиотека конкретному проекту.

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

Актуальная на момент написания статьи версия 4.0 обеспечивает широкую поддержку браузеров.

  • Chrome
  • Edge
  • Firefox
  • Firefox ESR
  • Internet Explorer 8+
  • Opera
  • Safari 6+

По своему опыту могу также сказать, что библиотека может поддерживать старые версии браузеров с непрерывным обновлением — например, Firefox. Однако официально поддерживаются только две последние версии браузеров Chrome, Edge, Firefox и Opera.

Кроме того, Normalize версии 1 также поддерживает браузеры Internet Explorer, начиная с 6-й версии, и Safari — с 4-й (правда, эта версия библиотеки больше не обновляется).

Обязательно проверяйте версии браузеров — например, с помощью инструмента Google Analytics: это позволит понять, будет ли библиотека Normalize полезна в работе по веб-дизайну.

Комментарии (0)
Добавить комментарий
Прокомментировать
Войти через: