Cómo y por qué usar columnas CSS en lugar de flotadores para diseños de páginas web

Cómo y por qué usar columnas CSS en lugar de flotadores para diseños de páginas web

Cómo y por qué usar columnas CSS en lugar de flotadores para diseños de páginas web

VALORACIÓN DEL ARTÍCULO:
5/5


Durante muchos años, los flotadores CSS han sido un componente exigente, aunque necesario, en la creación de diseños de sitios web. Si tu diseño requería múltiples columnas, te convertiste en flotadores. El problema con este método es que, a pesar del increíble ingenio que los diseñadores/desarrolladores web han demostrado en la creación de complejos diseños de sitios, los flotadores CSS nunca fueron diseñados para ser usados de esta manera.

Mientras que los flotadores y el posicionamiento CSS seguramente tendrán un lugar en el diseño web durante muchos años, las nuevas técnicas de diseño, incluyendo CSS Grid y Flexbox, ahora están dando a los diseñadores web nuevas formas de crear sus diseños de sitios. Otra nueva técnica de diseño que muestra mucho potencial es CSS Multiple Columns.

Las Columnas CSS existen desde hace algunos años, pero la falta de soporte en navegadores antiguos (principalmente versiones antiguas de Internet Explorer) ha impedido que muchos profesionales de la web utilicen estos estilos en su trabajo de producción.

Con el fin del soporte para las versiones anteriores de IE, algunos diseñadores web están experimentando ahora con nuevas opciones de diseño de CSS, incluidas las Columnas CSS, y descubriendo que tienen mucho más control con estos nuevos enfoques que con los flotadores.

Los fundamentos de las columnas CSS

Como su nombre indica, CSS Multiple Columns (también conocido como CSS3 multi-column layout) le permite dividir el contenido en un número determinado de columnas. Las propiedades CSS más básicas que usted usaría son:

  • recuento de columnas
  • distancia entre columnas

Para el recuento de columnas, especifique el número de columnas que desee. El hueco de la columna serían los canales o el espaciamiento entre esas columnas. El navegador tomará estos valores y dividirá el contenido en partes iguales en el número de columnas que usted especifique.

Un ejemplo común de CSS con múltiples columnas en la práctica sería dividir un bloque de contenido de texto en múltiples columnas, similar a lo que se ve en un periódico. Supongamos que tiene la siguiente marcación HTML (tenga en cuenta que, por ejemplo, sólo estoy poniendo el comienzo de un párrafo, mientras que en la práctica es probable que haya varios párrafos de contenido en esta marcación):

Si entonces escribiste estos estilos CSS:

.content {-moz-columna-cantidad: 3;-webkit-columna-contar: 3;recuento de columnas: 3;-moz-columna-gap: 30px;-webkit-columna-gap: 30px;column-gap: 30px;}

Esta regla CSS dividiría la división de «contenido» en 3 columnas iguales con un espacio de 30 píxeles entre ellas. Si usted quisiera dos columnas en lugar de 3, simplemente cambiaría ese valor y el navegador calcularía los nuevos anchos de esas columnas para dividir el contenido uniformemente. Observe que primero utilizamos las propiedades prefijadas por el vendedor, seguidas de las declaraciones no prefijadas.

Tan fácil como esto es, su uso de esta manera es cuestionable para el uso del sitio web. Sí, puede dividir un montón de contenido en varias columnas, pero esta puede no ser la mejor experiencia de lectura para la Web, especialmente si la altura de estas columnas cae por debajo del «pliegue» de la pantalla.

Los lectores tendrían que desplazarse hacia arriba y hacia abajo para leer el contenido completo. Aún así, el principio de CSS Columns es tan fácil como se ve aquí, y puede ser usado para hacer mucho más que dividir el contenido de algunos párrafos – de hecho, puede ser usado para la maquetación.

Diseño con columnas CSS

Diga que tiene una página web con un área de contenido que tiene 3 columnas de contenido. Este es un diseño muy típico del sitio web, y para lograr esas 3 columnas, normalmente flotarían las divisiones que están dentro. Con las múltiples columnas CSS, es mucho más fácil.

Algunos ejemplos de HTML:

Usando Ancho de Columna

Hay otra propiedad además de «column-count» que puede utilizar, y dependiendo de sus necesidades de diseño, puede ser una mejor opción para su sitio. Esto es «ancho de columna». Usando la misma marcación HTML que se mostró anteriormente, podríamos hacerlo con nuestro CSS:

La forma en que esto funciona es que el navegador utiliza este «ancho de columna» como el valor máximo de esa columna. Así que si la ventana del navegador tiene menos de 500 píxeles de ancho, estas 3 divisiones aparecerán en una sola columna, una de las partes superiores de otra. Este es un diseño típico usado para diseños de pantallas móviles/pequeñas.

A medida que el ancho del navegador aumenta hasta ser lo suficientemente grande como para que quepan 2 columnas junto con los espacios entre columnas especificados, el navegador pasará automáticamente de un diseño de una sola columna a dos columnas. Sigue aumentando el ancho de la pantalla y eventualmente, obtendrás un diseño de 3 columnas, con cada una de nuestras 3 divisiones mostradas en su propia columna. Una vez más, esta es una gran manera de obtener algunos diseños sensibles y amigables para múltiples dispositivos, y ni siquiera necesita usar consultas multimedia para cambiar los estilos de diseño.

Otras propiedades de la columna

Además de las propiedades cubiertas aquí, también hay propiedades para la «regla de columna», incluyendo los valores de color, estilo y ancho que le permiten crear reglas entre sus columnas. Éstos se utilizarían en lugar de los bordes si desea tener algunas líneas que separen las columnas.

Tiempo para experimentar

Actualmente, CSS Multiple Column Layout está muy bien soportado. Con prefijos, más del 94% de los usuarios de la web podrían ver estos estilos, y ese grupo sin soporte sería en realidad sólo versiones mucho más antiguas de Internet Explorer, que de todos modos ya no son compatibles.

Con este nivel de soporte ya establecido, no hay razón para no empezar a experimentar con Columnas CSS y desplegar estos estilos en sitios web listos para producción. Puede iniciar sus experimentos utilizando el HTML y CSS que se presentan en este documento y jugar con diferentes valores para ver qué es lo que mejor se adapta a las necesidades de diseño de su sitio.

Deja un comentario

TAMBIÉN TE INTERESA

skyshowtime

Una nueva plataforma de streaming se presenta en Europa: llega SkyShowtime

Llega a Europa SkyShowtime para sumarse a la importante oferta que tienen los consumidores en sus televisiones inteligentes. Netflix, Prime Video, HBO Max, Disney+, Dazon… y ahora este nuevo servicio de streaming que se ha presentado recientemente en Europa.   Por el momento llegará primero a los países nórdicos. SkyShowtime se estrena en Dinamarca, Finlandia,

desaparece-el-notch-del-iphone-14-pro

El precio del iPhone 14, motivo clave en la caída de su demanda

Estamos en un momento de inflación disparada y la situación económica de alza de precios está mermando la capacidad de consumo de las familias. Se nota en todo, en el ocio, la cesta de la compra y también la adquisición de tecnología. Además nos encontramos a escasos meses de picos de consumo como el Black

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,