Miguel Rodríguez hace desarrollo de software efectivo.

Cosas que deberías hacer para soportar CSS3

La tecnología ha cambiado la vida de todos, especialmente Internet, últimamente, hay disponible una nueva generación de navegadores de Internet con nuevas características que permiten crear aplicaciones ricas de Internet y sitios web impresionantes, proporcionan herramientas para la conectividad, la presentación, el rendimiento y mucho más. Pero hay un problema, las personas que no actualizan sus navegadores, esto hace que el uso de CSS3 difícil, pero ¿significa esto que el uso de CSS3 no es recomendable?, por supuesto que no, hay una par de cosas que puedes hacer para usarlo.
 

Antes de empezar, échale un vistazo en caniuse.com

 
Antes de decir algo, es importante que sepas exactamente lo que vas a hacer, quiero decir con "exactamente" que debe conocer previamente cada estilo, forma, diseño y animación que vas a utilizar en tu diseño, ya que debes verificar cada característica que se va a utilizar, esto es muy importante, no se puede omitir este paso, si dependes demasiado en una característica que está disponible sólo para unos pocos navegadores, tendrá un gran problema, ya que no habrá forma que puedas soportar a los otros navegadores.
Recomiendo comprobar todas las características que se va a utilizar en caniuse.com, este es un sitio web con una descripción detallada de cada características de CSS3 con su respectiva tabla de soporte, también hay sitios web como html5please.com que muestra una descripción para un montón de características de CSS3, en ocasiones con sus consejos.
 

Usa Modernizr

 
Una manera de soportar a los navegadores que no pueden manejar algunas de las características de CSS3 es establecer un fallback, simplemente si la característica dada no está disponible utilizas otra característica en su lugar, no es necesario utilizar una biblioteca especial para establecer un fallback en la mayoría de los casos, pero si quieres dar un mejor soporte será necesario que utilice Modernizr.
Modernizr es una librería javascript que revisará todas las características de CSS3 disponible, proporciona métodos de javascript y clases CSS para dar una forma de aplicar acciones dependiendo de las características disponibles, se basa en yepnope, y es bastante útil, y yo diría, necesario, también diría que si usted está dispuesto a usar CSS3 entonces usted tendrá que utilizar Modernizr, se carga en el inicio y no va a interferir con cualquier otra cosa, incluso el rendimiento, cuando se utiliza Modernizr el elemento HTML ( <html>) tendrá un par de clases CSS con las características admitidas y no admitidas, lo que te permite definir el código CSS3 por caso, así:
  1. .cssanimations.csstransforms3d #element{
  2. /*code here*/
  3. }
  4.  
  5. .no-animations.csstransitions.csstransforms #element{
  6. /*code here*/
  7. }
Por ejemplo, este código comprobará si animaciones CSS3 y transformaciones 3D están disponibles, si no comprobará si transiciones CSS3 y transformaciones 2D están disponibles, tal vez pueda surgir situaciones que debes establecer este tipo de validaciones, si algo no está disponible utilizarás algo que se vea casi lo mismo, como puedes ver, usar Modernizr es bastante simple, te liberará de hacer todas las detecciones por ti mismo.
 

Usa polyfills

 
Un polyfill es una solución alternativa para una característica con el fin de soportar a los navegadores más antiguos, hay un montón de polyfills disponibles para cualquier propósito, hay un montón de ellos para IE (por supuesto, este es el navegador que da más problemas), y la mayoría de ellos trabajan con componentes HTML (sólo funciona con IE), que le proporcionará un archivo de HTC que debe cargar en una propiedad CSS llamado "behavior", algo como esto:
  1. #element{
  2. /*CSS3 unsupported code here*/
  3. behavior:url(/file.htc);
  4. }
Este archivo debe ser utilizado en la parte inferior de cada bloque de CSS con características no compatibles (es posible que desee utilizar Modernizr aquí), una vez cargado, el código CSS3 funcionará como de costumbre. Estos archivos HTC deben ser accesibles cada vez que se utilicen, hacer que el archivo esté disponible directamente a través del servidor es la mejor opción, puede configurar un alias en el servidor si se está trabajando con Apache.
  1. Alias "/file.htc" "/path2file/file.htc"
