comentarios-condicionales-distintos-navegadores-css

Muchas veces estamos programando para un determinado navegador. Nos quedamos contentos de nuestro trabajo realizado, ya que se visualiza correctamente. Vamos a otro navegador y… ¡Oh dios, qué desastre! Cajas de búsqueda esparcidas por todos los lados, imágenes que se mezclan, todo desorganizado… Esto puede ocurrir porque no tenemos validado los estándares de la página, o porque el navegador en sí nos de la lata aunque los hayamos validado (Ejemplo: IE 6). Por ello podemos usar los comentarios condicionales (Internet Explorer) u otro método parecido para aplicar un trozo de código CSS a un determinado navegador, sin que afecte en los demás.

Ya hemos publicado una guía sobre los comentarios condicionales, unida a una ampliación. Pero esta guía solo vale para Internet Explorer, ahora usaremos otro método para los navegadores restantes:


Modificar estilos según el navegador

Dependiendo de qué navegador, debemos utilizar un hack u otro para que ejecute el código (se incluye Internet Explorer aunque como recordamos, ya publicamos esto en anteriores entradas):

IE 6 y versiones anteriores

 * html {}

IE 7 y versiones anteriores

 *:first-child+html {} * html {}

IE 7

 *:first-child+html {}

IE 7 y varios navegadores modernos

 html>body {}

Todos los navegadores modernos menos IE7

 html>/**/body {}

Opera 9 y versiones anteriores

 html:first-child {}

Safari

 html[xmlns*=""] body:last-child {}

¿Para qué navegador sueles utilizar estos hacks?

Vía | EmilioAESInformática