Что такое CSS Reset?
CSS Reset создан для того, чтобы установить значения свойств элементов в определенное, состояние с которым в дальнейшем было бы удобно работать. По умолчанию элементы имеют свойства, определенные браузером (User Agent), такие как margin, padding, list-style и так далее. Начальные значения CSS-свойств элементов могут отличаться в разных браузерах, поэтому перед версткой желательно привести их к одному виду.
Первый CSS Reset
Первая представленная идея обнулителя CSS была довольно простой. Reset устанавливал значения margin и padding для всех элементов равным нулю.
* { margin:0; padding:0; }Проблема такого метода была в том, что он "обнулял" свойства всех элементов (даже тех, для которых мы этого не хотели, например, для элементов управления в формах) Поэтому CSS Reset стали реализовывать по-другому, явно перечисляя обнулители для всех элементов HTML, делая тем самым его более предсказуемым и продуманным.
Вот пример неплохого CSS Reset'а:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* устанавливаем фокус */
:focus {
outline: 0;
}
/* устанавливаем 'cellspacing="0"' для таблиц*/
table {
border-collapse: collapse;
border-spacing: 0;
}
Стили CSS Reset можно описать в отдельном файле (например, reset.css) или же использовать в основном.
Нужно ли использовать CSS Reset всегда?
Некоторые CSS-еры предпочитают оставлять все как есть. Им нравятся отступы у параграфов и таблиц, вполне устраивают маркеры списков и подчеркнутые ссылки по умолчанию. Нельзя сказать наверняка, что это отличная практика. По крайней мере все всегда зависит от содержимого сайта. Если сайт в большей степени предназначен для отображения текстового контента (например, блог или новостной портал), пренебрежение CSS Reset'ом - вполне оправдано.
Что касается меня самого, то я чувствую себя намного увереннее используя хотя бы минимальный CSS Reset (margin, padding - 0). Процесс верстки кросбраузерных меню, блоков с закругленными углами, форм становится намного легче когда Вы знаете, что все лишние (начальные) свойства не активны и Вы полностью контролируете ситуацию.
Если же сайт "с ног до головы" (с <body> до </body>) наполнен текстовым контентом, я дополнительно прикручиваю CSS стили для типографики. Вот фрагмент кода:
.typography p { margin:0 0 0.8em; }
.typography p img { float:left; margin:1.5em 1.5em 1.5em 0; padding:0; }
.typography p img.right { float:right; margin:1.5em 0 1.5em 1.5em; }
.typography a:focus,
.typography a:hover { color:green; text-decoration:none; }
.typography a { color:#000; text-decoration:underline; }
... и в нужном месте просто использую:
<div class='typography'>
<p><img src='some_img.png' alt='alternate' /> Пример использования типографики.</p>
</div>
В любом случае, решение использования CSS Reset всегда остается только за Вами.
Надеюсь статья вам пригодилась. Свои мнения по поводу обнулителей оставляйте в комментариях.
