Aprende como hacer que tu sitio web se vea igual en todos los navegadores con un simple fichero css.
¿Alguna vez de has desarrollado una página web, y ésta se ve diferente según el navegador que utilices?
Una posible solución es Normalize.css, alternativa a los conocidos CSS reset.
¿Qué es Normalize.css?
Normalize es un fichero CSS que apenas ocupa 8 KB, cuyo principal objetivo es mantener los estilos similares en los navegadores, ya que cada uno agrega sus propios estilos por defecto, por ejemplo te suelen agregar distintos paddings, margins, font-sizes,etc. Con Normalize CSS lo que hacemos es regularizarlos y que nuestra web se vea igual independientemente del navegador donde se visualice. Además está preparado para adaptarse completamente a HTML5.
Actualmente se encuentra en la versión 3.0.2 y es compatible con los principales navegadores: Chrome, Firefox, Opera, Safari (ver. 6 en adelante) e Internet Explorer (ver. 8 en adelante).
¿Qué hace?
- Al contrario que algunos CSS reset, preserva los valores por defecto de los navegadores.
- Corrige errores e inconsistencias de los navegadores.
- Normaliza estilos para una amplia gama de elementos HTML.
- Incluso mejora la usabilidad con mejoras sutiles.
A continuación se muestra un ejemplo de lo que hace normalize con los “input” de tipo checkbox y radio, en concreto cambia dos propiedades que causan problemas al utilizar internet explorer, el padding y box-sizing.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } |
¿Cómo usarlo en nuestros proyectos?
Para usarlo en nuestros proyectos es muy sencillo, basta con seguir los siguientes pasos:
1) Descargar el fichero desde su página oficial y colocarlo en la carpeta de nuestra web.
Archivo Normalize CSS
2) Al tratarse de una hoja de estilo (.css), debe ser tratado como tal, y por tanto simplemente hay que referenciarlo en el <head> del documento html <link rel="stylesheet" href="normalize.css" />. Muy importante colocar la referencia a este fichero antes que cualquier otro estilo.
3) Listo!, ya tendríamos normalizada nuestra página web, sin configuraciones ni instalaciones. Ya se debería ver igual en todos los navegadores.
Como hemos podido comprobar, Normalize es de tamaño reducido, práctico, y muy útil para todo desarrollador web, aunque siempre es aconsejable probarlo y ver si encaja con tu enfoque de desarrollo y preferencias.
¿Qué te ha parecido Normalize? ¿Lo utilizas o piensas utilizarlo?
