Многие, крупные современные браузеры (например, Opera, Firefox, Internet Explorer) принципиально применяют свои, правила в CSS, которые часто вступают в противоречие со стилями дизайнера. Эти «капризные» браузеры, которые не в состоянии выполнять должным образом различные CSS-правила, вносят беспорядок в страницы, которые выглядят совершенно, например в таких браузерах как: Google Chrome и Safari. Хуже того, некоторые браузеры полностью игнорируют конкретные аспекты CSS вообще, полностью игнорируя широкое признание CSS атрибутов и свойств.
Поэтому для браузеров, в которых реализация CSS непредсказуема, требуется найти реалистичные стратегии исправления. С помощью подобранного определенного набора CSS «перезагрузки» правил, можно переопределить стили браузера по умолчанию и эффективно нейтрализовать его действия, что позволит нам построить наши стили в CSS.
Существует много различных сбросов стилей, например самым первым и базовым был
Минималистичный Reset — это глобальный сброс для отступов и полей всех элементов страницы.
* { padding: 0; margin: 0; }
Минималистичный Reset 2 — это тот же глобальный сброс для отступов и полей всех элементов страницы + сброс рамок и внешние границы.
* { outline: 0; padding: 0; margin: 0; border: 0; }
Значек «*» (универсальный селектор) работает как регулярное выражение, захватывает каждый элемент на своём пути. Будте внимательны с данным сбросом, поскольку потом придется настраивать буквально каждый «id», «class», селектор и т.д.
Старайтесь не использовать все CSS Reset-ы сразу, а ограничиться одним. Хотя, есть такой CSS Reset как «Normalise.css», который может быть использован дополнительно к сбросу стилей.
Не бойтесь модифицировать любой CSS Reset. Подстройте его под себя, заставьте его работать на Ваш проект. Убирайте и добавляйте так, как это нужно в вашем конкретном случае.
Эрик Мейер по этому поводу сказал следующее: «это не тот случай, когда всем следует использовать CSS Reset без изменений».
CSS Reset ВСЕГДА должен идти ПЕРЕД основными стилями, т.е. вначале Вы сбрасываете стили, а потом пишите свои. Также не рекомендуется добавлять код CSS Reset в Ваш основной файл со стилями style.css, а отделять CSS Reset отдельным файлом (обычно это «reset.css»). Так Вы сможете отделять его от других правил на выборочных страницах.
Как пример:
<head> <meta charset="utf-8"> <title>Заголовок</title> <meta name="description" content="Описание"> <!-- CSS Reset --> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!-- Ваши стили --> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>