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.
