Spanish (Español) translation by Steven (you can also view the original English article)
El módulo de diseño de columnas múltiples se ha introducido para ayudarnos a crear columnas de forma rápida y sencilla utilizando solo CSS3. En este tutorial voy a echar un vistazo a algunas de sus propiedades y las voy a demostrar a través de una serie de ejemplos.
Introducción
Cualquiera que haya intentado crear varias columnas en el pasado utilizando CSS ya sabrá que este tipo de diseño se ha podido lograr durante mucho tiempo. Sin embargo, esto a menudo ha resultado en el uso de flotadores y técnicas poco originales. La mayoría de las veces, esto no ha llevado mucho tiempo y definitivamente no es el diseño más fácil de crear. La verdad es que crear múltiples columnas usando CSS ha sido un proceso extremadamente incómodo hasta ahora. El módulo de diseño de varias columnas ofrece más flexibilidad y control sobre los métodos CSS anteriores.
El nuevo enfoque, que es una extensión del modelo de caja CSS actual, permite que el contenido se ejecute de una columna a otra y lo hace fácilmente adaptable para diferentes dispositivos de visualización y datos dinámicos.
Soporte del navegador
Bien, antes de entusiasmarte demasiado con este nuevo módulo, es importante comprender qué navegadores lo soportan, qué prefijos usar y algunas limitaciones del navegador.
Navegadores compatibles
- IE10+
- Firefox 5+
- Chrome 12+
- Safari 3.2+
- Opera 11.1+
Tanto Chrome como Safari usan el prefijo '-webkit-'. Firefox usa el prefijo '-moz-'. Opera e IE admiten todas las propiedades sin necesidad de prefijo. Por alguna razón, Chrome, Safari y Firefox no admiten las propiedades de relleno de columnas o de separación, mientras que Safari y Firefox no admiten el intervalo de columnas. Dicho esto, estoy seguro de que estas propiedades pronto estarán disponibles en futuras actualizaciones.
Un ejemplo rápido
Antes de echar un vistazo a las propiedades utilizadas en el módulo de diseño de múltiples columnas, te mostraré un ejemplo rápido para ayudarte a comprender cómo funciona un poco más fácilmente.
Aquí hay una vista previa de cómo se renderizarán las columnas:
Primero, el html para este ejemplo es súper simple. Simplemente creamos un div con una clase 'columns' y un poco de texto ficticio lorem ipsum.
1 |
<div class="columns"> <p>Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt, porta, placerat urna nec! Urna, adipiscing enim mid ut. Enim amet, a ac mauris vut porttitor risus integer elit, dis odio sed pulvinar ridiculus sit. Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt, porta, placerat urna nec! Urna, adipiscing enim mid ut. Enim amet, a ac mauris vut porttitor risus integer elit, dis odio sed pulvinar</p> |
2 |
</div>
|
El módulo de diseños de varias columnas es bastante fácil de describir y comprender en CSS. He aquí un ejemplo:
1 |
.columns{ |
2 |
column-count: 4; |
3 |
column-gap: 10px; |
4 |
}
|
Primero usamos 'column-count', para dictar cuántas columnas se necesitan (he usado 4 en este ejemplo).
Luego decimos qué tan grande queremos que sea el canalón (el espacio entre las columnas). En este caso he usado 10px.
Al agregar estas propiedades, permite que nuestro texto ficticio lorem ipsum fluya entre las 4 columnas. Realmente es así de sencillo comenzar. A estas alturas, deberías empezar a ver lo sencillo que es utilizarlo.
Propiedades de CSS
Echemos un vistazo con más detalle a algunas de las propiedades que se pueden encontrar en el módulo de diseño de varias columnas.
Número y ancho de columnas
Establecer el número o el ancho de las columnas es importante para el contenido del diseño de varias columnas. Las columnas deben establecerse usando 'column-width' o 'column-count', pero nunca deben usarse juntas. Ambas propiedades están configuradas de forma predeterminada en 'auto'.
Ancho de columna
"Ancho de columna" hace exactamente lo que dice en la lata. Te permite especificar un ancho fijo para las columnas. La medida de este ancho se puede realizar de forma estándar usando px, ems, etc. Dependiendo de lo que ingreses para el ancho de la columna puede variar y puede ser un poco más ancho o más estrecho para adaptarse al espacio disponible. Si esta propiedad se establece en 'auto', esto significa que el ancho de las columnas lo dictarán otras propiedades, como la que se muestra a continuación.
Opciones de valor column-width: (longitud) | auto;
Recuento de columnas
Si deseas que el diseño se divida en varias columnas específicas, esta es la propiedad por la que deberías optar. Al establecer el valor de este, el contenido se divide en la cantidad requerida de columnas. Si esta propiedad se establece en 'auto', esto significa que el número de columnas se decidirá por otras propiedades, como 'column-width'.
Opciones de valor column-count: (número de columnas) | auto;
Columnas
'Columns' es efectivamente una propiedad abreviada que te permite establecer el 'ancho de columna' y el 'recuento de columnas'. Aquí hay una vista de valores válidos que puedes asociar con 'columns':
1 |
columns: 12em; /* column-width: 12em; column-count: auto */ |
2 |
columns: auto 12em; /* column-width: 12em; column-count: auto */ |
3 |
columns: 2; /* column-width: auto; column-count: 2 */ |
4 |
columns: 2 auto; /* column-width: auto; column-count: 2 */ |
5 |
columns: auto; /* column-width: auto; column-count: auto */ |
6 |
columns: auto auto; /* column-width: auto; column-count: auto */ |
Espacio entre columnas
El 'espacio entre columnas' nos da la oportunidad de agregar un espacio entre cada una de las columnas y le da al contenido espacio para respirar. Especificamos el ancho del espacio usando medidas CSS estándar. El ancho del espacio que especifiques no puede ser negativo.
Opciones de valor column-gap: (longitud) | normal;
Regla de columna
La 'regla de la columna' coloca efectivamente un borde en el medio del 'espacio de la columna'. Por lo tanto, para habilitar esto, se debe especificar un ancho de 'espacio de columna' que tenga el mismo valor o mayor que la regla de columna. La regla de columna también tiene varias subpropiedades independientes, así como una versión abreviada. Esta versión abreviada funciona de la misma manera que la propiedad 'borde' de la abreviatura. Puedes ver esto a continuación:
1 |
column-rule-width:1px; |
2 |
column-rule-style: solid; |
3 |
column-rule-color: #000; |
4 |
column-rule: 1px solid #000; /* This is the shorthand version */ |
Intervalo de columnas
'column-span' nos permite abarcar todas las columnas. Si tomamos nuestro ejemplo simple de antes y agregamos un título h1 a nuestro contenido, podemos hacer que esta etiqueta h1 abarque las 4 columnas completas agregando column-span: all. Echa un vistazo a esta demostración:
1 |
h1{ |
2 |
column-span: all; |
3 |
}
|
Opciones de valor: column-span: all | none;
Relleno de columnas
La propiedad 'column-fill' nos da dos controles para establecer cómo se equilibra la cantidad de contenido en las columnas. Si se establece en 'balance', la variación en la longitud de la columna se minimizará y todas las longitudes serán lo más iguales posible. Si se establece en 'auto', las columnas se llenarán en orden y (por ejemplo) puede resultar en que la cuarta de 4 columnas tenga menos contenido que las 3 columnas anteriores. Si se estableciera un equilibrio en esto, permitiría que las 4 columnas tuvieran aproximadamente la misma altura. Esta propiedad resuelve el problema de dejar huecos indeseables en el contenido.
Desbordamiento
El 'overflow' debe usarse para controlar lo que sucede si el contenido desborda las columnas. Si, por ejemplo, el div principal de 'columnas' tiene un ancho fijo y el contenido de las columnas se extiende, entonces podemos controlar si esto debe mostrarse o recortarse usando la propiedad 'overflow'.
En el siguiente ejemplo, podemos ver que las columnas desbordan el div. Esto se debe a que el desbordamiento no está configurado como 'oculto' en el elemento principal.
Ejemplo 1
El antiguo método para crear diseños de columnas múltiples
He reunido algunos ejemplos que puedes descargar en la parte superior de esta página. He hecho esto para mostrar cómo puedes usar este nuevo módulo en diferentes situaciones para que puedas ver lo fácil que es cambiar el diseño de tu código simplemente cambiando algunas propiedades en el marcado CSS.
Claro, esto funciona bien y puedes lograr el efecto deseado. Sin embargo, la flexibilidad está bastante restringida. Si deseas agregar columnas adicionales o cambiar el diseño, debes confiar en agregar marcas adicionales, mover elementos y puede ser bastante tedioso. Este nuevo módulo cambia todo eso.
Ejemplo 2
El nuevo método
Para cambiar el número de columnas, es tan simple como cambiar un número.
Ejemplo 3
Otras características
En este último ejemplo, seguí usándolo en el contenido principal, pero también agregué algunos divs adicionales para mostrar cómo puedes cambiar el diseño de manera bastante simple. También agregué 'span:all' a la etiqueta inferior 'h1' para que el título se extienda a lo largo de las columnas 'all'. Por último, le agregué una regla al incluir 'column-rule: 1px dotted # 999999;' al CSS.
Vale la pena señalar en este punto que también he incluido un respaldo de JavaScript en los ejemplos, para que funcionen en navegadores que aún no son compatibles con el módulo de diseño de múltiples columnas.
Retrocesos
Como con cualquier módulo CSS nuevo; los juguetes nuevos nos ahorran tiempo, pero tienen un período intermedio o de transición que a veces puede llevar bastante tiempo antes de que se alcance la compatibilidad entre navegadores. Actualmente estamos en la etapa intermedia, donde algunos navegadores se han puesto al día, algunos se están poniendo al día y otros se quedan atrás. Es durante esta etapa que necesitamos tener un plan de respaldo o retroceso para los navegadores que aún no cuentan con soporte. Afortunadamente, Cedric Savarese ha creado un script que lee nuestros nuevos valores de propiedad CSS3 y muestra las columnas usando javascript. Puedes leer cómo implementar esto y descargar el script en Una lista aparte.
Generador de diseño de varias columnas
Si en esta etapa te mueres por saltar y jugar con algunas de las propiedades que hemos discutido hoy, entonces he creado un rápido 'generador de múltiples columnas' con el que puedes tener problemas. No es nada lujoso, pero después de jugar un poco con él, deberías poder comprender los conceptos básicos del 'módulo de diseño de múltiples columnas' y poder comenzar a usarlo en tus propios proyectos.
También puedes descargar el código generado para poder experimentar más con algunas de las otras propiedades que no están incluidas en el generador.
Generador de diseño de múltiples columnas CSS3
Resumen
Eso nos lleva a un cierre del módulo de diseño de múltiples columnas CSS3. Espero que ahora comprendas mejor cómo usarlo. Realmente es bastante simple de usar una vez que hayas jugado un poco con él. A pesar de ser nuevo y tener algunas limitaciones de compatibilidad con el navegador, está comenzando a abrirse camino en Internet y estoy seguro de que solo será cuestión de tiempo antes de que sea un módulo CSS completamente aprobado e implementado.
Nos da la posibilidad de explorar algunos diseños geniales con CSS. Experimenta con él, juega con él y descarga los archivos fuente para los ejemplos en la parte superior de este tutorial. Me encantaría escuchar lo que tienes que decir y pensar sobre este nuevo módulo, házmelo saber en los comentarios a continuación.
Más enlaces, lecturas y recursos
By
