CSS Reset Multinavegador

Un problema muy común al momento de realizar las pruebas de nuestro sitio o nuestro diseño web es la inconsistencia del diseño en los distintos navegadores que existen en el mercado, esto puede llegar a frustrarnos si desconocemos las razones del porque ocurren y ¿cómo solucionarlo?.

Estas inconsistencias se deben a que Chrome, Safari, Firefox e Internet Explorer manejan sus propios estilos predeterminados, por ejemplo un botón en IE podría tener márgenes diferentes a los botones en Firefox.

¿Cómo lo soluciono?

Podemos tardarnos varios minutos e incluso horas tratando de igualar nuestro diseño en cada explorador (sin la garantía de que lo logremos), pero el método más rápido y efectivo para solucionar este problema es utilizar una hoja de estilos "Reset" o "Normalizadora" en nuestro documento html. Lo que esta hoja de estilos hace es sobre escribir las propiedades pre determinadas del navegador para tener elementos como: body, iframe, select, button, ul, footer, header y li, entre otros, con estilos homogéneos evitando así que nuestra página se vea diferente en cada navegador.

Estás son algunas de las hojas de estilos "reseteadoras" más utilizadas:

Personalmente prefiero utilizar Normalize, es con la que mejor me he adaptado; es ligera y lista para html5, además es utilizada por frameworks como Boilerplate y Bootstrap.

¿Cómo lo incluyo en mi proyecto?

Podemos agregar la hoja de estilos en el head de nuestro documento antes de todas las hojas de estilo que ya tengas.


<!doctype html>

<head>

<link rel="stylesheet" href="tu-ruta-css/tu-hoja-reseteadora.css">

<link rel="stylesheet" href="tu-ruta-css/tu-hoja-de-estilos.css">

</head>

También pegándola al inicio de tu hoja de estilo (antes de tus propios estilos), está opción es recomendable ya que minimizamos el numero de peticiones al servidor.

¿Conoces otra forma de normalizar el diseño para multiples navegadores?, Compártela con nosotros

Amazon Auto Links: No products found.