Глобальный сброс стилей в CSS – первый шаг на пути к кроссбраузерности. Каким бы он не был, предназначение его одинаково: обеспечить единообразное представление сайта в различных браузерах, независимо от версии и операционной системы.
По большому счету можно выделить два способа определения «ластика»:
-
Простая и лаконичная запись:
- Общий список всех элементов, к которым должны быть применены стилевые правила «по?умолчанию»; независимо от того, присутствуют названные теги в конкретных HTML?документах или нет.
* {margin: 0; padding: 0;}
Универсальный селектор (звездочка) подразумевает все элементы встретившиеся на странице.
Лучшими образцами такого подхода можно считать 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. Поводом для написания поста послужила данная статья.