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

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

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

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

   
   * {margin: 0; padding: 0;} 
   
   

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

2. Общий список всех элементов, к которым должны быть применены стилевые правила «по‑умолчанию»; независимо от того, присутствуют названные теги в конкретных HTML‑документах или нет. Лучшими образцами такого подхода можно считать 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. Поводом для написания поста послужила данная статья.