Durante moitos anos, as cargas CSS foron un compoñente imprudente, aínda que necesario, na creación de esquemas de sitios web. Se o teu proxecto solicitou varias columnas, volvías para flotar . O problema con este método é que, a pesar do incrible enxeño que os creadores e desenvolvedores web mostraron na creación de esquemas complexos de sitios, os flotantes CSS nunca foron realmente destinados a ser utilizados deste xeito.
Mentres os flotantes e o posicionamento CSS son seguros de ter un lugar no deseño web durante moitos anos, novas técnicas de deseño, incluíndo CSS Grid e Flexbox, agora están dando aos diseñadores web novas formas de crear os seus esquemas de sitios. Outra nova técnica de deseño que mostra moitísimo potencial é CSS Multiple Columns.
As columnas CSS estiveron en funcionamento desde fai algúns anos, pero a falta de soporte en navegadores máis antigos (principalmente versións anteriores de Internet Explorer) mantivo a moitos profesionais da rede de usar estes estilos no seu traballo de produción.
Coa fin do soporte para as versións máis antigas do IE, algúns diseñadores web están experimentando novas opcións de deseño CSS, incluídas as Columnas CSS e atoparon que teñen moito máis control con estas novas formas do que fixeron con carrozas.
Os principios básicos das columnas CSS
Como o seu nome indica, CSS Multiple Columns (tamén coñecido como deseño multi-columna CSS3) permítelle dividir o contido nun número establecido de columnas. As propiedades CSS máis básicas que usarías son:
- reconto de columnas
- columna-brecha
Para o reconto de columnas, especifica o número de columnas que desexa. A separación da columna sería as canles ou o espazamento entre esas columnas. O navegador tomará estes valores e dividirá o contido de forma uniforme no número de columnas que especifique.
Un exemplo común de columnas múltiples de CSS na práctica sería dividir un bloque de contido de texto en varias columnas, semellante ao que vería nun artigo de xornais. Diga que tes o seguinte marcado HTML (teña en conta que, por exemplo, só estou poñendo o comezo dun parágrafo, mentres que na práctica probablemente hai varios parágrafos de contido neste marcado):
O título do artigo
Imaxina moitos parágrafos de texto aquí ...
Se escribiches estes estilos CSS:
.contento {-moz-column-count: 3; -webkit-column-count: 3; reconto de columnas: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; columna-brecha: 30 px; }Esta regra CSS dividiría a división "contido" en 3 columnas iguais cunha diferenza de 30 píxeles entre elas. Se quería dúas columnas en lugar de 3, simplemente cambiaría ese valor e o navegador calcularía as novas anchuras desas columnas para dividir o contido de xeito uniforme. Observe que primeiro usamos as propiedades prefixadas polo vendedor, seguido das declaracións non prefixadas.
Tan fácil como isto é, o uso deste xeito é cuestionable para o uso do sitio web. Si, pode dividir un monte de contido en varias columnas, pero esta pode non ser a mellor experiencia de lectura para a web, especialmente se a altura destas columnas cae por baixo do "dobro" da pantalla.
Os lectores terían que desprazarse cara arriba e abaixo para ler o contido completo. Aínda así, o principal das columnas CSS é tan sinxelo coma se vexas e pode ser usado para facer moito máis que dividir o contido dalgúns parágrafos; de feito, pode usarse para o deseño.
Deseño con columnas CSS
Digamos que ten unha páxina web cunha área de contido que ten 3 columnas de contido. Este é un deseño web moi típico e, para acadar eses 3 columnas, normalmente flotaría as divisións. Con columnas múltiples de CSS, é moito máis sinxelo.
Aquí tes un exemplo HTML:
Últimas novas
O contido viría aquí ...
Desde o noso Blog
O contido viría aquí ...
Próximos eventos
O contido viría aquí ... p>
O CSS para facer estas múltiples columnas comeza co que viches anteriormente:
.contento {-moz-column-count: 3; -webkit-column-count: 3; reconto de columnas: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; columna-brecha: 30 px; }Agora, o reto aquí é que, dado que o navegador quere dividir este contido de xeito uniforme, polo tanto, se a lonxitude de contido destas divisións é diferente, o navegador dividirá o contido dunha división individual, engadindo o inicio dunha columna e continúa noutro (pode ver isto usando este código para executar un experimento e engadir lonxitudes de contido diferentes dentro de cada división).
Isto non é o que quere. Quere que cada unha destas divisións creen unha columna distinta e, non importa o tamaño ou o tamaño do contido dunha división individual, nunca quererá dividirse. Podes conseguir isto engadindo esta liña adicional de CSS:
.content div {display: inline-block; }Isto forzará a que as divisións dentro do "contido" sigan intactas aínda que o navegador divídese en varias columnas. Aínda mellor, dado que non ofrecemos nada aquí un ancho fixo, estas columnas cambiarán automaticamente a medida que o navegador redimensiona, converténdose nunha aplicación ideal para sitios web sensibles . Con ese estilo de "bloqueo inline" no lugar, cada unha das súas 3 divisións será unha columna de contido distinta.
Usando ancho de columna
Hai outra propiedade ademais do "reconto de columnas" que pode usar e, dependendo das súas necesidades de deseño, pode realmente ser unha mellor opción para o seu sitio. Este é o "ancho da columna". Usando o mesmo marcador HTML que se mostra anteriormente, poderiamos facer isto co noso CSS:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; ancho da columna: 500 px; -moz-column-gap: 30px; -webkit-column-gap: 30px; columna-brecha: 30 px; } .content div {display: inline-block; }A forma en que funciona isto é que o navegador utiliza este "ancho de columna" como o valor máximo desta columna. Polo tanto, se a xanela do navegador ten menos de 500 píxeles de ancho, estas 3 divisións aparecerían nunha soa columna, unha das cimas doutra. Este é un deseño típico usado para esquemas móbiles / pequenos.
A medida que o ancho do navegador aumenta para ser o suficientemente grande como para encaixar en 2 columnas xunto coas lagoas de columna especificadas, o navegador irá automaticamente desde un deseño de columna único a dúas columnas. Continúa aumentando o ancho da pantalla e, finalmente, terá un deseño de 3 columnas, con cada unha das nosas 3 divisións que aparecen na súa propia columna. Unha vez máis, esta é unha boa forma de obter algúns deseños receptivos e compatibles con varios dispositivos e nin sequera necesitas usar consultas multimedia para cambiar os estilos de deseño.
Outras propiedades da columna
Ademais das propiedades cubertas aquí, tamén hai propiedades de "regra de columna", que inclúen valores de cor, estilo e ancho que lle permiten crear regras entre as columnas. Estes serían usados no canto de bordos se desexas ter algunhas liñas separando as túas columnas.
Tempo para experimentar
Actualmente, o deseño de columnas múltiples CSS está moi ben soportado. Coa prefixos, máis do 94% dos usuarios da web poderían ver estes estilos, e ese grupo sen soporte realmente sería só versións máis antigas de Internet Explorer, que talvez non estean apoiando máis.
Con este nivel de apoio agora no lugar, non hai razón para non comezar a experimentar con CSS Columns e implantar estes estilos en sitios web preparados para a produción. Pode comezar os seus experimentos usando o HTML e CSS presentado neste artigo e xogar con diferentes valores para ver o que funcionaría mellor para as necesidades de deseño do seu sitio.