Estilo “Me duelen los ojos sólo con verlo”: Usando tablas.
Al principio de los tiempos todo lo solucionábamos utilizando tablas y como no… esto también. ¿Que hace falta poner texto a 2 columnas? Nada… ahí cascamos una tabla de dos columnas y una fila para solucionarlo.
View Raw Code?
Texto a dos columnas con tablas
| Una columna | Otra columna |
El código está en HTML4 porque es cuando éramos inconscientes, cafres… y el resultado es:
No hacer en su web… por dios!!!
No hacer en su web… por dios!!!
No se ve mucho así que pongamos un poco de texto del quijote gracias al servicio de quijotipsum:
View Raw Code?
Texto a dos columnas con tablas
| En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera. Frisaba la edad de nuestro hidalgo con los cincuenta años; era de complexión recia, seco de carnes, enjuto de rostro, gran madrugador y amigo de la caza. Quieren decir que tenía el sobrenombre de Quijada, o Quesada, que en esto hay alguna diferencia en los autores que deste caso escriben; aunque, por conjeturas verosímiles, se deja entender que se llamaba Quejana. Pero esto importa poco a nuestro cuento; basta que en la narración dél no se salga un punto de la verdad. | Es, pues, de saber que este sobredicho hidalgo, los ratos que estaba ocioso, que eran los más del año, se daba a leer libros de caballerías, con tanta afición y gusto, que olvidó casi de todo punto el ejercicio de la caza, y aun la administración de su hacienda. Y llegó a tanto su curiosidad y desatino en esto, que vendió muchas hanegas de tierra de sembradura para comprar libros de caballerías en que leer, y así, llevó a su casa todos cuantos pudo haber dellos; y de todos, ningunos le parecían tan bien como los que compuso el famoso Feliciano de Silva, porque la claridad de su prosa y aquellas entricadas razones suyas le parecían de perlas, y más cuando llegaba a leer aquellos requiebros y cartas de desafíos, donde en muchas partes hallaba escrito: La razón de la sinrazón que a mi razón se hace, de tal manera mi razón enflaquece, que con razón me quejo de la vuestra fermosura. Y también cuando leía: …los altos cielos que de vuestra divinidad divinamente con las estrellas os fortifican, y os hacen merecedora del merecimiento que merece la vuestra grandeza. |
En serio… de verdad de la buena… no usar!
En serio… de verdad de la buena… no usar!
Bueno, ya tenemos nuestro texto a dos columnas con tablas… cierto es que se ve fatal, así que vamos a aplicar un poquito de estilos:
View Raw Code?
td {
font-size: 15px;
line-height: 20px;
padding: 0 20px;
text-align: justify;
vertical-align: top;
width: 50%;
}
td.first {
border-right: 5px solid #4BB495 ;
}
Agregamos el CSS de forma correcta a nuestro HTML:
View Raw Code?
Texto a dos columnas con tablas
| En un lugar de la Mancha (…) verdad. | Es, pues, de saber que este (…) grandeza. |
Y el resultado ya es más decentón.
Aunque la mona se vista de seda… ¿te lo repito?
Aunque la mona se vista de seda… ¿te lo repito?
Los problemas de este estilo:
Más allá de que nadie querrá saber nada de ti si a estas alturas utilizas tablas…
No es accesible.
Las tablas se utilizan sólo para mostrar datos tabulares.
Una página maquetada con tablas tarda más en cargar que una correctamente maquetada.
Google no entenderá la realidad de su contenido.
Old-style: Usando cajas flotantes con CSS2.1
Con el paso de los años la maquetación web fue creciendo y pasó de ser un bebé a entrar en la adolescencia. Así que nos volvimos desafiantes y abandonamos el uso de tablas. ¿Qué usamos? Pues cajas, etiquetas div que flotan. Algo así:
View Raw Code?
Texto a dos columnas con etiquetas div
Con su CSS
View Raw Code?
.box {
overflow: hidden;
}
.content {
font-size: 15px;
line-height: 20px;
padding: 0 20px;
text-align: justify;
}
.left {
float: left;
width: 50%;
}
.left .content {
border-right: 5px solid #4BB495 ;
}
.right {
float: right;
width: 50%;
}
Misma apariencia, pero sin tablas. Esto ya es más decente!
Misma apariencia, pero sin tablas. Esto ya es más decente!
Ya no estamos con HTML4, sino que hemos pasado a XHTML y hemos dejado atrás los problemas de la maquetación por tablas.
Sin embargo esta solución sigue siendo problemática.
¿Por qué ninguno de estos métodos sirve?
Es imposible administrar el contenido: Pues sí… es horrible tener que gestionar contenido que se visualiza en varias columnas. No te queda otra que ir mirando cuándo debes hacer el cambio de columna cada vez que hay que cambiar los textos … vuelta a empezar. Al final se suele poner una administración con un área de texto por cada una de las columnas y que se cubra… aunque esto facilita algo la labor, no deja de ser algo manual y que, además, no soluciona un problema más actual.
El sufrimiento del multidispositivo: Como el texto se muestra agrupado en diferentes cajas, el problema está servido. Pongamos que has maquetado pensando en 1280px de ancho y has puesto texto a 3 columnas. Eso va a quedar muy mal si el dispositivo tiene un ancho de, por ejemplo 800px (cercano a un tablet de 7′). Lo suyo sería que ese texto se muestre a 3 columnas en 1280, a 2 columnas hasta 800 y 1 columna hasta 400px. Y ahí es donde nos encontramos con una limitación.
Estos problemas podrían solucionarse complicando la maquetación y, sobre todo, la forma de alimentar (por ejemplo, teniendo que alimentar varias veces, una por grupo de resoluciones) pero para qué… si tenemos CSS3
La forma correcta: CSS3 al rescate.
Que cuando se ideó el CSS3 se pensó en todo es algo cada vez más evidente e indiscutible. En CSS3 tenemos las siguientes nuevas propiedades:
column-count
column-gap
column-rule
Texto a varias columnas con column-count
Esta propiedad nos permite dividir el texto en varias columnas. El valor de esta propiedad es un número, siendo este número el total de columnas a utilizar y… mágicamente el navegador se encargará de agrupar el texto en las columnas indicadas automáticamente!! No necesitas tener contemplado, de entrada, las columnas posibles para trasladarlo a la administración desde la que se alimenta el contenido… no tienes que recurrir a una maquetación con varias cajas para colocar el texto… sólo un div con todo el texto dentro y una regla CSS3 asociada que utilice el column-count:
View Raw Code?
Texto a tres columnas con HTML5 y CSS3
En un lugar de la Mancha, (…) verdad.
Es, pues, de saber que (…) grandeza.
View Raw Code?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
line-height: 1;
}
p {
font-size: 15px;
font-size: 1.5rem;
line-height: 1.333333334;
margin-bottom: 20px;
margin-bottom: 2rem;
text-align: justify;
}
.three-columns {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
y nada más
Texto a 3 columnas con CSS3. Más sencillo imposible.
Texto a 3 columnas con CSS3. Más sencillo imposible.
Colocando margen en nuestro texto a varias columnas con column-gap
Una vez tenemos ya el texto a varias columnas de forma extremadamente sencilla gracias a las nuevas propiedades de CSS3 es normal que querramos que exista cierto aire entre las diferentes columnas… y ahí es donde entra column-gap
El valor para nuestro column-gap será un valor en px, pt, rem, etc. Lo ideal será utilizar los rem. ¿Que no sabes utilizar esta medida? Sin problema, sólo debes consultar mi artículo sobre el uso de rem.
Cambiamos nuestro CSS de la siguiente manera:
View Raw Code?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
line-height: 1;
}
p {
font-size: 15px;
font-size: 1.5rem;
line-height: 1.333333334;
margin-bottom: 20px;
margin-bottom: 2rem;
text-align: justify;
}
.three-columns {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
-moz-column-gap: 20px; /* Firefox */
column-gap: 20px;
-webkit-column-gap: 2rem; /* Chrome, Safari, Opera */
-moz-column-gap: 2rem; /* Firefox */
column-gap: 2rem;
}
Y ya tenemos aire, de 2rem, entre las columnas:
Espacio de 2rem entre las columnas
Espacio de 2rem entre las columnas
Colocando un borde separador en nuestro texto a varias columnas con column-rule
Como ya comenté… cuando hicieron CSS3 pensaron en todo… o en casi todo… y con column-rule no hacen más que demostrarlo una vez más. ¿Queremos poner un borde entre las diferentes columnas? Para eso tenemos column-rule, una propiedad nueva que acepta, como valor, lo que utilizamos normalmente para nuestro border.
View Raw Code?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
line-height: 1;
}
p {
font-size: 15px;
font-size: 1.5rem;
line-height: 1.333333334;
margin-bottom: 20px;
margin-bottom: 2rem;
text-align: justify;
}
.three-columns {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
-moz-column-gap: 20px; /* Firefox */
column-gap: 20px;
-webkit-column-gap: 2rem; /* Chrome, Safari, Opera */
-moz-column-gap: 2rem; /* Firefox */
column-gap: 2rem;
-webkit-column-rule: 5px solid rgb(75, 180, 149) ; /* Chrome, Safari, Opera */
-moz-column-rule: 5px solid rgb(75, 180, 149) ; /* Firefox */
column-rule: 5px solid rgb(75, 180, 149) ;
-webkit-column-rule: 0.5rem solid rgb(75, 180, 149) ; /* Chrome, Safari, Opera */
-moz-column-rule: 0.5rem solid rgb(75, 180, 149) ; /* Firefox */
column-rule: 0.5rem solid rgb(75, 180, 149) ;
margin: 20px;
margin: 2rem;
}
Texto a tres columnas, con separador entre ellas. Más fácil imposible.
Texto a tres columnas, con separador entre ellas. Más fácil imposible.
Todo es más fácil con CSS3
La conclusión más evidente es que, con CSS3, todo es más fácil. El gran quebradero de cabeza que era poner un texto a varias columnas se convierte en algo extremadamente sencillo con las nuevas propiedades column-count, column-gap y column-rule.
Además, como estamos hablando de CSS3, podemos utilizar las media queries (el próximo artículo del blog las abordará) para mostrar el texto a 3 columnas en vista de PC, 2 columnas en vista de tablet y 1 columna en vista móvil… por lo que todo son bondades… bueno casi todo.
Como siempre, los navegadores tienen que implementar las propiedades de CSS3 y claro… ahí siempre hay lío. Por un lado, se tienen que utilizar los prefijos propietarios para chrome, opera, safari y firefox (-webkit -moz), algo que bueno… molesta un poco, pero se hace y listo. Por otro lado está el caso del Internet Explorer… siempre para tratar a parte. En esta ocasión, Internet Explorer soporta el uso de estas nuevas propiedades de CSS3 a partir de su versión 10, esto significa que en versión 9 y anteriores no funcionará y se mostrará todo a una columna. Para saber qué navegadores soportan las propiedades de CSS3 que quieres utilizar, tenemos la web Can I Use.
Aunque esto último pueda parecer un problema, es muy común que las webs en HTML5 utilicen frameworks CSS3 (sobre todo pensando en responsive design) como bootstrap o foundation, estos frameworks suelen requerir IE9+ y cuando se usa IE8- desde el IE se ve siempre la vista móvil (porque estos frameworks siguen la filosofía mobile first), por lo que tu web no se verá mal en IE, simplemente se verá como si fuese un móvil… aunque siempre podrás ponerle una hojas de estilos sólo para IE y mejorar la experiencia en ese ¿navegador?