Las librerías para trabajar de manera más ágil con CSS3

Las librerías para trabajar de manera más ágil con CSS3:
Para todos quienes desean empezar a trabajar en CSS3 y aprovechar todos sus recursos fáciles de implementar, su gran limitante a enfrentar es la compatibilidad con los distintos navegadores y sus respectivas versiones, donde vemos que existen funciones que solo ciertos navegadores pueden aprovechar. Como solución a ésto, los programadores han ido desarrollando diferentes herramientas web y frameworks que nos ayudarán a resolver estos problemas y así poder 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 y 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:Se deben subir los archivos correspondientes de este 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: Debe descargar Modernizr y subir los archivos correspondientes a nuestro servidor y enlazarlo de la misma forma que cualquier script dentro de la etiquetade 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 y la segunda como javascript. CSS: Modernizr genera distintas clases en CSS que son asignadas solamente cuando no son soportadas y permiten tener estilo alternativo. 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

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 pagina oficial, descargar los archivos 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 desarrollando pruebas para encontrar la mejor forma de presentar nuevas propiedades para css3 y para eso usan desarrollan etiquetas con prefijos según su motor de renderizado el cual es el encargo de interpretar el XML, HTML entre otros. Entre los principales motores encontramos -webkit y -moz. Entonces debemos agregar distintas lineas de codigo 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.

Para aprender más

En Mejorando.la puedes ver el capitulo dedicado a “HTML5 y CSS3 compatible con todos los navegadores”. También puedes echar un vistazo a presentaciones interesantes sobre CSS3. http://www.youtube.com/watch?v=EzWT1544CY4&feature=g-user-u