Файл Normalize.css и единообразие CSS-стилей в браузерах
На удобство использования интернет-ресурсов существенно влияет совместимость с различными браузерами. Разработчикам необходимо учитывать самую разную аудиторию и обеспечивать поддержку различных версий браузеров.
Можно использовать т. н. «сброс CSS-стилей», однако обычно разработчики предпочитают библиотеку нормализации стилей Normalize.css — за её простоту и совместимость со всеми современными веб-браузерами.
Я расскажу об основных особенностях этой библиотеки и сравню её с обычным сбросом CSS-стилей. Библиотека эта несложная, поэтому разобраться с ней можно за пару часов. Но самое главное — научиться правильно и разумно применять с её помощью нормализацию.
Сброс стилей браузера — или нормализация?
Довольно долго я использовал доработанную версию файла сброса CSS-стилей, написанного Эриком Мейером (Eric Meyer). Для большинства проектов этого хватало, причём каких-либо серьёзных проблем не было. Однако после библиотеки Normalize, которая работает совсем иначе, мой взгляд на сброс CSS-стилей изменился. В первую очередь разберёмся, чем отличаются подходы этих библиотек.
Библиотека Normalize задаёт стили и форматы заголовков, абзацев и блоков с цитатами, а также других стандартных элементов таким образом, чтобы они одинаково (или почти одинаково) выглядели во всех поддерживаемых браузерах. А сброс CSS полностью «обнуляет» стили: вы начинаете с чистого листа, без каких-либо значений по умолчанию в принципе.
Поэтому в последнем случае заголовки могут выглядеть так же, как абзацы, а у элементов страницы не будет никаких отступов, интервалов и полей, и чтобы «причесать» стиль, придётся писать код самостоятельно. При нормализации же у вас будет заранее подготовленный стиль, на который можно опираться.
Можно ли считать, что какой-то из двух подходов лучше? Это до сих пор горячо обсуждается, однако в пользу нормализации говорит то, что она даёт лучшую совместимость и меньший размер файлов.
Прежде чем влюбляться в Normalize или отдавать предпочтение обычному сбросу стилей, важно по крайней мере разобраться в этих подходах и выбрать более удобный. Сегодня при разработке интерфейса очень немногие начинают писать код с нуля, поэтому без нормализации или сброса стилей практически не обойтись.
Хотите попробовать сброс CSS? Вот несколько популярных библиотек:
Нормализация настроек
Николас Галлахер (Nicolas Gallagher), автор библиотеки Normalize, описывает её так:
За годы разработки файл превратился в библиотеку, которой доверяют разработчики по всему миру. В некоторой степени она использовалась даже в проектах Bootstrap и Pure CSS.
Использовать нормализацию в проекте можно двумя способами: отредактировать исходный код файла нормализации и таким образом настроить собственную таблицу стилей — или использовать библиотеку в качестве основы и надстраивать свои стили.
Если вы требовательны к используемым инструментам и хотите разбираться в них досконально, следует пойти первым путём: исследовать файл Normalize.css, удалить всё ненужное и сделать из него собственную таблицу стилей — это удобно, если для проекта требуется сократить размер файла.
Некоторые разработчики идут вторым путём: включают файл Normalize.css целиком и сверху достраивают свою таблицу стилей. В полной таблице стилей библиотеки содержится более 420 строк кода, что в несжатом виде соответствует примерно 6,8 КБ.
Нельзя сказать, что какой-то из этих путей однозначно лучше: следует выбирать то, что подойдёт для конкретного проекта или привычного рабочего процесса.
Чтобы начать работу с библиотекой Normalize, можно загрузить её из хранилища GitHub или взять с внешнего сервера CDN. Актуальную версию библиотеки можно получить и непосредственно через NPM:
npm install --save normalize.cssЕсли скачивать файлы не хочется, можно просто создать проект в песочнице CodePen и одним нажатием добавить Normalize.
У библиотеки модульная конструкция, поэтому некоторые её части можно временно исключить — и даже сделать собственную сборку. Поэтому для конкретного проекта можно использовать лишь необходимые модули: например, оставить настройки отображения элементов 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 полезна в работе по веб-дизайну.