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.
/**
* 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?
Una duda: con Normalize.css ya no tengo que escribir el código así
#div{
-webkit-border-radius: #px;
}
No, en este caso normalize nos ayuda a borrar algunos estilos que agregan los navegadores, por ejemplo en firefox y chrome los documentos pueden tener diferentes espaciados entre los elementos, con normalize los reseteamos para que tengan el mismo padding en todos los navegadores.
Para los prefijos hay otras herramientas, mañana publicaremos sobre una de ellas, para que estés atento.
Ok ya entendí, espero el próximo post.
Excelente para mejorar y formatear aun mas el archivo de hoja de estilos.
Buen dia, estaba checando lo de este articulo y no me funciona, cambia el tamaño de la ventana prinicipal en cada navegador, alguna sugerencia??
como lo hago para hacer mi diseño web tengo un problema no sale normalize no se como ponerlo en sublime tex 2 como lo hago ayudame porfavor FalconMasters
Hola tengo una duda, es necesario poner el * {} si ya tienes normalize?
No, porque normalize ya hace el trabajo de resetear los estilos del navegador.
Tengo un problema uso boostrap pero como hago para que un div adapte al tamaño del otro. Osea tengo una section y dentro un article y un aside. Mi duda es como hacer que cuando uno de los supero el contenido del otro, el otro se ajuste a la altura he probado varios métodos de internet y ninguno me funciona. Alguien que sepa por fa.
al contenedor ponle heigth :auto !important;