Como solución a ésto, los programadores han desarrollando diferentes herramientas web y frameworks que nos ayudan a resolver estos problemas y así aprovechar todas las ventajas de CSS3 de una forma más simple y no tener la excusa de no trabajar con las nuevas tecnologías. Entre las más reconocidas se encuentran las siguientes:

Selectivizr

Selectivizr es un Framework de javascript que funciona de forma automática, nos permite usar y aplicar Pseudo-clases y los atributos de CSS3 a las versiones 6, 7 y 8 de Internet Explorer. Entre las principales características de Selectivizr se destaca que apenas pesa 4kb y se incorpora con unas pocas líneas de código. Además funciona sobre otros reconocidos frameworks de JS como Dojo, Prototype, Mootools y Jquery entre otros.

Modo de uso: Debemos subir los archivos correspondientes del Framework a nuestro servidor y enlazarlo dentro de la etiqueta de nuestra página. Además se debe llamar a alguno de los frameworks nombrados anteriormente para que trabaje sobre él.

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

Modernizr

Modernizr es una librería de código abierto basado en javascript que nos ayuda con la detección del soporte de distintas capacidades de HTML5 Y CC3 del navegador. Es soportado por una gran cantidad de navegadores con sus respectivas versiones como lo son Firefox 3.5+ , Explorer 6+ , Opera 9.6+ , Safari 2+ y Chrome. Esta librería es una de las más importantes ya que consta con el apoyo y es usada por Twitter, Google, Microsoft entre otros.

Modo de uso: Descargar Modernizr, subir los archivos correspondientes a nuestro servidor y enlazarlo de la misma forma que cualquier script dentro de la etiqueta de nuestra página, además se recomienda colocar justo después de mandar a llamar nuestra hoja de estilos.

Para trabajar con Modernizr existen dos formas:

  • La primera sobre el CSS: Modernizr genera distintas clases en CSS que son asignadas solamente cuando no son soportadas y permiten tener estilo alternativo.
  • La segunda como javascript: Tiene distintas funciones en las cuales podemos generar scripts que permiten verificar si el navegador tiene la funcionalidad y este devuelve un “true” o un “false”.
if (Modernizr.video)
document.write("Si soporte video
");
else
document.write("No soporta video
");

Además vale destacar que se puede descargar de 2 formas diferentes una para developer y otra personalizada con solo las funciones que usaremos en nuestra página web.

CSS3 Pie

css3-pie

PIE (Progressive Internet Explorer) es un asistente para las versiones antiguas de Internet Explorer. Se trata de un archivo con extensión .htc que extiende el comportamiento de CSS3 a estas versiones de explorer. Entre las funciones que emula en estas versiones están Border-Radius, Box-Shadow, Linear-gradient entre otras.

Modo de uso: Ingresar su página oficial, descargar y subir los archivos correspondientes a nuestro servidor, luego en los Identificadores y Clases que tienen propiedades de CSS3 agregamos:

behavior: url(carpeta/PIE.htc);

Y automáticamente tendremos nuestras propiedades de CSS3 en explorer 6, 7 y 8. Ej:

.miclase{
border-radius:5px;
behavior: url(carpeta/PIE.htc);
}

CSSprefixer

CSSPrefixeres un excelente sitio web que soluciona uno de los principales detalles de compatibilidad en este nuevo CSS que se encuentra en desarrollo. Todos los navegadores están realizando pruebas para encontrar la mejor forma de presentar nuevas propiedades para css3 y para eso usan etiquetas con prefijos según su motor de renderizado el cual es el encargado de interpretar el XML, HTML, entre otros.

Entre los principales motores encontramos -webkit y -moz. Debemos agregar distintas líneas de código para que realice la misma función y trabaje en los distintos navegadores. Lo que hace CSSPrefixer es escribir la función principal y copiarla en la web, así genera automáticamente todas las funciones propietarias. Que mejor que demostrarlo con un ejemplo:

Cuando queremos realizar una animación tenemos que agregar:

transition: all 1s ease;

y además incluir:

-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;

Entonces la función de esta página es agregar simplemente las Class o ID con la propiedad principal y automáticamente te genera todos los prefijos propietarios para copiar y pegar en el estilo de la página web que estamos desarrollando.

Aprendamos más

En Mejorando.la puedes ver el capítulo dedicado a HTML5 y CSS3 compatible con todos los navegadores. También echa un vistazo a éstas 3 presentaciones interesantes sobre CSS3.