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.

Responder a Ernesto Graf Cancelar la respuesta

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?