Пересмотренный CSS Reset

Прошло почти 4 года с того момента, как Эрик Мэйер написал первую версию обнуления дефолтных значений HTML элементов, известную теперь всем разработчикам, как CSS Reset.

Когда Эрик писал первую версию, он расчитывал на то, что сообщество веб-разработчиков подхватит эту идею, тщательно ее разжует и даст ей логическое продолжение. Но этого не произошло. Произошли кое-какие изменения, но незначительные. Ресет был воспринят как факт.

В связи с набирающим обороты HTML5, появился CSS Reset, заточеный под HTML5, в котором были добавлены новые HTML элементы. По сути, это просто адаптированый ресет Эрика Мэйера.

Эрик решил что 4 года, это достаточное время для пересмотрения и решил начать работу над новым ресетом, который будет соответствовать современным реалиям. Вот первая бета:


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

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, 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,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

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

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

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

Это не окончательная версия ресета и Эрик прямо заявляет о том, что мы конечно можем ее использовать, но он не рекомендует, так как еще вполне вероятны изменения и дополнения. При написании этого ресета, ресет, адаптированый для HTML5 от html5doctor.com, был использован как проверочный.

Изменения, относительно него выглядят так:

  • Удален font из селектора первого правила.
  • Удалено свойство background: transparent.
  • Добавлено font: inherit в первое правило.
  • Добавлены HTML5 элементы в селектор первого правила.
  • Создано отдельное правило для HTML5 элементов, декларирующее для них свойство display: block.
  • Удален комментарий про cellspacing, который уже не очень актуален в наши дни.
  • Добавлен и уточнен комментарий по поводу описания стилей для визуального отображения псевдо-класса :focus.

Повторюсь, это только бета-версия ресета, и еще вполне возможны изменения, так что stay tuned.

Update 11.01.11: Следующая бета-версия не заставила себя долго ждать:

В ней Эрик отказался от обнуления outline при событии :focus, а так же от ins и del.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b2 | 201101
   NOTE: THIS IS A BETA VERSION (see previous line)
   USE WITH CAUTION AND TEST WITH ABANDON */

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Leave a Reply

Your email address will not be published. Required fields are marked *