en / ru

Обнуление стилей

Не оставляйте браузеру возможности отображать элементы интерфейса так, как этого "хочется" ему - описывайте стили сами!

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

Итак, обнуления.
Проблема заключается в том, что все браузеры имеют те или иные дефолтные значения (значения, используемые по-умолчанию) для отображения HTML-элементов. При этом не для всех браузеров эти значения одинаковы. Например, отступы списков (<ul>) в одних браузерах реализованы с использованием margin, а в других с помощью padding. Также частенько доставляют неудобства различные отступы параграфов (<p>), различие наличия/отсутствия дефолтных границ у некоторых элементов, ну и конечно же совершенно разные стили заголовков (<h1>-<h6>).

Самый простой способ быстро избавиться от проблем с отступами:

* {margin:0; padding:0;}

Однако эта деректива обнуляет отступы сразу всех(!) элементов.
Предпочтительнее же использовать точечный подход к элементам. Такую возможность дает следующая структура:

html, body, h1, h2, h3, h4, h5, h6, p, em, strong, abbr, acronym, blockquote, q, cite, ins, del, dfn, a, div, span, pre, hr, address, br, b, i, sub, sup, big, small, tt, table, tr, td, caption, thead, tbody, tfoot, col, colgroup, form, input, label, textarea, button, fieldset, legend, select, option, optiongroup, ul, ol, li, dl, dt, dd, code, var, kdb, samp, img, object, param, map, area, bdo, iframe {padding:0; margin:0;}

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

Следующим ходом будет точечная отмена границ:

img, fieldset {border:0;}

Мы отдельно обнулили границы у картинок (<img>), т.к. неприятные границы возникают, когда картинка является ссылкой.
У <fieldset> границы могут где-то быть, а где-то не быть по-умолчанию, потому явно определяем и его.

Следующая проблема - различие размеров шрифтов.

Тут для начала неплохо было бы Вам просветиться по вопросу, как лучше указывать размеры шрифтов на странице ( px, em, % ). Что касается конкретно меня, то, после долгого использования em, я пришел к выводу, что предпочтительнее использовать px. Пишем примерно следующее правило:

body {font:12px/1.4 Arial, Verdana, Tahoma, sans-serif;}

Обратите внимание, что значение line-height указано безразмерным. Это не ошибка, так это значение (в нашем случае - 1.4, т.е. 140% от текущего размера шрифта) будет динамически высчитываться в зависимости от заданного размера шрифта в любом блоке. Если бы мы указали единицы измерения, то привязали бы строго line-height к данному правилу.

Если же вы предпочитаете использование em, то для задания единообразия по всем браузерам пишем правило:

body {font:62.5%/1.6 Arial, Verdana, Tahoma, sans-serif;}

Здесь наиболее интересным является число 62.5%. Оно превращает дефолтные шрифты в равные 10px. В дальнейшем можно будет задавать размер шрифта относительно этих 10px, т.е. 1.5em = 15px (т.е. имеется ввиду, что 1em это 100% текущего размера).

Также советую сразу задать базовые размеры для H1-H6 (хотя обычно используются только H1-H3). Примерно так:

h1 {font-size:20px;}
h2 {font-size:15px;}
h3 {font-size:12px;}

Для списков не рекомендую прописывать list-style:none; для всех <li>, т.к. это сильно затруднит использовании обычных списков на страницах. Представьте, человек наполняет страницу через "визивик", делает маркерованный список, а он на странице отображается без маркеров. Неприятно. Вы можете сделать особый класс для таких списков, тогда программистам придется поизвращаться, чтобы он навешивался именно туда, куда надо.
Лучше прописать нормальный вид спискам по умолчанию и отменять маркеры и отступы в тех структурах, где вам это необходимо:

li {margin-left:25px;}

Этого достаточно, чтобы маркеры (нумерованные и ненумерованные) отображались примерно одинаково во всех браузерах.

Можно добавить кое-что и для форм:

input, label, select {vertical-align:middle;}
textarea {vertical-align:top;}

Итого, получаем:

html, body, h1, h2, h3, h4, h5, h6, p, em, strong, abbr, acronym, blockquote, q, cite, ins, del, dfn, a, div, span, pre, hr, address, br, b, i, sub, sup, big, small, tt, table, tr, td, caption, thead, tbody, tfoot, col, colgroup, form, input, label, textarea, button, fieldset, legend, select, option, optiongroup, ul, ol, li, dl, dt, dd, code, var, kdb, samp, img, object, param, map, area, bdo, iframe {padding:0; margin:0;}
img, fieldset {border:0;}
body {font:12px/1.4em Arial, Verdana, Tahoma, sans-serif;}
h1 {font-size:20px;}
h2 {font-size:15px;}
h3 {font-size:12px;}
input, label, select {vertical-align:middle;}
textarea {vertical-align:top;}

Вот и всё. На самом деле, больше ничего и не надо. Остальные дополнения делаются точечно и по необходимости.


Существуют еще и другие дефолтные значения, которые лично я считаю либо излишними, либо достаточно спорными.. Наиболее известным является Reset.css Эрика Мейера.