Tripix.net » chrome http://www.tripix.net Just another web sobre desarrollo web Wed, 29 Jun 2011 08:24:43 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 CSS Hack para Chrome y Safari http://www.tripix.net/2008/09/05/css-hack-para-chrome-y-safari/ http://www.tripix.net/2008/09/05/css-hack-para-chrome-y-safari/#comments Fri, 05 Sep 2008 10:53:05 +0000 Tripix http://www.tripix.net/2008/09/05/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:

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

PLAIN TEXT
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">
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Chrome CSS Hack Demo</title>
  6. <style type="text/css">
  7. div.caja {
  8.        border: 1px solid red;
  9.         width: 200px;
  10.         height: 200px;
  11. }
  12. body:nth-of-type(1) div.caja {
  13.     background: blue;
  14. }
  15. </style>
  16. </head>
  18.     <div class="caja">
  19.    
  20.     </div>
  21. </body>
  22. </html>

Comparte este post

]]> http://www.tripix.net/2008/09/05/css-hack-para-chrome-y-safari/feed/ 12