Сброс стилей

Сброс стилей

Люди пользуются интернетом с помощью различных браузеров. Каждый браузер, будь то Google Chrome, Mozilla Firefox, Safari, Opera и другие, при разработке своих программ установили базовые стили для всех HTML элементов.

Вы могли заметить, что, когда мы напишем тег р, то в браузере Google Chrome у него появятся верхние и нижние отступы (margin).

reset-css

Взглянем на этот же элемент в Mozilla Firefox.

reset-css

Тут мы тоже видим отступы в 16 пикселей.

Только в первом случае высота элемента 18 пикселей, во втором - 19. Почему? Да просто потому, что разработчики браузеров так написали.

Кто-то считает, что лучше будет так, а кто-то - что нет.

У разработчиков Safari вообще особый подход, и там можно найти много чего непривычного в стандартных стилях.

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

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

Современные подходы к сбросу стилей можно условно разделить на 2 вида

1. Сброс (обнуление) базовых стилей.

   Этот подход успешно реализует решение под названием Reset CSS. Его суть - обнулить отступы и другие свойства, которые разработчики браузеров сделали по умолчанию, для того, чтобы потом заново задать свои. Путем изучения и анализа были выделены основные теги, которые используются для разметки, и им были обнулены отступы (margin, padding), а также добавлено несколько других свойств. Этот подход нравится тем, кто любит "чистый лист" и считает, что лучше лишний раз потом самому дописать что-то, чем следить каждый раз за отступами по умолчанию.

   Код одного из вариантов данного решения можно найти по ссылке.
2. Нормализация базовых стилей.

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

   С данным решением можно ознакомиться по ссылке.

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

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

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

Но есть принципы, которые следует соблюдать независимо от выбранного подхода

1. Хранить код, сбрасывающий стили, в отдельном файле. Называйте этот отдельный файл по смыслу того, что там находится. Если используется подход и код reset.css, так и назовите файл. С normalize.css то же самое.

2. Этот отдельный файл можно корректировать и дописывать. Предположим, вы хотите убрать со всех ссылок подчеркивание по умолчанию. Или хотите отныне для всех элементов использовать значение box-sizing: border-box. Спокойно пишите этот код в своем отдельном файле (reset.css или normalize.css).

3. Подключайте этот файл ДО своих стилей. В начале - сбрасываются стили, а потом на их почве пишутся свои. Так и с подключением.

reset-css

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