Как подключить файл normalize в css

Обновлено: 06.07.2024

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

Примеры скриптов сброса CSS стилей

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

Eric Meyer CSS Reset

Скрипт сброса от Eric Meyer, со слов самого автора, намеренно очень общий. Например в нем для элемента body не задан какой-либо цвет фона по-умолчанию. Поэтому он должен быть изменен, отредактирован, расширен и иным образом настроен в соответствии с вашими потребностями. Добавьте нужные цвета для страниц, ссылок и так далее.

Yahoo! (YUI 3) Reset CSS

Сброс стилей CSS YUI 3 смягчает противоречивый стиль HTML-элементов браузерами, так же как и любой другой скрипт сброса CSS, чтобы создать надёжную основу для создания веб-сайтов и веб-приложений.

Сброс стилей normalize.css

Сброс через универсальный селектор * (звездочка)

На первый взгляд это может показаться самым простым и удачным решением, зачем описывать все HTML элементы и присваивать им значения, когда можно использовать селектор *, ведь его действие распространяется на все HTML.

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

Сброс стилей и WordPress

Если вы хотите использовать один из вышеописанный методов сброса CSS стилей для сайта на WordPress, то это можно сделать двумя способами.

Во втором случае код сброса нужно сохранить в отдельный файл, например reset.css, положить рядом с файлом style.css и затем подключить его, добавив нижеследующий код в начало файла style.css:

Если в CSS есть директива @import, то она должна находиться в самом начале таблицы (перед всеми правилами). В противном случае браузер может ее проигнорировать.

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

Каждый браузер имеет по умолчанию некий набор базовых стилей, которые он применяет к странице по умолчанию. И если мы создадим страницу на «голом» html без оформления и стилей, браузер все равно отобразит тег <h1></h1> большим размером и жирным начертанием, <h2></h2> чуть меньшим размером и так далее. Браузер выделит текст в теге <i> курсивом, <u> сделает подчеркнутым, а <b> — жирным.

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

Лет 10 назад эти отличия были прямо кардинальными, и очень бросались в глаза. Сейчас они минимальны, но все же есть.

Кроссбраузерность

Чтобы страница одинаково хорошо отображалась в разных браузерах, необходимо работать над ее кроссбраузерностью. В этом нам помогает тестирование страницы и отладка html/css разметки.

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

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

Reset.css

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

Работает это так, сначала на странице подключаем файл reset.css, и уже после него свой файл со стилями. В итоге мы сначала сбрасываем все стили, и уже потом в style.css задаем оформление html тегам. Таким образом мы достигаем того что все браузеры сбросят свои стили по умолчанию, и вся разметка будет основываться на тех стилях, которые мы зададим в style.css

Недостатки Reset.css

Сбросы CSS отменяют стили браузеров и возвращают множество элементов к их «обесстиленному» состоянию, некоему ровному основанию, на котором можно безопасно строить. Однако затем нужно назначить стили большей части стандартных элементов.

Normalize.css

Normalize.css является альтернативой CSS Reset.

Проект является продуктом сотен часов глубокого исследования различий между изначальными стилями браузера. Это исследование провели Николас Галахер и Джонатан Нил.

· сохранять полезные настройки браузера, а не стирать их;

· нормализовать стили для широкого круга HTML-элементов;

· корректировать ошибки и основные несоответствия браузера;

· совершенствовать юзабилити незаметными улучшениями.

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

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

Нормализовать или сбрасывать?

Стоит понимать более подробно, в чём отличие normalize.css от традиционного reset.css.

Reset.cssнакладывает однородный визуальный стиль, выравнивая стили по умолчанию почти для всех элементов.

В отличие от этого, normalize.css сохраняет многие полезные стили браузеров по умолчанию. Это значит, что не требуется повторно объявлять стили для всех стандартных элементов типографики. Когда элемент имеет различные стили по умолчанию в разных браузерах, normalize.css там, где это возможно, стремится сделать эти стили совместимыми и соответствующими современными стандартам.

Подключение Rest.css или Normalize.css

Разобравшись с Reset и Normalize, и определившись какой из этих способов кроссбраузерности будем использовать, давайте научимся их подключать.

Первый способ:

Просто включите его в <head> до вашей собственной таблицы стилей.

Второй способ:

Использование правила @import в файле с собственными стилями позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. Это правило необходимо использовать в самом начале вашего css файла.

@import url(normalize.css); /* Находимся в начале нашего файла со стилями*/

