Cómo hacer tus estilos CSS compatibles con diferentes Browsers

Cuando se diseña una página o sitio web siempre se necesita darle estilos CSS para que quede agradable a la vista, pero estos estilos no se reflejan igual en todos los browsers. Para realizar esta tarea con éxito, debemos estudiar algo de teoría sobre CSS y seguir unos cuantos consejos de compatibilidad.

Antes que nada y para aquellos que no lo sabían, tienen que saber cada Browser implementa por su cuenta cómo interpretar los estilos CSS. Es por ello que existe el término “compatibilidad CSS” entre browsers.

Una propiedad que usen en una página y no sea reconocida por un determinado browser, simplemente la ignorará y mientras en cierto navegador nuestra página se vea muy bonita, en otros se puede ver descuadrada y poco estética.

Cómo hacer tus estilos CSS compatibles con diferentes Browsers

La respuesta no es una sola, existen muchas cosas que podemos hacer, pero antes debemos conocer a fondo las características de cada browser con respecto a como interpretan los comandos CSS, para ello podemos revisar la siguiente tabla de compatibilidad en inglés donde nos indica qué característica está implementada en cúal browser.

Cada una de ellas es un enlace, si los seguimos encontraremos más información al punto de encontrar detalles sobre propiedades específicas en cada browser.

Para seguir un orden, los pasos aconsejados para hacer que los estilos CSS funcionen por igual en varios browser serían:

1. Revisar y tener a la mano la tabla de compatibilidad CSS
2. Resetear los estilos CSS
3. Programar CSS según el browser
4. Testear la página con estilos en varios navegadores
5. Realizar los cambios necesarios hasta hacer el código compatible

Resetear los estilos CSS

Antes de empezar a crear estilos para nuestra página es indispensable resetear o uniformizar los estilos. Esto se debe a que no sólo interpretan de forma diferente algunas propiedades CSS, sino que diferentes navegadores asignan por defecto diferentes valores iniciales a las propiedades.

Y si no las reseteamos, podremos observar diferencias visuales que se complicarán más cuando queramos corregirlas. Para ello existen muchos códigos definidos, pero les voy a recomendar un reset llamado Toucan CSS, aquí puede ver la demo y el código a descargar comprimido y sin comprimir.

Programar CSS según el browser

Dado que algunas propiedades funcionan bien en algunos browsers y no funcionan igual o no funcionan para nada en otros, quizás queramos, en los que no las reconocen, utilizar un código alternativo para realizar un efecto similar.

Estos códigos sólo serán aplicables cuando la página sea visualizada en los siguientes navegadores.

Internet Explorer

``

Con este podemos especificar la versión:

``

Dentro de las propiedades:

.class {width:200px; /* All browsers */*width:250px; /* IE */_width:300px; /* IE6 */.width:200px; /* IE7 */}

Opera

@media all and (min-width: 0px){ .classname {}}

Safari

html:lang(en)>body .classname {}

Google Chrome

body:nth-of-type(1) p{color: #333333;}

Testear la página con estilos en varios navegadores

Esto se puede hacer a la manera antigua, instalando los diversos navegadores como Explorer, Opera, Firefox y Chrome, pero en algunos casos tendremos problemas al querer probar diferentes versiones de Internet Explorer o al no poder usar Safari en una pc con Windows.

Podemos utilizar algunas herramientas para hacer el testeo más fácil:

• BrowserShots para realizar capturas
• BrowsrCamp para probar Safari
• MultipleIEs para probar versiones antiguas de Explorer hasta el 6.
• Intel only para correr Explorer en una Mac sin instalarse el Windows.

Y pues eso sería lo principal, el resto es probar y corregir hasta obtener los resultados deseados. Esperemos que con el tiempo los browsers se actualicen mejor y todos soporten el CSS por igual, pero hasta entonces tendremos que hacerlo por nuestra cuenta.