Posts Tagged ‘Css hacks’

CSS Hack para Chrome y Safari

Friday, September 5th, 2008

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

Solución al problema de los link en IExplorer usando AlphaImageLoader en fondos con transparencia png

Friday, June 3rd, 2005

Como esta temporada se llevan las transparecias hemos empezado a utilizar el filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() para tener como imagen de fondo de un div un png con transparencia, extensible o no, (próximamente lo describiremos detalladamente). Esto daba un problema muy serio de uso y es que los enlaces, input y demás elementos activos perdían toda actividad, no podíamos, seleccionar, pinchar o escribir.

Nuestro laboratorio I+D Friday I'm in blog ha descubierto una solución que por el momento ha funcionado en nuestras webs

Normas que deben seguir las capas para que no pierdan la actividad los link, input y demás elementos activos contenidos en ellas.

/* Definido el div */

#container_x {
width: 157px;
height: 28px;
padding-top: 8px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/background.png',sizingMethod='fit');
}

/*Con su correspondiente hack para Firefox */

div>#container_x {
background: url(../images/background.png) no-repeat;
}

Se debe cumplir lo siguiente:

  • La capa que tiene el filter no puede tener "position:absolute". Por encima de ella sí se pueden poner divs con posicionamiento absoluto conteniéndola.
  • A la capa filter debe aplicarsele estilo mediante identificador id="", con class="" no funcionaría.
  • Los elementos activos contenidos en la capa filter deben tener definido explícitamente el atributo position a absolute o relativo.

Por ahora esto parece ser necesario y suficiente. Seguiremos informando.

El posicionamiento absoluto es realtivo al contenedor

Saturday, December 18th, 2004

Esta técnica no es para nada compleja y tampoco nada fuera de la lógica de la disposición de elementos con CSS, sin embargo llevaba tiempo necesitando poder hacer esto:

alineación abajo

(more...)

Tabla de css hacks

Friday, December 17th, 2004

Debido a las diferencias de interpretación de las css entre distintos navegadores, en ocasiones es necesario definir un mismo elemento de forma distinta para dos navegadores. Para esto se usan los css hacks; la idea básica es que si queremos que un navegador no lea una regla la escribimos con una sintaxis que el navegador objetivo no sea capaz de interpretar.

en esta web encontramos una tabla que nos permite saber si un navegador va a aplicar una regla en función de cómo la escribamos.