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.
Saludos:
Creo que viene siendo hora de que el diseñador/desarrollador/programador no tenga que rogarle al usuario, sino, que le imponga sus condiciones. Yo hace mucho tiempo que, cuando hago algún trabajo me centro en Firefox, Chrome y Opera, claro, tratando siempre de que en IE quede lo mejor posible, pero siempre se los advierto:
«… Este sitio está optimizado para FF, Chrome… bla bla bla, dejen de usar esa porquería de IExplorer y usen un navegador de verdad.. »
Y listo…
Pues esto del css3, ya es algo que todos los que nos dedicamos a esto de crear sitios, ya esperamos poder usar más ampliamente, solo falta que los principales navegadores se pongan las pilas. excelente artículo, gracias por compartir.
Tienes toda la razón, lo que sucede que no estoy tan convencido que sea una guerra entre todos, más bien pienso que es de explorer contra todos los demás, o viceversa 😉
Bien.Las novedades que comentas, tienen muy buena pinta, pero tal y como dicen en el resto de comentarios, la guerra estúpida entre navegadores va a seguir haciendo que los que nos dedicamos al diseño web sigamos calentándonos la cabeza
Y en especial que todavía hay un gran porcentaje de usaurios con ie6 🙁
WordPress me tiene muy harto, no permite nada de nada 🙁
Que tal, solo saludándolos por este blog que en lo personal me ha aportado mucho en conocimientos…..
Comparto la opinión de que mientras los de Redmon no se pongan las pilas en lo que cabe a sus navegadores tendremos que estar quebrandonos la cabeza para tener compatibilidad en nuestros diseños.
Pinta muy bien la conjuncion de HTML 5 Y de CSS3 pero es cierto, creo que tardaran un buen rato en que sean aceptados correctamente por ya saben quien…..
PD. acabo de probar el test de compatibilidad CSS· para los navegadores y también Opera en su versión 10.00 pasa el test 43 de 43…
Lamento que no salga correctamente el código, supongo que wordpress tiene un filtrado no permisivo, en cualquier caso en el enlace viene todo.
Saludos.
Por suerte para muchos de nosotros ha llegado Google Chrome Frame, gracias a los mágicos ingenieros de Google, una vez mas, nos resuelven un problema conocido hasta la fecha.
¿Que la gente no quiere actualizar o usar otro explorador? Que se quede con Internet Explorer, que instalen el plug-in al igual que hacen con Flash Player y similares, problema resuelto.
Basta con poner:
Y si ademas quieres invitar al usuario a instalar el plug-in si no lo usa, simplemente:
CFInstall.check({mode:»popup»,url:»http://www.tuprogramador.es/InstallGoogleChromeFrame.html»});
en mi caso, una maravilla, problemas de maquetación en Internet Explorer 6 fuera 😉
¿Quien dijo que CSS3 sólo podía funcionar en Mozilla, Safari o Chrome? 😛
Mas info en: http://code.google.com/intl/es-ES/chrome/chromeframe/developers_guide.html
Saludos.
yo usaba css 3para los bordes redondeados por ejemplo pero sorpresa la mia al ver la web en windows y internet explorer que se veia de pena… asi que vuelta a los bordes redondeados con jpgs… y esto del css 3 y html 5 como tu dices, va para muuuuy largo… al igual que por raro que parezca casi el 50% de la gente sigue teniendo la resolucion solo de 1024…
Sí, son buenas novedades, pero veo muy lejano en el tiempo el poder usarlas sin tener que pensar que no se verá igual en todos los navegadores. Si ie ya nos da problemas con algunas características de CSS2, cómo va a no hacerlo con la CSS3.
A mí, personalmente, no me apetece ponerme a usar algunas cosas que puedo hacer ahora de otro modo una sola vez (sin hacks, ni ajustes, ni condicionales para ie, por ejemplo: las esquinas redondeadas con imágenes de fondo) para añadir otro bache más a la hora de optimizar para el navegador de microsoft.
Si no me entusiasma la idea es sólo por eso, porque no es tan bonito como se pinta.