Exportar (0) Imprimir
Expandir todo
Expandir Minimizar

Internet Explorer 10. Diseño multicolumna en CSS3

©Jaime Peña Tresancos, 2013

Profesional independiente en el sector Servicios y tecnología de la información

Microsoft MVP

Twitter: @jpt219

LinkedIn: es.linkedin.com/pub/jaime-peña-tresancos/28/677/696


El uso de hojas de estilo en cascada en su versión 3 (CSS3) nos facilita sustancialmente el trabajo con multicolumna en los documentos HTML. El uso de documentos con multicolumna permite una mejor lectura de aquellas partes de textos amplios; el presente artículo se enmarca en el ámbito de la programación de interface de usuario para la implementación de aplicaciones Web.

En cuanto a la edición del código podremos emplear Visual Studio, WebMatrix, el Bloc de notas de Windows, o cualquier otro editor de código HTML y CSS. No es adecuado un generador de código que trabaje solamente en modo WYSIWYG –modo diseño-, deberá ser uno que nos permita tener el control total y la escritura directa de las fuentes de HTML y CSS.

El código aquí expuesto es totalmente compatible con Microsoft Internet Explorer 10, el resto de los exploradores del mercado o bien precisan de códigos específicos del vendedor, como webkit, o bien no contemplan todas las capacidades de trabajo aquí expuestas, fundamentalmente en lo relativo a los párrafos multicolumna.

Concretamente, en el presente artículo trataremos:

  • Formateo de secciones en multicolumna con CSS3
  • Espaciados y separadores entre columnas
  • Inserción de imágenes en columnas
  • Textos multicolumna

Fijar el ancho y el número de columnas

Mediante CSS3 disponemos de tres propiedades que nos permiten fijar una presentación multicolumna de los contenidos de una sección:

  • Fijando directamente cuántas columnas deseamos sean presentadas
  • Fijando un ancho de columna, de modo que Internet Explorer divida el área disponible en columnas que cumplan la condición
  • Fijando el número y ancho de columna, de forma que debería marcarse un número de columnas de un ancho determinado. En la práctica Internet Explorer acata el número de columnas preferentemente

    Propiedad

    Descripción

    column-count

    Número de columnas

    column-witdh

    Ancho de cada columna

    Columns

    Ambos valores


Si sólo fijamos en número de columnas, se repartirá el texto homogéneamente en horizontal, véase por ejemplo la cuarta y quinta de las figuras, pero no siempre ocurre así de una manera totalmente uniforme y puede que la última sea notoriamente menor, para ajustarse a párrafos, imágenes, … o bien no llegue a crearse si el texto es escaso.

Si fijamos sólo el ancho, se crearán automáticamente las columnas máximas posibles según el ancho total de la ventana de Internet Explorer, descontando los bordes y el espaciado entre columnas.

Si se fijan los dos valores de número de columnas y ancho simultáneamente, teóricamente el ajuste sería tratando de acomodar ambos valores. En la práctica pesa más el valor del número de columnas.

En cuanto a la distribución del texto, Internet Explorer trata de mantener al límite las imposiciones de las reglas de número de columnas.

Listado 1: Ejemplo de texto multicolumna mediante CSS3.

<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Multicolumnas en CSS3. Ej. column-count</title>
    <style>
        div.columnas {
            /* Definición de las columnas */
            column-count: 3;
        }
    </style>
</head>
<body>
    <h2>Don Quijote</h2>
    <div class='columnas'>
        <h3>Y con esto,</h3>
