miércoles, noviembre 16, 2011

La guía defitiva de hacks css

Años y años de probar uno y otro, fallar y acertar, utilizar javascript para corregir la visualización en los sitios en los diversos navegadores, me llevó a tener una colección de hacks (los cuales no son de mi autoría, sino que los he encontrado en diversos blogs) que hoy quisiera compartir para quienes se encuentran en ese momento, buscando y buscando por donde sea un código que nos haga hacer que el navegador muestre nuestra página tal y como la concebimos.
De entrada debo decir que usarlos todos al mismo tiempo es un error; seguramente nuestra hoja de estilos esta mal y es necesario replantearlo.
Los hacks aquí presentados son para ser usados en caso de REALES emergencias, de ser posible no usarlos ya que, la mayoría no pasan la validación en la W3C.
Pero cuando se dan esos casos en los que no sabemos qué sucedió, esta lista ayudará para salir avante de estas situaciones cuando el tiempo (que seguramente así es en todo momento) es crucial.
No son todos los que existen, pero estos son los que a mi me han funcionado, espero a alguien más le sirvan:

HACKS PARA FORZAR A NAVEGADORES A CUMPLIR LAS REGLAS (ESPECIALMENTE IE)
No todos estas reglas cumplen con los estándares de la W3C, por lo que la validación no pasará en algunos casos. Usarse sólo en caso muy necesario.

#selector: clase, id u objeto al que se requiera aplicar la regla (por ejemplo: #container, .main).
atributo: objeto css al que se haga referencia (margin, padding, float, etc.)
propiedad: propiedad del atributo css al que se haga referencia (left, right, 0px, etc.)

REGLA PARA IE6 Y ANTERIORES:
NOTA: Si los objetos se encuentran flotados (float), es necesario utilizar el atributo "zoom: 1" y "display: inline";

* html #selector { atributo: propiedad;}


Para el :hover, :active y :focus en IE6, es necesario incluir el archivo csshover3.htc, el cual se descarga de la página http://peterned.home.xs4all.nl/csshover.html
Descarga la versión 3 y ponla en tu sitio, y aqui corrige la dirección relativa hacia el archivo.


#selector { behavior: url(csshover3.htc);}

Para las transparencias en IE6, es necesario incluir los archivos iepngfix y blank.gif, los cuales se descargan de la página http://www.twinhelix.com/css/iepngfix/
Descarga los archivos y lee las instrucciones, y aqui corrige la dirección relativa hacia el archivo.

#selector { behavior: url(iepngfix.htc); }

Para los bordes redondeados en IE6, es necesario incluir el archivo border-radious.htc, el cual se descarga de la página http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Descarga la última versión y ponla en tu sitio, y aqui corrige la dirección relativa hacia el archivo.
NOTA: Este hack no funciona en los inputs.

#selector { behavior: url(border-radius.htc); }

REGLA PARA IE7 Y ANTERIORES

*:first-child+html #selector { atributo: propiedad; }

REGLAS PARA IE7 UNICAMENTE:

*+html #selector { tributo: propiedad; }

REGLAS PARA IE8, requiere los asteriscos, las diagonales entre el atributo y los dos puntos, así como la diagonal invertida y el 9 al final:

#selector { atributo /*\**/: propiedad \9; }

REGLAS PARA NAVEGADORES A PARTIR DE IE7 (Chrome, Firefox, Safari, IE8, etc.)

html>body #selector { atributo: propiedad; }

REGLAS PARA NAVEGADORES MODERNOS (Incluye IE8+)

html>**/body #selector { atributo: propiedad; }

REGLAS PARA CHROME: 

body:nth-of-type(1) #selector { atributo: propiedad; }

REGLAS PARA FIREFOX:

@-moz-document url-prefix() {
#selector { atributo: propiedad; }
}

REGLAS PARA SAFARI: 

html[xmlns*=""] body:last-child #selector { atributo: propiedad; }

REGLAS PARA SAFARI 3.0 Y OPERA 9: 

@media screen and (-webkit-min-device-pixel-ratio:0) {
#selector { atributo: propiedad;}
}

UNICAMENTE OPERA 9: 

html:first-child #selector { atributo: propiedad; }

OPERA 11:

@media not screen and (1) {
#selector { atributo: propiedad; }
}