CSS3

CSS3

En este blog de diseño web, hemos visto en numerosas ocasiones los problemas que origina la «batalla entre navegadores», la cantidad de puertas traseras que tenemos que buscar para que el resultado se visualice igual en uno que en otro.

Con la llegada del CSS3, tendremos muchas más posibilidades de controlar el diseño del blog o de la web que estemos construyendo. CSS3 tiene un mayor control sobre la maquetación, permitiéndonos diseñar sin pensar en las dificultades que nos van a originar los distintos navegadores.

Este es uno de los problemas de ser diseñador y además maquetador, ya que a menudo te condiciona el ser conocedor de los problemas que luego te vas a encontrar en la maquetación, aunque habrá quien lo vea como beneficioso…

CSS3 incorpora muchas novedades, vamos a destacar algunas de las que me parecen más impactantes, por su resultado visual y sobre todo por lo difícil que ha sido conseguir ese mismo resultado hasta la fecha.

MAQUETACIÓN MULTICOLUMNA

La maquetación en columnas ha sido durante mucho tiempo un quebradero de cabeza en el diseño web. Para maquetar una página a tres columnas, colocaba una capa con un float:right y otra con un float:left y dentro de una de ellas volvía a hacer lo mismo, de ese modo conseguía tener tres columnas sin usar tablas y sin problemas en los distintos navegadores.

CSS3 nos permite dejar de lado esa preocupación, al menos en lo que se refiere a la maquetación de varias columnas. Podremos definir el número de columnas, el espacio entre estas, la posición de las fotografías en ellas en apenas un par de órdenes, luego basta con colocar todo el texto dentro del div que lleva esas propiedades y podremos ver el resultado de inmediato. Tenéis un buen ejemplo en www.desarrolloweb.com.

De momento sólo Firefox, Safari y Chrome soportan estas nuevas etiquetas, así que desgraciadamente tendremos que esperar un poco más a que «espabile» el explorer.

BACKGROUNDS Y BORDERS

CSS3 nos permite también en un par de líneas dar forma redondeada a una capa, controlando incluso el radio de curvatura de las esquinas redondeadas.

También nos permite colocar un background sobre otro, tantas veces necesitemos. Una gran ventaja para los nuevos diseños web que ya llevamos un tiempo viendo, con grandes backgrounds superpuestos uno sobre otro.

MAQUETACIÓN MÁS PRECISA

CSS3 nos da la opción de colocar unas «reglas imaginarias» para ayudarnos a realizar un diseño tipo revista, permitiéndonos además jugar con las posiciones «flotantes» de elementos como las imágenes.

Y ADEMÁS…

  • Rotura de palabras largas – cuando introducimos una cadena muy larga de caracteres sin ningún espacio, el resultado es que dicha cadena alargue el div que la contiene destrozando la maquetación. Ahora podremos despreocuparnos del «gracioso» que introduce esas palabras sin fin en nuestros comentarios para destrozarnos la maquetación.
  • Color RGBA – a los ya conocidos RGB se le une la sigla A que determina la opacidad del color (canal Alpha).

Tenéis más información en www.css3.info

EN CONCLUSIÓN…

Pues desgraciadamente y al igual que sucede con el HTML5 me temo que esto va para largo, no sé si por intereses, si por batallas internas entre Microsoft y el resto, quien sabe… El caso es que mientras podríamos estar ya aprovechando todas estas auténticas maravillas de ayuda al diseño, no podemos hacerlo, porque sigue sin verse en el Explorer.

Según http://msdn.microsoft.com el Explorer 8 sólo tiene algunas compatibilidades con CSS3. Por otro lado, cada vez que Microsoft actualiza su explorador, los usuarios, bien sea por desconfianza o quien sabe qué, no actualizan sus viejos navegadores, la prueba la tenemos en el dichoso Explorer 6 y lo que ha costado dejarle de lado. Todo esto me hace ser bastante pesimista en cuanto a la implantación tanto del HTML5 como del CSS3.

css3.info tiene un test que mide la compatibilidad de tu navegador con CSS3, en mi caso, que navego con Firefox 3.5.3 los resultados son de 43 de 43 es decir 100% compatible

Haciendo el mismo test en el mismo equipo, con Internet Explorer 7, la compatibilidad es de 13 sobre 43. Sin comentarios…

Bueno, esperemos que todos lleguen pronto a un consenso y podamos disfrutar de las nuevas vías que nos abren estas nuevas tecnologías. De todos modos, os aconsejo que empecéis a estudiarlas, todo será camino ganado para cuando se implanten.

Share and Enjoy !

Shares