Si ayer hablábamos sobre el HTML5, hoy le toca el turno a su hermano gemelo, el CSS3. En el caso del CSS3 su situación actual es complicada, ya que ninguno de los navegadores web que utilizamos, ni tan siquiera en sus últimas versiones, soportan el estándar CSS3 en su totalidad, y para hacerlo aún más complicado, cada uno de ellos posee una completa lista de alternativas al estándar que hace imposible la tarea de crear un diseño web crossbrowsing normalizado, ya que hay que utilizar infinidad de hacks para que nuestro trabajo sea correctamente (en mayor o menor medida) visualizado en los distintos navegadores web.

Cosas tan, a simple vista, simples como utilizar esquinas redondeadas puede resultar una auténtica tortura china para un buen diseñador web, ya que, por ejemplo, Opera no soporta redondear las esquinas de capas que tienen una imagen de fondo sin que ésta sobresalga de los límites redondeados:

-webkit-border-radius: 20px;
border-radius: 20px;

El uso de degradados supone añadir una amalgama de etiquetas que harán que los distintos navegadores web sean capaces de dibujar aquello que queremos, ya que muy pocos aceptan el estándar original sin resentirse:

background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1))); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); /* Chrome10+, Safari5.1+ */
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); /* Opera 11.10+ */
El futuro de CSS3 está aún por escribir, pero nos quedan muchas maravillas aún por ver de este estándar W3C
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); /* IE10+ */
background: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1 ); /* IE6-9 */

O el uso de la sombra de texto o de caja puede suponer otro gran problema gracias a nuestros amigos los navegadores web:

text-shadow: 5px 5px 5px #000000;
filter: dropshadow(color=#000000, offx=5, offy=5);
-webkit-box-shadow: 2px 2px 10px 5px rgba(5, 5, 5, 5);
box-shadow: 2px 2px 10px 5px rgba(5, 5, 5, 5);

Y estos son tres simples ejemplos de los muchos dolores de cabeza que nos deparará el uso de CSS3.

Para no morir en el intento, existen algunas ayudas interesantes en la Internet que nos harán un poco más fácil su uso como CSS3 Generator o CSS3 Please!. También podemos utilizar algún framework como 52framework que nos puede ser de gran ayuda. O si queremos que nuestro código CSS3 quede limpio como la patena y pueda hasta incluso validar correctamente, podemos utilizar un pequeño plugin para jQuery llamado prefixfree.js que puede salvarnos la vida.

El futuro de CSS3 está aún por escribir, pero nos quedan muchas maravillas aún por ver de este estándar W3C. Sólo esperemos que los navegadores web estén a la altura.

Noticia publicada originalmente en Art Project Group.

Cosas tan, a simple vista, simples como utilizar esquinas redondeadas puede resultar una auténtica tortura china para un buen diseñador web