Cómo hacer CSS3 compatible con Internet Explorer 6, 7 y 8

Quienes se niegan al avance de HTML5 y CSS3 dicen "no es compatible". Pero este es el año 2011 y gracias a los hackers de la web, es 100% posible hacer CSS3 compatible con IE6 y otros navegadores viejos.

CSS3 es genial. En nuestro curso de CSS3 en linea aprendes, con 1 linea de código, a hacer bordes redondeados, sombras en cajas y textos, degradados, reflecciones, animaciones, transiciones, rotaciones, perspectivas, fondos multiples, selectores avanzados, entre muchas otras cosas.

Con CSS3 haces el 20% del código que con CSS2, en la mitad del tiempo. Y matas para siempre el exceso de <div> anidados.

Los detractores de CSS3 no lo usan por "no ser 100% compatible". Es la misma gente que llegó TARDE a XHTML y CSS2 o que siguió usando tablas en la maquetación. Tu tienes la oportunidad de estar en la vanguardia y con este artículo, hacer CSS3 compatible con IE6, IE7 e IE8.

Bordes redondeados, sombras y degradados con CSS3Pie y Fetchak

Las capacidades más famosas de CSS3 son absurdamente fáciles de hacer compatibles gracias a 3 scripts:

• CSS3Pie permite, con un sólo archivo .htc y una linea de código hacer que esto sea compatible con IE6-8. El sitio tiene un simulador que crea el código para ti de inmediato.
  
• Fetchak es lo mismo que CSS3Pie, pero agrega la capacidad de text-shadow y genera un código ligeramente más compatible, aunque su website es más feo.

Eliminar los prefijos tipo "-webkit-" con Prefix-free

Para que los browsers agregaran CSS3 más temprano, lo implementaron con prefijos propietarios para cada motor de render. Por ello a veces ves código en CSS3 escrito así:

Código :

-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;

Con Prefix Free, una pequeña librería de JS que agregas al header y mágicamente, sólo escribes:

Código :

border-radius:10px;

Prefixfree se encarga del resto. Sólo funciona en el server (no en local desde el disco) pero no debería ser un problema para nadie.

Selectivizr

CSS3 tiene pseudo-elementos y pseudo-clases, poderosos selectores que permiten, por ejemplo, hacer grillas tipo cebra (filas impares en gris, pares en blanco) o elegir la primera letra de un parrafo. O el último elemento de una serie de etiquetas, etc.

¿Cómo hacer todo esto compatible al 100% con IE6, 7 y 8? Con una linea de código, insertando Selectivizr.

Colores transparentes

Con CSS3 puedes crear colores con transparencia alpha para fondos. Esto no es posible con IE6, 7 y 8, pero Internet Explorer tiene filtros de DirectX, la librería de dibujo nativa de Windows. Usandola puedes hacer esto gracias a filter y -ms-filter:

Código :

#cajatransparente
{
   background: rgba(98, 135, 167, .4);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');
   -ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');
}

Backgrounds multiples

En CSS3 puedes agregar más de un background a la misma etiqueta. Si por ejemplo quieres agregar comillas fancy a una caja de ancho variable donde pondrás una frase famosa, puedes agregar cada comilla en un div anidado, o agregar todo con un background multiple. Para hacerlo compatible con IE6, 7 y 8, usas filtros DirectX:

Código :

#frasecelebre
{
   background: url(comilla1.png) top left no-repeat,
            url(comilla2.png) top right no-repeat;
}
.frasecelebre-ie678
{
   background: url(comilla2.png) top right no-repeat;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='comilla1.png', sizingMethod='crop'); 
   -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='comilla1.png', sizingMethod='crop')"; 
}

La única desventaja es que al no poder alinearlo, siempre hay que pasar el PNG de tamaño exacto.

Transformación de rotación

CSS3 puede rotar, escalar y sesgar cualquier elemento. Si quieres que la rotación funcione en IE6/7/8 usas, como no, filtros DirectX:

Código :

.cajaalreves
{
   transform: rotate(180deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

El único problema es que para IE solo tienes 4 grados de rotación. Mientras que en CSS3 tienes 360.

Internet Explorer 6 ya no existe

Mencioné durante este artículo a IE6 por formalidad y para acallar al tipico loco que prefiere no aprender algo nuevo antes de avanzar porque "será compatible en 5 años". Sin embargo, vivimos una realidad: Internet Explorer 6 ya no existe. IE6 está por debajo del 2% en el mercado general en español, datos oficiales de Microsoft, del mercado global, no techie. Los usuarios normales.

Sólo en China y Corea del Sur sigue estando por encima del 2% y seguro tu web no tiene tráfico real en esos países. Por debajo del 2%, es más caro hacer tu sitio compatible que el retorno de la inversión que te genera.

No lo hagas, IE6 no existe. Ve y mira tu analytics. Si haces las operaciones matemáticas bien, lo verás. Si dices que "yo sólo veo PCs con XP e IE6 donde vivo" estás equivocado y no entiendes cómo funcionan las estadísticas. Aceptalo. Abandona IE6.

"Mejora progresiva" y "Degradación elegante"

CSS3 mejora la experiencia, pero no se usa para elementos críticos. Si un usuario de IE6 no ve un borde redondeado o un fondo transparente, no pasa nada, todo sigue funcionando. Merece no ver los bordes redondeados. Has que tu diseño mejore progresivamente, pero que funcione de la manera minima viable sin CSS3. Es un mejor compromiso que decir "no lo uso porque 5 años blablabla lol".

No hay razones para no usar CSS3

CSS3 mejora la experiencia del usuario, hace el desarrollo mucho, mucho más veloz y hace los sitios más compactos, rápidos y funcionales. Con una degradación elegante, una mejora progresiva y el uso de todos estos hacks, es 100% posible usar CSS3 desde ya. ¿Tienen más excusas? ¡Son excusas! Aprende con nuestro curso gratis de CSS3 y empieza a usarlo ya.

En video, trucos de CSS3 y el futuro de CSS4

Este video de Mejorando.la Conferencia es la charla de @cvander hablando de este tema, en detalle:




La próxima que alguien te diga que "faltan 3 años para poder usar CSS3", muestrale este artículo. Luego patealo en la cara.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.