CSS Hack es un remedio que se utiliza cuando el CSS estándar no es compatible con los efectos de visualización de varios navegadores. Hasta que los fabricantes de navegadores lleguen a un acuerdo sobre cómo analizar CSS, solo podemos usar este método para completar dichas tareas. Es posible que pueda buscar muchos hacks de CSS en Internet, pero es posible que no comprenda todos los que publiqué hoy, porque son hacks de CSS que solo se dirigen a un único navegador.
Para mostrarte que estos trucos de CSS funcionan, creé seis etiquetas P nuevas y le di a cada etiqueta P una identificación única. Esto le mostrará CSS Hack en acción.
| <p id="opera">Soy de Opera 7.2 - 9.5</p> <p id="safari">Yo soy el Safari mágico</p> <p id="firefox">Soy de Firefox</p> <p id="firefox12">Soy un senior de FF Firefox 1 - 2 </p> <p id="ie7">Soy IE7</p> <p id="ie6">Soy un IE 6 roto</p> |
Luego dejo que estas etiquetas P no se muestren de forma predeterminada.
| <tipo de estilo="texto/css"> cuerpo p{pantalla: ninguno;} </estilo> |
Utilice comentarios condicionales de IE CSS para distinguir los navegadores IE
La forma más sencilla de distinguir los navegadores IE es, naturalmente, utilizar sus comentarios condicionales. Microsoft ha creado una poderosa sintaxis que nos permite lograr esta funcionalidad. No quiero presentar los comentarios condicionales de IE en detalle. Creo que puedes buscar decenas de miles de términos de búsqueda en el motor de búsqueda. Aquí solo necesito estos dos:
| <!--[si IE 7]> <tipo de estilo="texto/css"> </estilo> <![endif]--> <!--[si IE 6]> <tipo de estilo="texto/css"> </estilo> <![endif]--> |
Utilice hacks de analizador CSS para distinguir IE
Aunque los comentarios condicionales de IE son muy simples y fáciles de usar, si desea colocar todo el CSS en un archivo, debe utilizar otros métodos. Tenga en cuenta que el IE 7 Hack aquí solo funcionará en IE7, porque IE6 no conoce el > selector en absoluto. Al mismo tiempo, debe tener en cuenta que el selector > tampoco es válido para otros navegadores.
| /* Es decir 7 */ html > cuerpo #ie7 {*mostrar: bloquear;} /* Es decir 6 */ cuerpo #ie6 {_display: bloquear;} |
CSS Hack para diferenciar Firefox
El primero usa body:empty para diferenciar entre Firefox 1 y 2. El segundo truco utiliza una extensión patentada para todos los navegadores Firefox: moz. -moz sólo es válido para Firefox. No tienes que preocuparte por el impacto de otros navegadores al utilizar este Hack.
| /* Firefox 1 - 2 */ cuerpo: vacío # firefox12 {pantalla: bloquear;} /* Firefox */ @-moz-documento prefijo-URL() {#firefox { mostrar: bloquear }} |
CSS Hack diferencia a Safari
El truco de CSS de Safari se parece mucho al truco de Firefox. Utiliza la extensión webkit patentada del navegador Safari y solo es efectivo para el navegador Safari.
| /* Safari */ @pantalla multimedia y (-webkit-min-device-pixel-ratio:0) {#safari { mostrar: bloquear }} |
CSS Hack distingue a Opera
| /* Ópera */ @media todo y (-webkit-min-device-pixel-ratio:10000), no todo y (-webkit-min-device-pixel-ratio:0) {cabeza ~ cuerpo #opera { pantalla: bloque }} |
Luego, únelo todo y se convierte
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="es"> <cabeza> <meta http-equiv="Tipo de contenido" content="text/html; charset=utf-8"> <title>Trucos del navegador CSS</title> <tipo de estilo="texto/css"> cuerpo p { pantalla: ninguna; } /* Ópera */ html:primer hijo #opera { mostrar: bloquear; } /* Es decir 7 */ html > cuerpo #ie7 { *visualización: bloque; } /* Es decir 6 */ cuerpo #ie6 { _display: bloquear; } /* Firefox 1 - 2 */ cuerpo: vacío # firefox12 { mostrar: bloquear; } /* Firefox */ @-moz-documento prefijo-URL() { #firefox { mostrar: bloquear } } /* Safari */ @pantalla multimedia y (-webkit-min-device-pixel-ratio:0) { #safari { mostrar: bloquear } } /* Ópera */ @media todo y (-webkit-min-device-pixel-ratio:10000), no todo y (-webkit-min-device-pixel-ratio:0) { cabeza ~ cuerpo #opera { mostrar: bloquear } } </estilo> </cabeza> <cuerpo> <p id="opera">Soy de Opera 7.2 - 9.5</p> <p id="safari">Yo soy el Safari mágico</p> <p id="firefox">Soy de Firefox</p> <p id="firefox12">Soy un senior de FF Firefox 1 - 2 </p> <p id="ie7">Soy IE7</p> <p id="ie6">Soy un IE 6 roto</p></body> </html> |
Aunque CSS Hack es bueno y convenientemente compatible con varios navegadores, no puede pasar la verificación del W3C, por lo que debes sopesar si es necesario usarlo.