Tienes que hacer esto para cada polyfill que necesite cargar un archivo HTC. En algunos casos, es posible que existan extensiones, módulos o similares, que ofrece una forma de cargar estos archivos HTC sin hacer esto (he visto estos módulos en Drupal antes), la instalación de estos módulos no es nada recomendable, sólo agregará código para nada, vamos a ver algunos polyfills que podrían ayudar a soportar CSS3 para IE.
 

CSS3PIE

Este es uno de los polyfills más útiles que he visto nunca, soporta una gran cantidad de características de CSS3 para exploradores más antiguos, es compatible con box-shadow, border-image, border-radius y colores rgba, características que son ampliamente utilizadas en Internet. La forma de instalar y usar, es lo mismo que arriba, darán un archivo HTC, lo cargarás en el código CSS, y trabaja como de costumbre.
 

Boxsizing

Si vas a usar border-image entonces sugiero fuertemente usar Boxsizing, este polyfills soportará box-sizing a navegadores antiguos, hay situaciones en las que utilizas un borde (ya sea fino o grueso), el contenedor de la información podrá medir más de lo que se esperaba, que podría verse mal o incluso puede romper el esquema (por ejemplo: si hay divs flotantes con un ancho fijo percentil uno al lado del otro, como si se tratase de una fila, y uno de ellos tiene un borde, puede hacer que uno de los otros contenedores caer a la otra fila), este polyfill proporciona un archivo de HTC que se debe utilizar en tu código CSS (como he dicho antes).
 

Ser consciente de características de CSS3 difíciles de soportar

 
Desafortunadamente, hay algunas características que son muy difíciles de soportar para navegadores antiguos, algunos otros tienen un rendimiento dudoso (no estoy diciendo malo, solamente dudoso) y deberías estar consciente de esto antes de intentar usar una de estas características.
 

Border-image con esquema 'repetir'

Tristemente, no hay polyfills que puedan soportar esta característica, solamente soportan border-image con esquema 'estirar', también fui víctima de esto, pero si alguna vez necesitas soportar esta característica para navegadores antiguos, tienes que reemplazar los bordes con divs y reestructurar el HTML de una manera que los divs se vean como el borde que estas buscando.
Warn style
Atribución: 
Esta imagen esta mostrando uno de los estilos que he definido en el código CSS de este sitio web, este estilo esta simplemente no soportado para Internet Explorer, no hay polyfills disponibles para resolver este problema tampoco fallback  que pueda ser aplicado. En este caso, la única solución que pude encontrar para este problema es no usar este estilo y reestructurar el HTML en las secciones que tenía que aplicar este estilo, por ejemplo, tenía que aplicar este estilo en las secciones resaltadas (la sección con la puerta abriéndose), la solución fue poner dos divs que se vieran como los bordes que quería poner, así.
Border-image con esquema &#039;repetir&#039; (Workaround, CSS3)
Solución alternativa para soportar border-image con esquema 'repetir' en IE.
Atribución: 
Pueden existir otros casos en que aplicar este estilo es imposible, a menos que no quieras soportar navegadores antiguos, esto es algo que deberías estar consciente antes de hacer algo con CSS3.
 

Box-shadow

Hay polyfills soportando esta característica, pero no está soportado por completo, el rendimiento no es (obviamente) el mismo que los navegadores que soportan CSS3 nativamente, además, hay un par de cosas que ningún polyfill puede hacer.
  • Sombra interior: no hay polyfills soportando esta característica (por ahora), sombras interiores pueden ser muy útiles, especialmente si cambias el color de la sombra, esto es usado para hacer botones que se vean bien y muchas otras cosas. Hay cosas que puedes hacer dependiendo de la situación, puedes establecer un fallback al box-shadow, o puedes reemplazar la sombra entera con algo similar, de todos modos, la solución es reemplazar toda la sombra, por ejemplo, cada botón de esta plantilla ha sido hecho con una sombra interior superior clara y una sombra interior inferior oscura, si el navegador no soporta sombras interiores, reemplazara las sombras con un borde claro superior (con un color similar al color del botón) y un borde oscuro inferior.
