Al publicar la serie “cosas que debes saber sobre CSS” me di cuenta de que hay bastante gente interesada en el tema de las hojas de estilo, sobre todo cuando se habla de CSS avanzado. Supuse que ese interés se debía, en gran parte, a la curiosidad por lo nuevo y a la sorpresa por lo potente del CSS. Por eso, me decidí a escribir este artículo, mostrando por encima lo más nuevo en CSS: La tercera versión de CSS.
Quiero aclarar también que CSS 3 está todavía en desarrollo, y que la mayoría de sus propiedades aún no han sido implementadas por los navegadores. Aún así, pinta muy bien y hay algunas que ya pueden ser usadas. Por ejemplo, en ululand usamos bastante la propiedad border-radius para redondear algunos bordes sin recurrir a trucos raros de CSS o a librerías de javascript (como la que se usa en este blog).
Algunos elementos nuevos
border-radius
Este es, para mí, uno de los cambios más prácticos de la próxima versión de CSS. Los diseños web con esquinas redondeadas son muy habituales hoy en día y, paradójicamente, no existe una forma sencilla de conseguir este efecto. Por suerte para todos, CSS3 trae la propiedad border-radius al rescate:
Resultado
Sintaxis
border-radius: <radio_horizontal> <radio_vertical>; border-top-radius: <radio_horizontal> <radio_vertical>; border-right-radius: <radio_horizontal> <radio_vertical>; border-bottom-radius: <radio_horizontal> <radio_vertical>; border-left-radius: <radio_horizontal> <radio_vertical>;
Soporte
Firefox (usando prefijo “-moz-”): -moz-border-radius
Webkit (safari 3/Chrome) (usando prefijo “-webkit-”): -webkit-border-radius