CSS Hack para Chrome y Safari
[Vía Pinceladas Web]
Era inevitable y posiblemente será necesaria la aparición de un filtro o hack css que nos permita aplicar una determinada regla CSS que solamente entienda el nuevo navegador de Google, Chrome. El que presentamos a continuación también funciona en Safari, dado que ambos usan el motor de Webkit.
El hack se basa en el selector CSS "E:nth-of-type(n) " que selecciona el elemento (E) situado en la posición (n) de nuestro documento. Por ejemplo, div:nth-of-type(3) aplicaría la regla que definamos al tercer div que aparezca en nuestro documento. Con esta explicación espero que entendáis porqué funciona el siguiente filtro:
-
body:nth-of-type(1) div.caja {
-
background: blue;
-
}
En este caso los div con un class "caja" del primer elemento "body" de nuestro documento se verán con fondo azul únicamente en Chrome y Safari.
Si queréis el codigo completo para probar...
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
<title>Chrome CSS Hack Demo</title>
-
<style type="text/css">
-
div.caja {
-
border: 1px solid red;
-
width: 200px;
-
height: 200px;
-
}
-
body:nth-of-type(1) div.caja {
-
background: blue;
-
}
-
</style>
-
</head>
-
<div class="caja">
-
-
</div>
-
</body>
-
</html>
September 5th, 2008 at 7:10 pm
[...] CSS Hack para Google Chrome [...]
September 5th, 2008 at 9:43 pm
puede ver una explicación a http://www.evotech.net/blog/2008/09/css-hack-for-google-chrome-and-safari-31/
September 5th, 2008 at 10:15 pm
No sé si podemos hacerlo con los nuevos temas de chrome...
September 6th, 2008 at 1:31 pm
Joder Pita, hack para chrome?? rápido y conciso...
Gracias por el chivatazo
:-)
September 6th, 2008 at 6:30 pm
Hombre... el hack es para navegadores que utilicen webkit... tb funciona en safari (incluso en el iphone! debería ir)
September 8th, 2008 at 9:13 am
[...] Y por supuesto ya tenemos css-hacks (también via anieto2k). « ¿Una nueva era? [...]
September 12th, 2008 at 11:32 am
Hack... jugamos con fuego.
November 20th, 2008 at 7:12 pm
Los cambios con este hack también se muestran en el Opera 9.62 ='(. Con etse hack arregle mi trabajo en Chrome pero se desacomodo en el Opera =P =(
February 10th, 2010 at 10:34 pm
Util pero impractico ya q si hablamos de actualidad la paginas de hoy dia se autoconstruyen y si keremos imponer un css a un div q se encuentra en una pagina q despues de un repetido numero de operaciones ya ni sabemos q numero tiene dentro del indexado esta se me hace una mala practica yo encontre esto
@media screen and (-webkit-min-device-pixel-ratio:0) {
// aki reglas para safari y chrome
}
aun no se si funciona pero es un buen comienzo
June 10th, 2010 at 12:33 pm
Pues a mi el firefox tambien me hace caso
Pongo esto:
#headerStrip {
background-color:#f9f9f9;
}
body:nth-of-type(1) #headerStrip {
background: blue;
}
Y me sale azul en los dos navegadores firefox y chrome
August 3rd, 2010 at 1:32 pm
No es muy recomendable usar estos hacks, pero hay casos que debemos utilizarlos, por ejemplo, agarrar un sitio ya empezado con 3000 mil lineas de css. Aveces es mas facil agregar los los hacks que estar estudiandose esas lineas.
Si empezas una hoja de estilos de 0 y sabes hacerla bien, no sera necesario usar hacks.
April 8th, 2011 at 7:29 pm
no funciona ...
Firefox tambien lo toma.
saludos
esta es la mejor solucion
@media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass { background-color: #FF0000; }
#myId {color: #0000FF;}
p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
}