Обратите внимание, что эта строчка кода прописывается в самом начале нашего CSS файла, а так же в url мы прописываем путь до нашего файла по общим правилам.

Когда веб-разработчик создаёт новый сайт, он хочет, чтобы в каждом браузере этот сайт выглядел одинаково. Но у каждого браузера есть свои стандарты отступов, оформления ссылок или форматирования блоков. В результате то, что в «Хроме» выглядит хорошо, в «Сафари» может выглядеть не очень, а в «Мозилле» вообще разрывает.

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

две горизонтальных линии-разделителя,
поле ввода с текстом внутри,
кнопку,
текст со ссылкой.

А после этого посмотрим, как выглядит этот код в разных браузерах.

Почему так происходит

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

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

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

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

Что такое нормализатор стилей

Чтобы сайт выглядел в каждом браузере почти одинаково, разработчики используют нормализатор стилей — normalize.css. По сути это просто большой CSS-файл, который делает следующее:

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

Для этого нормализатор использует специальные CSS-команды, чтобы каждому браузеру объяснить на его языке, что нужно сделать.

Пример

Код ниже делает две вещи:

Устанавливает одинаковую высоту строки во всех браузерах.
Предотвращает изменения размера шрифта в iOS при повороте экрана.

html <
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
>

-webkit-text-size-adjust — это специальная команда, которая состоит из двух частей:

-webkit, который сообщает, что эта команда относится к браузерам на движке WebKit. Остальные браузеры проигнорируют эту команду, а, например, Safari в iOS поймёт, что это команда для неё.

text-size-adjust — команда, которая говорит браузеру, какой размер шрифта нужно использовать.

Получается, что все браузеры поймут первую команду line-height , потому что она стандартная для всех браузеров, а на вторую -webkit-text-size-adjust среагируют только те браузеры, у которых могут быть проблемы с отображением размера текста (например, Safari).

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

Подключить нормализатор как обычную CSS-таблицу стилей к своей странице:

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

Вот как будут выглядеть наши страницы после подключения нормализатора:

Но что-то же всё равно отличается даже на этих скриншотах!

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

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

Это единственный нормализатор?

Нет, на самом деле их много. Просто этот самый популярный и проверенный.

Что дальше

Кроме нормализаторов есть ещё ресеты — они сбрасывают вообще все настройки в ноль, чтобы можно было установить всё вручную. Когда-нибудь доберёмся и до них.

Небольшой обзор инструмента

Normalize.css является новой альтернативой старого reset.css. Этот проект стал продуктом 100-часового интенсивного исследования в различиях стилей разных браузеров.

Не изменять пользовательские настройки браузера и не стирать их.
Нормализация стилей для большого круга HTML тегов.
Исправлять ошибки и несовместимости разных браузеров.
Улучшает юзабилити.
Обширные комментарии в коде и подробную документацию.

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

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

Normalize или Reset?

Но надо знать и понимать чем отличается normalize.css от reset.css.

Normalize.css не трогает нужные значения, которые установлены по умолчанию.

Reset.css использует свои стили почти для всех элементов и визуально получается все однотипно. И отличается от normalize.css тем, что затирает множество нужных стилей браузера, которые установлены по умолчанию. А это означает одно: вам нужно будет переписать стили для всех распространенных типографических элементов.

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

Например, вот как normalize.css делает новый тег HTML5 input type=[search] кроссбраузерным и стильным:

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

Обычно вот так в браузере отображается инструмент отладки, когда сброс стилей CSS происходит с помощью простого файла reset.css.

С normalize.css такой проблемы нет, потому что используется несколько селекторов в наборе правил таблиц стилей.

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

У normalize.css есть подробная документация.

Код normalize.css основан на детальном исследовании кроссбраузерности и методического тестирования. Есть подробная документация файла на GitHub Wiki. Это означает, что вы можете выяснить, что каждая строка кода делает, почему она включена, какие различия между браузерами, и более легко запускать свои собственные тесты.

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

Во-первых, установить или загрузить normalize.css из GitHub. Есть 2 основных способа использовать это.

Способ 1: использовать normalize.css как начало для своего собственного проекта CSS, изменяя значения в соответствии с дизайном заказчика.

Способ 2: оставить normalize.css как есть и строить уже непосредственно на нем, чтобы переопределить значения по умолчанию для вашей таблицы стилей при необходимости.

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

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

Читайте также: