Tag: CSS3

The CSS3 Test

The CSS3 Test es una página web que realiza un test de las nuevas características de CSS3 que son soportadas por el navegador que usas. Esta página web avisa de una cosa muy importante: el test sólo comprueba que una propiedad es admitida por el navegador, pero no significa que el navegador la implemente correctamente según se define en el estándar.

El resultado para Google Chrome 29:

css3test-chrome

Y el resultado para Microsoft Internet Explorer 10:

css3test-ie

Browser Support

Browser Support es una página que nos ofrece un motor de búsqueda que nos permite averiguar que propiedades CSS son soportados por los principales navegadores. Además, también ofrece enlaces a la documentación oficial y muchas pruebas (tests) para comprobar la compatibilidad de las propiedades con distintos navegadores.

También podemos realizar el proceso inverso, podemos seleccionar un navegador y consultar las propiedades de CSS (y en especial CSS3) que soporta.

Por ejemplo, si buscamos border-radius, a partir de la información que ofrece esta página web podemos decidir que la podemos utilizar sin problemas, ya que todos los navegadores actuales la soportan:

Sin embargo, si buscamos border-image, el resultado es desolador, y según esta página sólo funciona en Google Chrome a partir de la versión 16:

Pero cuidado, aunque una propiedad sea soportada por todos los navegadores, a veces hay ligeras diferencias en la forma de interpretarla que pueden destrozar un diseño.

Animaciones con CSS3

Animate.css es una espectacular librería de efectos animados realizados únicamente con CSS3. Algunos los ves y no te los crees. Eso sí, no probarlo con navegadores de mentira, como el Internet Explorer, porque la sensación puede ser desagradable.

Las animaciones de esta librería están todas hechas con simple CSS, sin JavaScript o jQuery.

 

Captura de pantalla de la página de Animate.css

Adobe Edge

Mientras que algunos ya dan por muerto a Adobe Flash, en otros sitios (Reports of Flash’s Death Have Been Greatly Exaggerated) podemos leer que aún le quedan años.

Sin embargo, hasta la propia Adobe se ha subido al carro de HTML5 y acaba de sacar Adobe Edge Preview, que permite crear animaciones con HTML5, CSS3 y JavaScript. En concreto, las principales características de Adobe Edge son:

This version of Edge focuses primarily on adding rich motion design to new or existing HTML projects, that runs beautifully on devices and desktops.

  • Create new compositions with Edge’s drawing and text tools.
  • Import popular web graphics such as SVG, PNG, JPG or GIF files.
  • Easily choreograph animation with the timeline editor. Animate position, size, color, shape, rotation and more at the property level.
  • Energize existing HTML files with motion, while preserving the integrity of CSS-based HTML layouts.
  • Copy and paste transitions, invert them, and choose from over 25 built-in easing effects for added creativity.

 

¿Qué características de HTML 5 y CSS 3 soporta mi navegador?

El sitio web findmebyIP permite averiguar qué características de las nuevas tecnologías HTML 5 y CSS 3 soporta el navegador con el que te conectas a la página.

Por ejemplo, las siguientes dos imágenes muestran parte del test que se realiza en esta página. En la primera imagen vemos los resultados para Internet Explorer 8:

Y la siguiente imagen muestra los resultados del mismo test para Firefox 3.6:

Como se puede ver, los resultados son muy diferentes.

¿Qué ofrece HTML 5?

HTML 5, la próxima versión del lenguaje de marcado HTML va a ser toda una revolución. Por ahora sigue siendo un borrador (el último documento disponible es del 24 de junio de 2010) pero se espera que en 2011 esté terminada la especificación.

A día de hoy, ya son varios los navegadores que incorporan parte de la especificación actual de HTML 5. El sitio web HTML5 & CSS3 Readiness ofrece información de qué implementa cada navegador.

Pero, ¿qué ofrece HTML 5? La principal ventaja es que pretende eliminar (o por lo menos, reducir) el empleo de otras tecnologías que se emplean en las páginas web mediante plug-ins y add-ons como Adobe Flash, Microsoft Silverlight, Oracle Java, etc. Para lograrlo, HTML 5 incorpora una gran cantidad de nuevas características que prometen revolucionar el desarrollo de las páginas web.

Brad Neuberg, programador de Google, publicó el año pasado un interesante vídeo donde explica y muestra algunos ejemplos de las nuevas funciones de HTML 5.

Introduction to HTML 5 from Brad Neuberg on Vimeo.

En el vídeo nos explican que las principales características que incorpora HTML 5 son: canvas/SVG, video, geolocalización, caché de aplicaciones, uso de bases de datos en el propio navegador y “web workers”.

Las transparencias están disponibles en Introduction to HTML 5.

HTML5+CSS3+JS

Acabo de leer en el periódico El Mundo el artículo HTML5 + CSS3 + Javascript: Cada vez más y mejor.

Según el artículo, Google, Microsoft y Apple están apostando fuerte por la combinación HTML5 + CSS3 + JavaScript para que se convierta en la tecnología estándar de la Web y desplace totalmente a otras tecnologías competidoras como Flash:

Google, Microsoft y Apple ya han hecho su apuesta: HTML5 + CSS3 + Javascript. ¿Qué significan estas siglas? Páginas web mucho más ricas, completas, interactivas e interesantes que las que se hacen hoy en día. Infinitas posibilidades con gráficos e imágenes vectoriales, fotos, vídeos y otros elementos.

[…] Las grandes compañías de la Red quieren que HTML5 + CSS3 + Javascript sea la tecnología predominante para el desarrollo de sitios web. Primero porque, frente a otras como Flash o Silverlight, es código abierto y por tanto común a todo el mundo. Segundo, porque es una evolución lógica del modelo actual. Tercero, porque es muy potente.

[…] Si Google, Microsoft y Apple quieren que la apuesta sea HTML5 + CSS3 + Javascript deberían ponerse de acuerdo en cómo llevar esta tecnología a sus navegadores. El resto, simplemente, seguiría su camino para sobrevivir.

Por cierto, en este artículo aparece la siguiente imagen que se puede encontrar en la página HTML5 & CSS3 Readiness.