Buttons (Shadows, CSS3)
Atribución: 
Usar un borde para reemplazar esas sombras es una idea bastante simple que funciona, todavía es un botón que se ve bien sin tener que hacer algo en especial, pero hay otros casos que la mejor solución es no usar sombras interiores.
Solución alternativa a sombras interiores (CSS3)
Solución alternativa para soportar sombras interiores en IE.
Atribución: 
Si tienes que colocar una sombra interna a un contenedor la mejor solución es poner objetos en el contenedor así sus sombras harán que el contenedor se vea como si tuviese sombras internas, no hay otra vía (o por lo menos no pude encontrar otra alternativa), aunque no es tan simple, no se ve mal, podríamos decir que se ve bien y resolvimos el problema de todos modos, pero podría empeorar dependiendo en lo que vayas a hacer, se consciente que soportar box-shadow no es simple, recomiendo que sepas exactamente que hacer y verificar si puedes realmente hacerlo.
  • Comportamiento inesperado: las sombras pueden no tener la misma transparencia que los navegadores nativos (de hecho, es opaca), la sombra es mas como un objeto, por lo tanto, la sombra no tiene una apariencia natural, dependiendo en la posición del elemento que genera la sombra, la sombra puede superponerse a otro elemento haciéndolo inclickeable, deberías estar consciente que pudiera no tener el mismo rendimiento y estabilidad que los navegadores nativos (estoy culpando a internet explorer, no a los polyfills).
 

Problemas de rendimiento de Animaciones/Transiciones CSS3

HTML5 y CSS3 están siendo desarrollados y mejorados día a día, pero, el soporte y rendimiento por cada navegador no es el mismo, eso incluye animaciones y transiciones CSS3, un sitio web bien soportado se supone que usa cada característica en cada navegador con un rendimiento similar el uno al otro, hay algunas cosas que no deberías hacer al animar con CSS3.
  • Animar elementos grandes: Animar elementos pequeños no es la gran cosa, pero pudieran haber algunos navegadores que su rendimiento de animación pudiera empeorar al animar elementos más grandes, quizás dividir la animación en piezas pequeñas o animar elementos más pequeños pudiera ser una mejor idea, hay algunas iniciativas intentando implementar mejores métodos para animar como RequestAnimationFrame, pero esas tecnologías están todavía inmaduras, otra vía para resolver el problema de rendimiento es usar una alternativa como canvas o svg, aunque pudieras tener el mismo problema si estas intentando animar elementos más grandes, el rendimiento pudiera ponerse incluso peor si la animación implica la modificación de múltiples propiedades de ese elemento siendo animado, el rendimiento pudiera ponerse tan mal que el resultado pudiera ser catastrófico, como mencione antes, deberías pensar acerca de esas cosas antes de hacer algo.
  • Sobrecarga de animación: todos los navegadores son realmente diferentes entre sí, por lo tanto, van a manejar la carga diferentemente, algunos de ellos son capases de manejar grandes cargas con un buen rendimiento, pero, desafortunadamente eso no pasa con todos ellos, animaciones grandes donde todo es activado al mismo tiempo todo el tiempo innecesariamente pueden ser tan lentas y torpes que pueden ser capases de congelar algunos navegadores, piensa como si la animación fuese una escena de una obra de teatro, cada actor tiene un rol y un tiempo para actuar, la animación debería trabajar de la misma manera, no actives ningún elemento innecesariamente.
 

Últimos consejos

 
Desafortunadamente, no importa cuán fuerte intentes no puedes soportar todos los navegadores, casi todos los programas en el mundo trabajan así, ellos soportan un número especifico de plataformas, y si un programa nuevo es lanzado, solo plataformas nuevas y las más usadas serán soportadas, cada aplicación web debería trabajar así (incluso sitios web, por supuesto), además, no creo que actualizar un navegador o instalar uno nuevo sea tan difícil, en el presente CSS3 es soportado por una gran gama de navegadores de todas las plataformas, por lo tanto, si realmente quieres usar una nueva característica de CSS3, entonces úsalo de una manera que todos los navegadores puedan mostrar la página web incluso si su apariencia no es la misma, por supuesto este es solamente un pensamiento personal, y no puedo tomar la decisión por ti.

About me

Acerca del autor
Miguel Rodríguez es un desarrollador freelance de Caracas - Venezuela, es una persona persistente y orientada a metas que trata de hacer el mejor uso de sus recursos, es lo suficientemente positivo, proactivo y motivado como para plantear una meta con intenciones de cumplirla, encuentra más sobre él .