entró en el aposento, y todos tras él, y hallaron a don Quijote 
en el más extraño traje del mundo. Estaba en camisa, la cual no 
era nada cumplida, que por delante le acabase de cubrir los muslos, 
y por detrás tenía seis dedos menos; las piernas eran muy largas y 
flacas, llenas de vello y no nada limpias; tenía en la cabeza un 
bonetillo colorado, grasiento, que era del ventero.<br />
En el brazo 
izquierdo tenía revuelta la manta de la cama, con quien tenía ojeriza 
Sancho, y él sabía bien el porqué, y en la derecha, desenvainada 
la espada, con la cual daba cuchilladas a todas partes, diciendo 
palabras como si verdaderamente estuviera peleando con algún gigante.<br />
Y es lo bueno que no tenía los ojos abiertos, porque estaba durmiendo 
y soñando que estaba en batalla con el gigante; que fue tan intensa 
la imaginación de la aventura que iba a fenecer, que le hizo soñar 
que ya había llegado al reino de Micomicón, y que ya estaba en la 
pelea con su enemigo. Y había dado tantas cuchilladas en los cueros, 
creyendo que las daba en el gigante, que todo el aposento estaba 
lleno de vino.
    </div>
</body>
</html>

Dn126141.B139D1B6F01C38F7211133F036FD6433(es-es,MSDN.10).png


Espaciado entre columnas

Se definen los espaciados personalizados mediante la propiedad column-gap que tiene tres valores predefinidos: inherit, initial y normal –equivalente en la práctica a 1em, también es el valor por defecto- y puede darse en unidades de medida estándar como px, em, …

En el ejemplo que sigue hemos realizado una mínima modificación al anterior, introduciendo un espaciado mayor entre columnas, de valor 3em.

Listado 2: Definición de un ancho de columna mediante CSS3.

    <style>
        div.columnas {
            /* Definición de las columnas */
            column-count: 3;
            /* Espaciado entre columnas */
            column-gap: 3em;
        }
    </style>

Dn126141.959728A53806B53A37DC8F80AAC0DDCB(es-es,MSDN.10).png


Propiedad column-rule

En el espacio entre columnas cabe la posibilidad de disponer un separador –column rule- en forma de línea de apariencia personalizable mediante las propiedades descritas seguidamente en la tabla adjunta.

Propiedad

Descripción

column-rule-style

Estilo del separador. Acepta los mismos valores que para los estilos de bordes –propiedad border-style-

column-rule-width

Ancho del separador

column-rule-color

Color del separador

column-rule

Los tres valores


La propiedad column-rule es independiente de la propiedad column-gap, de manera que si la primera es mayor que la segunda, se sobrepondrá sobre el texto de las columnas, no quedará restringida a la separación dada entre ellas, lo que puede ser un inconveniente o una oportunidad de crear efectos atractivos.

Listado 3: Inclusión de separadores entre columnas en CSS3.

