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:

CSS:
  1. body:nth-of-type(1) div.caja {
  2.        background: blue;
  3. }

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...

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Chrome CSS Hack Demo</title>
  5. <style type="text/css">
  6. div.caja {
  7.        border: 1px solid red;
  8.         width: 200px;
  9.         height: 200px;
  10. }
  11. body:nth-of-type(1) div.caja {
  12.     background: blue;
  13. }
  14. </style>
  15. </head>
  16.     <div class="caja">
  17.    
  18.     </div>
  19. </body>
  20. </html>


12 comentarios a esta entrada

[...] CSS Hack para Google Chrome [...]

No sé si podemos hacerlo con los nuevos temas de chrome...

Joder Pita, hack para chrome?? rápido y conciso...
Gracias por el chivatazo
:-)

Hombre... el hack es para navegadores que utilicen webkit... tb funciona en safari (incluso en el iphone! debería ir)

[...] Y por supuesto ya tenemos css-hacks (también via anieto2k). « ¿Una nueva era? [...]

Hack... jugamos con fuego.

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 =(

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

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

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.

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);
}

Leave a Reply