Медная поляна

Глобальный сброс стилей в CSS – первый шаг на пути к кроссбраузерности. Каким бы он не был, предназначение его одинаково: обеспечить единообразное представление сайта в различных браузерах, независимо от версии и операционной системы.

По большому счету можно выделить два способа определения «ластика»:

  1. Простая и лаконичная запись:

  2. * {margin: 0; padding: 0;}

    Универсальный селектор (звездочка) подразумевает все элементы встретившиеся на странице.

  3. Общий список всех элементов, к которым должны быть применены стилевые правила «по?умолчанию»; независимо от того, присутствуют названные теги в конкретных HTML?документах или нет.
  4. Лучшими образцами такого подхода можно считать reset CSS Эрика Мейера и похожее решение от разработчиков «Yahoo».

Каковы же особенности обоих подходов?

Используя универсальный селектор следует помнить о том, что он влияет абсолютно на все элементы на странице. Его «захвату» подвергнутся не только обычные теги (заголовки, параграфы, списки и т. д. ), но и все строчные элементы (<a> , <span> , <em> , <strong> и т. д. ) и элементы управления форм: кнопки <button> , переключатели <input type="checkbox"> , многострочные поля ввода <textarea> , radio?кнопки <input type="radio"> … Словом, какой элемент не выберешь, он обязательно попадет под горячую руку астериска (*). Следует принять к сведению, что применение универсального селектора (и в роли инструмента сброса, и в качестве составной части сложного селектора) может незначительно замедлять рендеринг страниц. В большей степени это актуально для устаревших браузеров.

При использовании общего списка возможна ситуация, при которой придется заново переопределять стили для некоторых тегов. Например, «YUI reset» для упорядоченных списков <ol> придает свойству list?style значение none . Но более вероятен случай, при котором упорядоченные списки на сайте должны быть пронумерованы.

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

Создание специального списка для конкретного макета #

На помощь пришел менеджмент. Ситуационный подход, о необходимости использования которого твердят теоретики управления, на самом деле, применим к очень широкому кругу проблем. Воспользуемся им для решения нашей задачи. Формулировка проста — не включать в общий список теги, которых нет на сайте:

1. Сбрасываем стили для часто используемых элементов:

html, body, div, h1, h2, h3, ul, ol, li, form, fieldset,
input, textarea {
    margin: 0;  
    padding: 0;  
    font-size: 100%;  
}

Придание свойству font?size значения в 100 % исправляет один баг в IE 6 и 7, который выражается в неправильном масштабировании текста, размеры которого установлены в относительных единицах измерения em (материал об этом в «A List Apart»}

2. Сбрасываем стили для неупорядоченных списков

ul {list-style: none;}

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

3. Избавляемся от рамок в рисунках:

img {border: 0;}

Очень часто на сайтах встречаются картинки, являющиеся ссылками. Рамки для них совсем ни к чему.

Итоговый «ластик» выглядит так:

html, body, div, h1, h2, h3, ul, ol, li, form, fieldset,
input, textarea {
    margin: 0;  
    padding: 0;  
    font-size: 100%;  
}
ul {list-style: none;}
img {border: 0;}

Остается поместить данный фрагмент в начало стилевого файла. Теперь, когда при верстке будут встречаться теги, которых нет в данном сбросе (например, списки определений, подзаголовки различных уровней, верхние или нижние индексы, цитаты), просто добавляйте их в список с необходимыми правилами. В конце концов вы получите чистый CSS?сброс, специально «заточенный» под конкретный макет. Как вариант, можно воспользоваться «мейеровским» reset?ом и скорректировать его на финишной прямой, исключив из перечня неиспользуемые элементы.

Плагин для Firefox Dust?Me Selectors станет хорошим подспорьем чтобы обнаружить все теги на одной странице или на сайте в целом.

Приглашаю подискутировать. Какой способ используете вы и почему? Добавляете ли «типографские» правила? Следует ли учитывать устаревшие браузеры (как в примере с указанием font?size)?

P.s. Поводом для написания поста послужила данная статья.

5 комментариев

Марина

Мне нравится все сбрасывать через универсальный селектор, но это, скорее, в силу привычки. Писать кастомный css-reset с перечислением конкретных правил для конкретных элементов все же удобнее и разумнее я думаю.

в некоторых случаях * лучше...

Илья

Я всегда делаю

* {margin: 0; padding: 0;}

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

alexpts

Много где читал, что* для сбрасывания лучше не использовать. Я один раз себе сделал RESET и тоскаю его по всем css файлам

>alexpts

Верить всему, что пишут, нельзя. Надо смотреть по ситуации.