«reset.css» — сброс стандартных стилей

Octane, 17.09.2008

reset.cssТема сброса стандартных стилей, устанавливаемых браузером, поднималась многими веб-разработчиками огромное количество раз. В сети Интернет существует множество готовых решений, начиная от простого * {padding: 0; margin: 0} и заканчивая отдельными таблицами стилей, учитывающими особенности различных браузеров и для разных устройст вывода.

Я считаю, каждый верстальщик должен написать для себя такой файл самостоятельно, ну или хотя бы хорошо разобраться в готовом решении, если он, конечно, не ощущает себя «макетонарезочным аппаратом» или гуру технологии «copy-paste».

Воспользовавшись замечательной системой поиска «Google» Вы сможете найти множество вариантов реализации файла «reset.css». Я хочу показать Вам для примера свой вариант таблицы стилей сброса стандартного оформления, устанавливаемого браузером:

@charset "utf-8";
body, h1, h2, h3, h4, h5, h6 {
font: 14px/18px Verdana, sans-serif;
}
code, kbd, pre, samp, tt, var {
font: 14px/18px Consolas, "Courier New", monospace;
}
body, optgroup {
color: #000;
background: #fff;
}
body, code, dl, dd, form, pre {
margin: 0;
}
a:link {
color: #009;
}
a:link, a:visited, ins {
text-decoration: none;
}
a:visited {
color: #505;
}
a:hover {
text-decoration: underline;
}
a:link img, a:visited img, object, fieldset, abbr, acronym {
border: none;
}
sub, sup {
position: relative;
display: inline-block;
font-size: 11px;
line-height: 11px;
}
sub {
top: 5px;
vertical-align: middle;
}
sup {
top: -2px;
margin-top: -11px;
}
abbr, acronym {
cursor: help;
border-bottom: 1px dotted #999;
}
address, cite, dfn {
font-style: normal;
}
code, pre {
white-space: pre-wrap;
}
img {
vertical-align: bottom;
}
td, th, textarea {
vertical-align: top;
}
input, select, button {
overflow: visible;
vertical-align: middle;
}
legend {
color: #000;
margin: 0 0 -2px;
padding: 0;
}
li {
display: block;
list-style: none;
}
optgroup option {
padding-left: 22px;
}
table {
border-collapse: collapse;
}
caption, th {
text-align: left;
}
td, th {
padding: 0;
}
address, blockquote, h1, h2, h3, h4, h5, h6, fieldset, p, ol, ul {
margin: 0;
padding: 0;
}
th, h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
q {
quotes: "\00ab" "\00bb" "\201e" "\201c";
}
q:after {
content: "\00bb";
}
q:before {
content: "\00ab";
}
q > q:after {
content: "\201c";
}
q > q:before {
content: "\201e";
}

Для IE нужно добавить еще:

legend {
margin-left: -7px;
}

Таблица стилей ориентирована на использование совместно с «XHTML 1.0 Strict».

Некоторые могут возразить и сказать, что это  не «reset.css», а уже какой-то «base.css» — возможно и так, со временем этот файл вырос в размерах и стал включать в себя некоторые стили, которые я обычно описывал в своих проектах.

Объяснять, что для чего написано, думаю, не стоит, до меня это уже сделали не один десяток раз. Поясню только эти выкрутасы с inline-цитами — это для правильного отображения кавычек вложенных inline-цитат в «Safari».

Скачать «reset.css»

Полезно почитать

Избегайте устаревших приёмов в веб-дизайне, а так же не забывайте, что и «Internet Explorer» оказывается тоже обновляется, и уже доступна 8-я версия (правда пока бета 2) для которой тоже нужны костыли специальные средства, чтобы старые сайты корректно отображались.

Подписаться на обновления блога

Вам понравился наш блог, хотите следить за обновлениями? Подпишитесь на RSS рассылку или рассылку по электронной почте. Так же вы можете следить за нами в Twitter.

Категории: CSS | Комментировать

Комментарии (7)

  1. Ney / 18.09.2008 в 10:25

    В среде разработчиков очень популярен reset.css от Эрика Майера. Если вы не знакомы — загляните сюда http://meyerweb.com/eric/tools/css/reset/

  2. Vadim / 18.09.2008 в 11:19

    Наверное вопрос глупый, но все же: Как понимать «14px/18px»?

  3. Ayavryk / 18.09.2008 в 11:26

    >Как понимать “14px/18px”?
    Сокращенная запись font-size:14px; line-height:18px

    Автору.
    Кроме того, что мееровский «ластик» действительно ну очень распространенный, в этом CSS размеры шрифта заданы в пикселях. Что не есть хорошо.

  4. Octane / 18.09.2008 в 12:02

    Ney, знаком, раньше тоже его использовал.

    Vadim, Вы спрашиваете, что это значит? Это значит «font-size/line-height». Если Вы про то, что размер шрифтов указан в px а не в em. Я обычно указываю размер шрифтов в абсолютных единицах. Все актуальные на данный момент браузеры, кроме IE6, могут нормально увеличивать/уменьшать шрифт, заданный в таких единицах. Чтобы пользователи IE6 не чувствовали себя обиженными, да и вообще, чтобы было комфортно читать, стараюсь не делать размер шрифта менее 14px. Мне кажется, что пользователи IE6 практически никогда не используют возможность изменять размер шрифтов на веб-страницах. Если у кого-то проблемы со зрением, они давно уже перешли на «Opera» (из-за полностраничного изменения масштаба) или обновились до IE7, где нет с этим проблем.

  5. Octane / 18.09.2008 в 12:14

    …мееровский „ластик“ действительно ну очень распространенный…

    Да, отличный «reset.css», но мне в нем не нравится наличие устаревших элементов и еще эта гадость:

    /* remember to define focus styles! */
    :focus {
    	outline: 0;
    }
    

    Можно конечно убрать рамку, там где это нужно, но для всего, мне кажется не стоит.

  6. Never Lex / 25.01.2010 в 13:32

    Да, некоторые элементы давно стоит выкинуть.

  7. Alexei / 28.10.2017 в 15:50

    Большое спасибо! Попробовал ваш reset, очень хороший. Свой пока написать не могу, только начал изучать вёрстку.
    Можно пользоваться вашим с указанием источника?

Оставить комментарий

480×60
480×60