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

monitores-Samsung-M8

Samsung M8: un monitor que es también smart tv y mucho más…

Hay quien usa tres monitores a la vez para trabajar. El segmento de los monitores de PC avanza rápidamente. Hace solo unos años la tendencia era adquirir monitores curvos, pero hoy la dinámica vuelve al llano y, por supuesto, a la extrema delgadez. No obstante, Samsung va más allá con su nuevo monitor Samsung M8.

Huawei-P50-Pro

Las mejores aplicaciones para disfrutar el nuevo Huawei P50 Pro

Huawei ha anunciado los nuevos smartphones Huawei P50 Pro y P50 Pocket, las últimas incorporaciones a su icónica línea de productos de la Serie P. Con cada lanzamiento de la Serie P, la marca china sigue mostrando toda su capacidad innovadora ya sea a nivel de rendimiento y especificaciones de los terminales como por todo

Poly-Sync-10

Poly lanza un nuevo altavoz inteligente para el trabajo híbrido: Sync 10

Poly ha anunciado recientemente el lanzamiento del Poly Sync 10, la última incorporación a su conocida familia de altavoces inteligentes y manos libres, Poly Sync. El nuevo dispositivo responde a las necesidades emergentes de empresas y profesionales, que tienen que desenvolverse de forma eficiente en un contexto de trabajo cada vez más híbrido, flexible y

CCleaner 2022

Novedades importantes con la herramienta CCleaner

Hoy vamos a hablar de CCleaner, una herramienta que cuenta con cientos de millones de usuarios domésticos y empresariales en todo el mundo que trabaja para optimizar el rendimiento de los equipos, mejorar la seguridad de los mismos y prolongar la vida útil de los ordenadores.   CCleaner es el rey del mantenimiento en lo

resistencia-Cat-phones

Cat phones, una década brillando con los dispositivos más resistentes

Hay marcas que huyen del mainstream y son casos de éxito. Cat phones es una de esas compañías que se ha alejado de lo convencional para centrarse en otras necesidades y convertirse así en grandes expertos en la resistencia de sus dispositivos. De la mano de Bullitt Group, la firma celebra 10 años de trayectoria