Usemos CSS3 y demos compatibilidad con los navegadores viejos

Hoy vemos el tremendo potencial que CSS3, sus nuevas funciones y sus mejoras que hacen que el nivel de las páginas suban grandemente, pero existen problemas de compatibilidad al igual que HTML5 con los navegadores del ayer, (IE 6, 7 Y 8).

Aunque las especificaciones de CSS3 siguen madurando, nuevos módulos siguen empleándose y perfeccionándose, seguimos con el temas de los ajustes y remiendos para hacer que algunas de las características del poderoso CSS3 se vean bien en las versiones de Internet Explorer anteriores a la 9, ya que esta versión ya comienza a apoyar la idea de innovar y mejorar la web.

Bueno por suerte existen varias herramientas que nos pueden ayudar con el poco querido y enemigo de los diseñadores y desarrolladores web el Explorer en sus versiones 6,7 y 8. Hoy te voy a mencionar un poco de esas herramientas que nos pueden ayudar con muchas cosas para dar esa compatibilidad.

1 – CSS3pie.com

css3 pie

Pie CSS3 tiene como objetivo hacer algunos estilos CSS3 compatibles con las versiones 6, 7, 8 y 9 de Internet Explorer.

A través de un archivo con extensión HTC, CSS3pie nos ayuda a la compatibilidad de ciertos elementos o estilos CSS3 tales como: Esquinas redondeadas, bordes de imagen, imágenes de fondo, degradados lineales y sombras de cajas.

¿Cómo funciona CSS3Pie?

Bueno CSS3pie es muy fácil de usar e implementar solamente tenemos que descargar los archivos necesarios en su pagina web, colocar lo descargado y ya descomprimidos en una carpeta en los archivos base de la web, y luego cuando utilizamos algunos de los estilos que no son compatibles con los viejos navegadores hacemos referencia al archivo de extensión HTC O seria PIE.htc, Pero la ruta la agregamos al css con la propiedad behavior, sería algo más o menos así:

Veamos un ejemplo de cómo utilizarlo en un caso real:

Utilizemos la propiedad Sombras (propiedad box-shadow ), lo normal seria esto:

Aquí estamos aplicando una sombra al div caja-sombras con 3px desplazamiento x y, un desenfocado de 5px y un color negro.

y agregando el comportamiento de CSS3pie seria algo asi:

Esto es solo un ejemplo de como podemos utilizar CSS3pie para mas informacion: http://css3pie.com/

2 – CSS3please.com

css3 pleaseOtra herramienta que nos puede ayudar con el CSS3 y la compatibilidad con los navegadores de antaño es CSS3Please que no puede ayudar con (sombras, degradados, transparencias, rotación, transacción y font-face).

Además esta web nos va ayudar a entender mejor el tema de CSS3 Y nos va a permitir utilizar sus propiedades y ver el resultado en tiempo real.
Solamente tenemos que entrar al sitio, ver las características del CSS3 activarlas y desactivarlas y los cambios los podemos notar en el recuadro grande de la derecha y ver sus características y su sintaxis, así vamos a aprender más del CSS3, y a aplicar ciertas caracteristicas que debemos incluirlas para ciertos navegadores.
http://css3please.com/

3 – Selectivizr

Selectivizr

Esta es una herramienta que no nos limitan para utilizar las nuevas propiedades de CSS3 en los navegadores de IE 6, 7 y 8. Lo que hace esta herramienta es emular las pseudo-clases y atributos de CSS3.

Esta herramienta es una Utilidad javascript que emula pseudo clases CSS3 como asi también selectores y atributos en internet explorer 6, 7 y 8. Simplemente incluya el script en sus páginas y el script hará el resto

Para usar Selectivizr debemos tener también alguno de los siguientes frameworks de javascript, jQuery, Prototype, MooTools, entre otros.

Para saber más acerca de el trabajo de esta herramienta que nos puede echar la mano en momentos de angustia al diseñar y maquetar y tratar de dar la compatibilidad con todos los navegadores vamos a su sitio web para mejor referencia. http://selectivizr.com/

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo