mini-CSS reset для вёрстки

31 мая 2010 года | Вёрстка

css reset mini

Спецификация 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,
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-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
  outline: 0;
}
body {
  line-height: 1;
  color: black;
  background: white;
}
ol, ul {
  list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: "" "";
}

Или вот от одного из разработчиков yui:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  margin:0;
  padding:0;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset,img {
  border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
  font-style:normal;
  font-weight:normal;
}
ol,ul {
  list-style:none;
}
caption,th {
  text-align:left;
}
h1,h2,h3,h4,h5,h6 {
  font-size:100%;
  font-weight:normal;
}
q:before,q:after {
  content:'';
}
abbr,acronym {
  border:0;
}

Владимир Каррер предложил свой мини вариант, который затрагивает 80% тегов. Но при этом пригодится, намного чаще. Да и снимет нагрузку с браузера, при прорисовке элементов.

А вот и сам мини-ресет:

html, body, div, form, fieldset, legend, label {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  text-align: left;
  vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption {
  font-weight:400;
}

img {
  border: 0;
}

А какими reset-стилями пользуетесь вы?

  • http://medialworld.com sad

    Мне больше понравился второй пример. Хотя чаще всего использую что-то похожее на последний (только что для заголовков не изменяю вес).

  • http://railsware.com сержио из киева

    doctype: xhtml static

    css resset:
    body, html, * { padding: 0; margin: 0; font-size: 1em; outline: none; }
    a img, iframe, fieldset, object { border: none; }
    caption, th { text-align: left; }
    td { vertical-align: top; }
    sub, sup { vertical-align: baseline; }
    ul { list-style-type: none; }
    table { border-collapse: collapse; border-spacing: 0; }
    body { background-color: white; }
    th, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
    cite, em { font-style: normal; }

  • Sergunik

    я вже писав подібне http://www.sergunik.name/?p=158