<!DOCTYPE html>
 
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Multicolumnas en CSS3. Ej. 0</title>
    <style>
        div.columnas {
            /* Definición de las columnas */
            column-count: 3;
            /* Espaciado entre columnas */
            column-gap: 1.5em;
            /* Un poco de adorno del separador */
            column-rule-style: solid;
            column-rule-width: 2px;
            column-rule-color: #ff0000;
            /* Estilos complementarios */
            border: 1px solid;
            border-radius: 10px 10px;
            padding: 20px 20px;
            background-color: #f5dc96;
            color: #0000aa;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h2>Don Quijote</h2>
    <div class='columnas'>
        <h3>Y con esto,</h3>
entró en el aposento, y todos tras él, y hallaron a don Quijote 
en el más extraño traje del mundo. Estaba en camisa, la cual no 
era nada cumplida, que por delante le acabase de cubrir los muslos, 
y por detrás tenía seis dedos menos; las piernas eran muy largas y 
flacas, llenas de vello y no nada limpias; tenía en la cabeza un 
bonetillo colorado, grasiento, que era del ventero.<br />
En el brazo 
izquierdo tenía revuelta la manta de la cama, con quien tenía ojeriza 
Sancho, y él sabía bien el porqué, y en la derecha, desenvainada 
la espada, con la cual daba cuchilladas a todas partes, diciendo 
palabras como si verdaderamente estuviera peleando con algún gigante.<br />
Y es lo bueno que no tenía los ojos abiertos, porque estaba durmiendo 
y soñando que estaba en batalla con el gigante; que fue tan intensa 
la imaginación de la aventura que iba a fenecer, que le hizo soñar 
que ya había llegado al reino de Micomicón, y que ya estaba en la 
pelea con su enemigo. Y había dado tantas cuchilladas en los cueros, 
creyendo que las daba en el gigante, que todo el aposento estaba 
lleno de vino.
    </div>
</body>
</html>

Dn126141.14C15C2FFFC3CB41681EE4C4C1A4AB33(es-es,MSDN.10).png


Inserción de imágenes

Insertar una imagen en un texto multicolumnas se realiza exactamente lo mismo que en un texto normal de una única columna.

Pero podemos encontrarnos con un pequeño y desagradable tropiezo, si la imagen es más ancha que la columna, será truncada al ancho de la columna. La buena noticia es que la solución es simple y además más sutil que lo que se pensaría de antemano.

Mediante la propiedad max-width asociada a la etiqueta de imagen, como ilustramos en el ejemplo que sigue, ajustaremos el tamaño de la imagen a la proporción deseada del ancho de la columna –usualmente nos interesará el 100%-. Pero, además, al redimensionar la ventana de Internet Explorer y reacomodarse las columnas, también se readaptará automáticamente la imagen a la nueva situación, como se aprecia en las figuras adjuntas.

Listado 4: Inserción de imágenes en columnas CSS3.

<!DOCTYPE html>
 
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Multicolumnas en CSS3. Ej. 1</title>
    <style>
        div.columnas {
            /* Definición de las columnas */
            column-count: 3;
            /* Espaciado entre columnas */
            column-gap: 1.5em;
            /* Un poco de adorno del separador */
            column-rule-style: solid;
            column-rule-width: 2px;
            column-rule-color: #ff0000;
            /* Estilos complementarios */
            border: 1px solid;
            border-radius: 10px 10px;
            padding: 20px 20px;
            background-color: #f5dc96;
            color: #0000aa;
            font-style: italic;
        }
 
        .figura {
            max-width: 100%;
        }
    </style>
</head>
<body>
    <h2>El mensajero del miedo</h2>
    <div class='columnas'>
Mientras todo el país sigue la campaña electoral que lleva a la elección 
del candidato a la presidencia, un militar lucha contra el tiempo para poner 
al descubierto una conspiración que haría tambalearse la democracia.<br />
 
<img class="figura" alt="Cartel" src="el-mensajero-del-miedo.jpg"><br />
 
El comandante del Ejército de Tierra de Estados Unidos Bennett Marco 
(Washington) no consigue conciliar el sueño, pero tampoco quiere hacerlo. 
Marco se pasa la vida dando conferencias acerca de la emboscada que sufrió 
su pelotón en el desierto kuwaití y de la heroicidad del sargento Raymond 
Shaw (Schreiber) que recibió la Medalla de Honor por salvar a los hombres 
de Marco. Pero, de noche, las imágenes que Marco recuerda de ese fatídico 
día se convierten en terribles y siniestras pesadillas. Marco empieza a 
preguntarse si los dos soldados que murieron en el fuego cruzado no 
sufrieron una suerte más oscura de la que indican los expedientes oficiales 
y si Shaw es realmente el héroe glorioso al que todos aclaman.<br />
 
Empujado por su madre, la controvertida senadora Eleanor Prentiss Shaw 
(Streep), Shaw se convierte en candidato a la vicepresidencia y Marco no 
tiene más remedio que hacer caso a sus crecientes sospechas. A pesar de los 
obstáculos - el ejército empieza a cuestionar su cordura y la seguridad 
alrededor de Shaw es cada vez mayor - Marco se lanza a una carrera contra 
el tiempo para demostrar la asombrosa e inimaginable verdad antes de que 
puedan hacerse con la Casa Blanca
    </div>
</body>
</html>

Dn126141.982DFF6D34EEA749032048495E884005(es-es,MSDN.10).png

Dn126141.F1A54DDC5FEFB8959B49A9600F67D877(es-es,MSDN.10).png


Textos multicolumna

No hay un modo versátil de manejar textos que abarquen múltiples columnas, sólo disponemos de la propiedad column-span.

La propiedad column-span sólo puede tomar los valores none o all, de manera que o bien un texto determinado ocupa una columna o bien las ocupa todas. Obsérvese el listado y la figura que siguen, en dónde se ha aplicado el estilo de multicolumna a un párrafo con los créditos de los actores.

Listado 5: Un área de texto multicolumna en CSS3.


<!DOCTYPE html>
 
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Multicolumnas en CSS3. Ej. 2</title>
    <style>
        div.columnas {
            /* Definición de las columnas */
            column-count: 4;
            /* Espaciado entre columnas */
            column-gap: 1.5em;
            /* Un poco de adorno del separador */
            column-rule-style: solid;
            column-rule-width: 2px;
            column-rule-color: #ff0000;
            /* Estilos complementarios */
            border: 1px solid;
            border-radius: 10px 10px;
            padding: 20px 20px;
            background-color: #f5dc96;
            color: #0000aa;
            font-style: italic;
        }
 
        .figura {
            max-width: 100%;
        }
        .actores {
            column-span: all;
            border: 1px solid;
            background-color: #f7eded;
            color: #000000;
            font-style: normal;
            font-size: x-large;
            text-align: center;
        }
        .titulo {
            text-shadow: 2px 2px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1 class="titulo">El mensajero del miedo</h1>
    <div class='columnas'>
Mientras todo el país sigue la campaña electoral que lleva a la elección 
del candidato a la presidencia, un militar lucha contra el tiempo para poner 
al descubierto una conspiración que haría tambalearse la democracia.<br />
 
<img class="figura" alt="Cartel" src="el-mensajero-del-miedo.jpg"><br />
        
El comandante del Ejército de Tierra de Estados Unidos Bennett Marco 
(Washington) no consigue conciliar el sueño, pero tampoco quiere hacerlo. 
Marco se pasa la vida dando conferencias acerca de la emboscada que sufrió 
su pelotón en el desierto kuwaití y de la heroicidad del sargento Raymond 
Shaw (Schreiber) que recibió la Medalla de Honor por salvar a los hombres 
de Marco. Pero, de noche, las imágenes que Marco recuerda de ese fatídico 
día se convierten en terribles y siniestras pesadillas.
        
<p class="actores">Meryl Streep & Denzel Washington</p>
        
Marco empieza a 
preguntarse si los dos soldados que murieron en el fuego cruzado no 
sufrieron una suerte más oscura de la que indican los expedientes oficiales 
y si Shaw es realmente el héroe glorioso al que todos aclaman.<br />
Empujado por su madre, la controvertida senadora Eleanor Prentiss Shaw 
(Streep), Shaw se convierte en candidato a la vicepresidencia y Marco no 
tiene más remedio que hacer caso a sus crecientes sospechas. A pesar de los 
obstáculos - el ejército empieza a cuestionar su cordura y la seguridad 
alrededor de Shaw es cada vez mayor - Marco se lanza a una carrera contra 
el tiempo para demostrar la asombrosa e inimaginable verdad antes de que 
puedan hacerse con la Casa Blanca
    </div>
</body>
</html>

Dn126141.4CA42A41A172B4E73CEA281F79CA1952(es-es,MSDN.10).png


Esperamos que lo aquí expuesto les haya servido de ayuda en su trabajo y no dejen de preguntar cualquier duda que les pudiese surgir. Hasta la próxima, tengan unas provechosas sesiones de programación.


También vea:

Guía de Internet Explorer 10 para desarrolladores (Windows)


©Jaime Peña Tresancos, 2013

Twitter: @jpt219

LinkedIn: http://es.linkedin.com/pub/jaime-peña-tresancos/28/677/696es.linkedin.com/pub/jaime-peña-tresancos/28/677/696


Mostrar:
© 2014 Microsoft