Сброс стилей
Сброс стилей
Люди пользуются интернетом с помощью различных браузеров. Каждый браузер, будь то Google Chrome, Mozilla Firefox, Safari, Opera и другие, при разработке своих программ установили базовые стили для всех HTML элементов.
Вы могли заметить, что, когда мы напишем тег р, то в браузере Google Chrome у него появятся верхние и нижние отступы (margin).
Взглянем на этот же элемент в Mozilla Firefox.
Тут мы тоже видим отступы в 16 пикселей.
Только в первом случае высота элемента 18 пикселей, во втором - 19. Почему? Да просто потому, что разработчики браузеров так написали.
Кто-то считает, что лучше будет так, а кто-то - что нет.
У разработчиков Safari вообще особый подход, и там можно найти много чего непривычного в стандартных стилях.
Но задача любого верстальщика - учесть все эти моменты и привести верстку к соответствию дизайну во всех браузерах, которые нужно поддерживать (т.н кроссбраузерность).
Для того, чтобы этот вопрос решить грамотно и централизованно, а не для каждого элемента вспоминать о том, а какое у него будет отображение по умолчанию в различных браузерах, разработчики придумали сброс базовых стилей браузеров.
Современные подходы к сбросу стилей можно условно разделить на 2 вида
Сброс (обнуление) базовых стилей.
Этот подход успешно реализует решение под названием Reset CSS. Его суть - обнулить отступы и другие свойства, которые разработчики браузеров сделали по умолчанию, для того, чтобы потом заново задать свои. Путем изучения и анализа были выделены основные теги, которые используются для разметки, и им были обнулены отступы (margin, padding), а также добавлено несколько других свойств. Этот подход нравится тем, кто любит "чистый лист" и считает, что лучше лишний раз потом самому дописать что-то, чем следить каждый раз за отступами по умолчанию.
Код одного из вариантов данного решения можно найти по ссылке.
Нормализация базовых стилей.
Такой подход предполагает приведение базовых стилей браузеров к единому концепту. То есть не просто взять и сбросить отступы, а привести их к общим цифрам, которые были заданы дизайном проекта. Также создатели
normalize.cssпозаботились о корректном отображении различных элементов во всех браузерах.С данным решением можно ознакомиться по ссылке.
Есть разные мнения насчет того, какой из подходов более предпочтительный.
Кто-то предпочитает все обнулить, а потом заново задать обнуленные свойства, а кто-то считает, что нормализировать предпочтительнее, чем все обнулять.
Все зависит от того, что используется на проекте, а также от потребностей самого проекта и от дизайна.
Но есть принципы, которые следует соблюдать независимо от выбранного подхода
Хранить код, сбрасывающий стили, в отдельном файле. Называйте этот отдельный файл по смыслу того, что там находится. Если используется подход и код
reset.css, так и назовите файл. Сnormalize.cssто же самое.Этот отдельный файл можно корректировать и дописывать. Предположим, вы хотите убрать со всех ссылок подчеркивание по умолчанию. Или хотите отныне для всех элементов использовать значение
box-sizing: border-box. Спокойно пишите этот код в своем отдельном файле (reset.cssилиnormalize.css).Подключайте этот файл ДО своих стилей. В начале - сбрасываются стили, а потом на их почве пишутся свои. Так и с подключением.
Использование одного из подходов - первый шаг на пути к кроссбраузерности. Браузеров много, а дизайн один. Нужно всегда помнить об этом и перепроверять как те или иные элементы выглядят в разных браузерах.
Last updated