10 hacks con css

Una lista de 10 hacks para CSS, que nos pueden servir alguna vez.
1) Mejorar el escalado y resampleado de las imagenes en Internet Explorer

En IE 7 la propiedad de escalado por el método bicubic está desactivada y debemos activarla por CSS:

1. img {
2. -ms-interpolation-mode: bicubic;
3. }

img {
-ms-interpolation-mode: bicubic;
}

-ms-interpolation-mode sirva para especificar el método de resampleado de imagenes del navegador.
2) Añadir opacidad a Internet Explorer 8

Con IE 8 todavía no sabemos si puede soportar opacity, así que usaremos este hack:

1. element {
2. -ms-filter: “progidXImageTransform.Microsoft.Alpha(Opacity=80)”;
3. }

element {
-ms-filter: “progidXImageTransform.Microsoft.Alpha(Opacity=80)”;
}

3) Internet Explorer solo soporta 32 hojas de estilo

Hay que tenerlo en cuenta, Internet Explorer solo puede soportar 32 hojas de estilo, ya sea mediante <link /> o @import url;, si te pasas, las que añadas no serán procesadas.
4) Cargando en CSS no obstructivo

Podremos especificar una imagen de fondo mientras se están cargando nuestras imágenes, en CSS:
Ver en texto planoCopiar al portapapelesImprimir

1. img {
2. background: white url(’Images/Loading.gif’) no-repeat center;
3. }

img {
background: white url(’Images/Loading.gif’) no-repeat center;
}

5) Distingir entre Google Chrome y Safari con CSS

Pese a que los dos utilizan el motor renderizado Webkit, podremos saber distinguir cúal de los dos navegadores se están utilizando gracias a este hack en CSS:
Ver en texto planoCopiar al portapapelesImprimir

1. /* Google Chrome hack */
2. body:nth-of-type(1) .elementOrClassName {
3. /* properties go here */
4. }
5.
6. /* Safari hack */
7. body:first-of-type .elementOrClassName{
8. /* properties go here */
9. }

/* Google Chrome hack */
body:nth-of-type(1) .elementOrClassName {
/* properties go here */
}

/* Safari hack */
body:first-of-type .elementOrClassName{
/* properties go here */
}

6) Resetear las transperiencias de los hijos de padres transparentes en Internet Explorer

Si no deseamos que los hijos de un contenedor transparente absorban también la transparencia, deberemos utilizar este hack:
Ver en texto planoCopiar al portapapelesImprimir

1. .parent{
2. ...
3. filter: alpha(opacity=30);
4. }
5.
6. .child{
7. ...
8. position: relative;
9. // En caso de tener una opacidad diferente
10. filter: alpha(opacity=50);
11. }

.parent{
...
filter: alpha(opacity=30);
}

.child{
...
position: relative;
// En caso de tener una opacidad diferente
filter: alpha(opacity=50);
}

8 ) Emular border-color: transparent en Internet Explorer 6

En Internet Explorer 6 border-color: transparent no está soportada (En IE 7 sí), pero podremos emularlo por este hack:
Ver en texto planoCopiar al portapapelesImprimir

1. .testDiv {
2. ...
3. border: solid 10px transparent;
4. }
5. // IE Hack
6. *html .testDiv {
7. border-color: pink;
8. filter: chroma(color=pink);
9. }

.testDiv {
...
border: solid 10px transparent;
}
// IE Hack
*html .testDiv {
border-color: pink;
filter: chroma(color=pink);
}

9) Exótico hack CSS para Internet Explorer

Aviso, este código hace que no se valide el CSS, pero algunas veces no queda más remedio que usarlo:
Ver en texto planoCopiar al portapapelesImprimir

1. h1{
2. color: green;
3. .color: red;
4. }

h1{
color: green;
.color: red;
}

10) Marca de agua en CSS

Una marca de agua nos añade un texto encima de una imagen, con este hack podremos hacer algo parecido, pero no solucionaría los problemas de copia de contenido, ya que el texto no lo añade a la imagen