Selectores CSS especificos para ciertos navegadores

Estos son los selectores CSS específicos para ciertos navegadores más útiles actualmente, estos selectores son de mucha ayuda para cuando necesitas aplicar un estilo a cierto navegador y cierta versión, sobre todo para el Internet Explorer que versión con versión el soporte para CSS cambia, está lleno de «bugs» y no soporta estándares cómo lo hacen los demás navegadores modernos que son Mozilla Firefox y derivados, Opera, Safari, Konqueror, etc.

Hack para Internet Explorer 6 y anterior

* html {}

Hack para Internet Explorer 7 y anterior

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

Hack para Internet Explorer 7 unicamente

*:first-child+html {}

Hack para Internet Explorer 7 y navegadores modernos unicamente

html>body {}

Hack para Navegadores modernos unicamente (no para Internet Explorer 7)

html>/**/body {}

Hack para Opera 9 y anteriores

html:first-child {}

Hack para Safari

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

Para utilizar estos selectores es necesario ponerlos delante del selector original, por ejemplo:

#content-box {
	width: 300px;
	height: 150px;
}
* html #content-box {
	width: 250px;
} /* sobre-escribe el estilo anterior y pone un ancho de 250px en Internet Explorer 6 y anterior */

Cómo nota adicional no todos estos hacks hacen que tu código CSS no valide, pero si lo hacen funcionar cómo tu quieres con los navegadores.

Escríbe un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Un comentario en “Selectores CSS especificos para ciertos navegadores”

  1. carlos, gracias por la recopilación :)
    De todas formas para IE siempre es mejor usar los comentarios condicionales… cuanto más limpio quede el css, mejor, no?