CSS Reset (Коллекция)

Многие, крупные современные браузеры (например, 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>

Поделиться или сохранить:

Добавить комментарий

Ваш адрес email не будет опубликован.