Diferencias entre Reset.css y Normalize.css

29/08/2019 | CSS | 1 comentarios

Reduce las inconsistencias de estilos entre navegadores y aprende la diferencia entre Reset.css y Normalize.css


Probablemente te ha pasado que cuando implementas estilos para una web, estas presentan variaciones en diferentes navegadores lo que hace que se vean diferentes.

Por ejemplo un botón tiene los siguientes estilos por defecto:

  • Chrome: padding: 1px 7px 2px;
  • Safari: padding: 2px 6px 3px;
  • Firefox: padding: 0 8px;

Esta es la razón por la que se necesita una técnica para homogeneizar los estilos en todos los navegadores y sobre ellos recién crear nuestros estilos.

Estas técnicas consisten en incluir primero un archivo CSS con las reglas para homogeneizar los estilos y luego los estilos del proyecto.

Reset CSS

La técnica llamada Reset CSS propone reducir las inconsistencias de estilos entre los navegadores eliminando todos los estilos por defecto.

Parte del código de Reset elimina todos los margenes, tamaños de letra y bordes:


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

Con esta técnica es como si tuvieras un lienzo en blanco y debes crear todos los estilos para tu proyecto logrando consistencia entre los navegadores.

Descargar: https://meyerweb.com/eric/tools/css/reset/reset.css

Normalize CSS

La técnica llamada Normalize CSS propone que en lugar de eliminar todos los estilos, se deben mantener los estilos que funcionan bien y sólo homologar los estilos que son inconsistentes.

Parte del código de Normalize para homogeneizar elementos de formulario es:


/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

Normalize está bien documentada e incluye las etiquetas HTML5 y en comparación con Reset no es necesario crear todos los estilos nuevamente, sólo se deben crear los estilos del proyecto.

Descargar: https://github.com/necolas/normalize.css

PostCSS Normalize

La técnica llamada PostCSS Normalize propone utilizar algunas reglas de Normalize pero dependiendo de los navegadores a los cuales se da soporte. Esta lista de navegadores esta expresado en formato Browserslist.

PostCSS Normalize es una herramienta que analiza tu archivo normalize.css, tu configuración de browserlist y según ello elimina las reglas que no se aplican. Está disponible para usar en node, gulp, webpack, etc.

Parte del resultado de Normalize con soporte para ie >= 9 sería:


/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

Mientras que con soporte para ie >= 10 sería:


/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

Este método es mucho más eficientes por que solamente se Normaliza los estilos de acuerdo a los navegadores a los cuales damos soporte.

Descargar: https://github.com/csstools/postcss-normalize

Conclusiones

Siempre es recomendable empezar un proyecto de CSS homologando los estilos en los navegadores y luego recién crear los estilos de nuestro proyecto.

Una opción es eliminar todos los estilos con Reset CSS para crear desde cero nuestros estilos y otra opción es homologar solamente los estilos inconsistentes Normalize CSS y sobre ella crear nuestros estilos.

Referencias

Envíar Comentario

En este sitio los comentarios se publican previa aprobación del equipo de Kodetop. Evita los comentarios ofensivos, obscenos o publicitarios. Si deseas publicar código fuente puedes hacerlo entre las etiquedas <pre></pre>