Ulzurrun de Asanza i Sàez

Tag: HTML 5

Reseteador de estilos CSS para HTML 5

Vía Anieto2k descubro un código CSS que resetea los estilos de HTML 5. Para los que no sepáis para qué sirve esto, cuando se diseña una web se suele comenzar poniendo unos aributos a todos los elementos para evitar que haya diferencias entre navegadores, ya que algunos muestran más separación entre párrafo, fuentes diferentes, tamañanos más grandes, etc.

Con la aparición de HTML 5, muchas etiquetas desaparecen y aparecen otras nuevas, con lo cual los antiguos reseteadores de estilo no nos servirán. Pues bien, éste que tenéis a continuación está totalmente pensado para HTML 5.

[css]/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark – http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:”;
content:none;
}

a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}

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

hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}[/css]