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>


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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Есть вопросы?