Firefox y los navegadores basados en
Mozilla/
Gecko incluyen de forma experimental algunas de las implementaciones que propone el actual borrador de
CSS3 de la
W3C. Junto con los bordes redondeados, una de las características que me resulta interesante es la de poder crear div multicolumnas utilizando únicamente código
CSS. Pensado para monitores grandes o líneas demasiado largas, esta es una solución similar a la que utilizan los peródicos. Firefox 1.5 y superiores implementan el conjunto de propiedades CSS para multicolumnas en forma experimental pero funcional. Con esto no tenemos que andar utilizando tablas o listas, o Javascript.
Su implementacón es sencilla. basta con usar las siguientes propiedades:
-moz-column-count : indica el número de columnas que queremos implementar (2, 3, 4 o la cantidad que sea)
-moz-column-width : indica el ancho mínimo de las columnas
-moz-column-gap : indica el espacio entre columnas. Por defecto las columnas no tienen un espacio entre ellas, por lo que es necesario utilizar esta propiedad.
A continuación pueden ver un ejemplo:
… and its mission to preserve choice and promote innovation on the Internet. The Mozilla Foundation was incorporated as a California not-for-profit corporation to ensure that the Mozilla project continues to exist beyond the participation of individual volunteers, to enable contributions of intellectual property and funds and to provide a vehicle for limiting legal exposure while participating...”
El ejemplo anterior utiliza
-moz-column-count:3; -moz-column-width: 60px; -moz-column-gap:20px;
En caso de que un navegador no soporte multicolumnas simplemente mostrará el texto en una sola columna, ignorando las propiedades CSS3 con las que no es compatible (esto les sucederá con el IE7), pero podemos hacer un diseño que se adapte a las dos formas. Cabe remarcar que CSS3 es por ahora solo un borrador y que no está implementado de forma definitiva en los navegadores. Firefox y los navegadores basados en Gecko 1.8 soportan algunas propiedades y la próxima versión de Firefox se espera tendrá mayor compatibilidad.
Si desean pueden ver un ejemplo en este enlace y la especificacón aquí.
Más información:
http://developer.mozilla.org/es/docs/Columnas_con_CSS-3
Un Comentario
4:00 | #
Existe alguna alternativa a esto hoy en día en CSS2? Estoy intentando hacer que un texto que inserto dinámicamente se reparta automáticamente en 2 columnas, esta solución me viene al pelo, pero claro sólo sirve para Firefox…