en Laboratorio

Reset vs Normalize

He estado usando reset.css y normalize.css durante un tiempo, uno en unos proyectos y otro en otros.

Aquí están mis últimas versiones compactas de Reset y Normalize por si las queréis utilizar en vuestras webs. Puede que no se gane mucho al compactarlo pero a mí me resulta más legible incluso así (os lo aseguro, queda todo más a mano, en una pantallica) o sea que, lo poco que se gane me parece bien.

Suelo incluirlos directamente en mi código css, sin cargarlos con otra llamada a archivo externo desde el html. Quizás no sea bueno para el «mantenimiento» (aunque también me parece más cómodo tener todo el css en un solo archivo) pero sí que me parece bueno para el «rendimiento». Siempre hay que sacrificar algo.

En algún momento me ha parecido que utilizar Reset me ayudaba a no tener que preocuparme de que aparecieran márgenes y espacios extra incómodos pero siempre se suelen perder subíndices y superíndices que me parecen muy importantes. La sensación con Normalize es que puede que algo se te escape (no te deja dormir bien por las noches) pero, sin duda, recarga menos el analizador del navegador y, hoy día, al abrir el famoso inspector/depurador tiene uno la conciencia más tranquila.

Por cierto, una importante disquisición acerca del «se ve feo» para los que anteponen la estética a la funcionalidad: outlinenone.com, o cómo hemos estado haciendo inaccesibles nuestras páginas web a gente que quiere verlas con la excusa de que sean más «chachis».

/********************************/
/***** normalize.css v3.0.0 *****/
/********************************/

html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body {margin: 0;}

/***** HTML5 display definitions *****/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
audio, canvas, progress, video {display: inline-block; vertical-align: baseline;}
audio:not([controls]) {display: none; height: 0;}
[hidden], template {display: none;}

/***** Links *****/
a {background: transparent;}
a:active, a:hover {outline: 0;}

/***** Links *****/
abbr[title] {border-bottom: 1px dotted;}
b, strong {font-weight: bold;}
dfn {font-style: italic;}
h1 {font-size: 2em; margin: 0.67em 0;}
mark {background: #ff0; color: #000;}
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/***** Text-level semantics *****/
img {border: 0;}
svg:not(:root) {overflow: hidden;}

/***** Embedded content *****/
figure {margin: 1em 40px;}
hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}
pre {overflow: auto;}
code, kbd, pre, samp {font-family: monospace, monospace; font-size: 1em;}

/***** Forms *****/
button, input, optgroup, select, textarea {color: inherit; font: inherit; margin: 0;}
button {overflow: visible;}
button, select {text-transform: none;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;}
button[disabled], html input[disabled] {cursor: default;}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
input {line-height: normal;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto;}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
fieldset {border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend {border: 0; padding: 0;}
textarea {overflow: auto;}
optgroup {font-weight: bold;}

/***** Tables *****/
table {border-collapse: collapse; border-spacing: 0;}
td, th {padding: 0;}
/**********************************************************/
/***** reset.css v2.0 (Eric Meyer's original version) *****/
/**********************************************************/

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;}
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;}