DÍA 6 / 2015

Breve historia de un conflicto inexistente: Normalize vs Reset CSS

Nando Muñoz
Nando Muñoz
08.10.2015

El anhelo de todo diseñador, programador o viejo webmaster desde los tiempos de geocities, ha sido el homogeneizar los estilos de una web para todos los navegadores. Como respuesta a esa problemática surgieron iniciativas como reset y/o normalize.

octuweb_resetcss

¿Cómo funciona un Reset?

Como bien sabrás, los navegadores primero aplican sus estilos por defecto ( enlaces azules y con subrayado, párrafos con márgenes...) y luego todos los demás siguiendo la ordenación en cascada. Este principio lo aprovechamos los maquetadores para poder añadir primero una 'hoja inicializadora css' y justo después un estilo llamémoslo ''customizado”

Estilo por defecto del navegador

»

Estilos del Reset y/o Normalize

»

Estilos creados por ti

Ejemplo de enlace

Ejemplo de enlace

EJEMPLO DE ENLACE

Breve historia de los resets en css

Año 2004, Internet Explorer 6tenía tres años de vida y un cuota de uso casi absoluta. El gran Netscape entraba en estado comatoso después de 10 años compitiendo codo a codo contra el navegador favorito de Microsoft y un Firefox aún no maduro, pero lleno de energía, se hacía con esa pequeña cuota de mercado que el diablo azul le permitía gracias a los “usuarios geeks” Un año antes Steve Jobs se cansó navegadores no propios e instauró un recién nacido Safari como navegador por defecto en su Mac OS X v10.3 basado en Webkit.

Por primera vez en mucho tiempo, la competencia entre navegadores y una presencia más significativa de la W3C en la investigación, discusión, desarrollo e implementación de los estándares, permitía una visualización entre navegadores un poco más coherente respecto al código CSS que creábamos para la web.

Breve cronología sobre los reset css

Así pues, un desarrollador llamado Tantek Çelik crea UndoHTML.css. Podríamos decir que fue el primero en publicar y documentar unas reglas básicas que reiniciaran los estilos por defecto. Su manera de abordar esto fue simple y radical: Eliminar los subrayados en elementos visitados, deshacer los margins y paddings de los principales elementos como párrafos y encabezados entre otros, quitar los marcadores en las listas numeradas y no numeradas, unificar el tamaño de todos los encabezados al mismo tamaño y suprimir bordes en imágenes enlazadas y/o visitadas.

CÓDIGO

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */
/* link underlines tend to make hypertext less readable, because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }
/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }
/* avoid browser default inconsistent heading font-sizes and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
/* remove the inconsistent (among browsers) default ul,ol padding or margin */
/* the default spacing on headings does not match nor align with normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/* nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0 }
/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }
/* de-italicize address */
address { font-style:normal }
/* more varnish stripping as necessary... */

A partir de ese momento se suceden una ingente cantidad de propuestas, mejoras, revisiones y variaciones de ese primer acercamiento al reseteo de estilos. No es motivo de este artículo extenderse en los detalles, pero a los lectores interesados les recomiendo la lectura del monográfico sobre este tema The history of css resets.

Normalize entra en escena

Marzo de 2011, Internet Explorer 9 entra en la escena dispuesto a sustituir a su viejo hermano IE8, sacando pecho ante los envites del sólido Firefox y un adolescente Chrome dispuesto a comerse el mundo y ya de paso toda la RAM de nuestro equipo. La especificaciones de la CSS3 dejan de ser el sueño de unos profesiones apasionados por el diseño web, comenzando a ser ampliamente soportados por los nuevos navegadores.

En este contexto nace Normalize, concretamente en Abril de 2011. Jonathant Neal junto con Nicolas Gallagher publican en github una manera distinta de entender el reset css, con una filosofía centrada en:

  1. Mantener los valores predeterminados que son útiles
  2. Corrige bugs conocidos y por desgracia recurrentes.
  3. No dar dolores de cabeza al usar CSS debugging tools
  4. Estar estructurado de manera modular para poder modificarlo en función de las necesidades de cada proyecto a utilizar
  5. Estar documentado y mantenido por sus creadores.
  6. Ser usado y revisado ampliamente por la comunidad: Twitter, TweetDeck, GitHub, Soundcloud, Rdio, Guardian, Medium, GOV.UK, Bootstrap, HTML5 Boilerplate, YUI 3, Pure, entre otros muchos lo implementan.

La normalización de los estilos predeterminados es en mi opinión, un paso mucho más ambicioso y coherente para solucionar el problema. Requiere de un amplísimo y profundo conocimiento sobre el comportamiento de los navegadores en sus decenas de versiones. Normalize se desmarca de la visión tajante de los orígenes del reset.css y abraza un modo complejo y tedioso, aunque más efectivo.

Entonces qué ¿Normalize o Reset?

Volviendo la vista atrás y ya entrado el año 2015 ¿De verdad queremos utilizar herramientas y paradigmas de hace 10 años? El acto de inicializar los estilos nació como una necesidad casi obligada, en un contexto donde los Estándares CSS eran un acto de fe en un lugar de un realidad. El paso de los años hizo que el problema de la homogeneización de estilos entre navegadores fuera cada vez menos traumático, gracias a la competencia (Chrome, Firefox, Opera, Safari, Edge... ) y su compromiso para con los Estándares propuestos por la W3C.

Los sucesivos Resets, Normalize, YUI y muchos otros, son sólo herramientas puestas a nuestra disposición, sujetas al paso del tiempo. Su uso depende de las circunstancias que les vieron nacer, su correcta evolución y del apoyo de la comunidad de profesionales detrás de cada uno.

Sinceramente, viendo los que siguen vivos (independientemente de como se autodenominen: reseteadores, normalizadores, correctores…) ninguno ofrece grandes diferencias en cuando a su finalidad, todos tienen reglas que suprimiría y otras que añadiría. Aquellos que os enfrentáis día a día a proyectos sabéis que eso de ''casarse con una herramienta'' provoca estancamiento y no se adapta a la realidad del mundo web actual tan dinámico y cambiante.

Si usas un framework CSS no te preocupes por estas decisiones, pues el framework ya eligió por ti cual asimilar como suyo. Y si estás empezando en este mundillo, menos aún, porque tendrás una oportunidad maravillosa para leer porqué viejos 'front-designer' como yo, se preocupan por escribir sobre temas como este ;D

OFERTA ESPECIAL EN MI GITHUB
Mixing SASS gratuito para elegir entre los reset y normalize más populares de 2015

Referencias