Durant molts anys, els flotadors de CSS han estat un component important però necessari per crear dissenys de llocs web. Si el vostre disseny us demanava diverses columnes, heu tornat a carrosses . El problema amb aquest mètode és que, tot i l'increïble enginy que els dissenyadors / desenvolupadors web han demostrat en la creació de dissenys complexos del lloc, els flotadors CSS mai no estaven destinats a ser utilitzats d'aquesta manera.
Mentre que els flotadors i el posicionament CSS asseguren tenir un lloc en el disseny web durant molts anys, noves tècniques de disseny, com ara CSS Grid i Flexbox, donen als dissenyadors web noves maneres de crear els seus dissenys de llocs. Una altra tècnica de disseny nou que mostra un gran potencial és CSS Multiple Columns.
Les columnes CSS han existit des de fa uns anys, però la manca de suport en navegadors antics (principalment versions anteriors d'Internet Explorer) han fet que molts professionals de la xarxa no utilitzin aquests estils en el seu treball de producció.
Amb el final del suport per a les versions anteriors d'IE, alguns dissenyadors web estan experimentant amb noves opcions de disseny de CSS, incloent columnes CSS i trobant que tenen molt més control amb aquests nous enfocaments que amb flotadors.
Els fonaments de les columnes CSS
Com el seu nom indica, les columnes Múltiples CSS (també conegudes com a disposició de columnes CSS3) us permeten dividir el contingut en un nombre determinat de columnes. Les propietats CSS més bàsiques que utilitzareu són:
- recompte de columnes
- columna-bretxa
Per al recompte de columnes, especifiqueu el nombre de columnes que voleu. El buit de columna seria les canelles o l'espai entre aquestes columnes. El navegador prendrà aquests valors i dividirà el contingut de forma uniforme en el nombre de columnes que especifiqueu.
Un exemple comú de diverses columnes CSS en la pràctica seria dividir un bloc de contingut de text en diverses columnes, similar al que veieu en un article de diari. Suposem que teniu el següent codi HTML (tingueu en compte que, per exemple, només estic començant un paràgraf, mentre que a la pràctica hi ha diversos paràgrafs de contingut en aquest marc):
L'encapçalament del vostre article
Imagineu aquí molts paràgrafs de text ...
Si després escriviu aquests estils CSS:
.contingut {-moz-column-count: 3; -webkit-column-count: 3; recompte de columnes: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; columna-brecha: 30 px; }Aquesta regla CSS dividiria la divisió "contingut" en 3 columnes iguals amb un espai de 30 píxels entre elles. Si volíeu dues columnes en comptes de 3, simplement canviaria aquest valor i el navegador calcularia les noves amples d'aquestes columnes per dividir el contingut de manera uniforme. Tingueu en compte que primer fem servir les propietats prefixades per venedor, seguit de les declaracions no prefixades.
Tan fàcil com això és, el seu ús d'aquesta manera és qüestionable per a l'ús del lloc web. Sí, podeu dividir un munt de contingut en diverses columnes, però aquesta pot ser que no sigui la millor experiència de lectura per a la web, especialment si l'alçada d'aquestes columnes cau per sota del "plec" de la pantalla.
Els lectors haurien de desplaçar-se cap amunt i cap avall per llegir el contingut complet. Tot i així, el principal de les columnes CSS és tan fàcil com es veu aquí, i es pot utilitzar per fer molt més que simplement dividir el contingut d'alguns paràgrafs; de fet, es pot utilitzar per al disseny.
Disseny amb columnes CSS
Digueu que teniu una pàgina web amb una àrea de contingut que té 3 columnes de contingut. Aquest és un disseny web molt típic i, per aconseguir aquestes 3 columnes, normalment flotarà les divisions que hi ha. Amb columnes múltiples de CSS, és molt més fàcil.
Aquí teniu alguns exemples d'HTML:
Últimes notícies
El contingut aniria aquí ...
Des del nostre blog
El contingut aniria aquí ...
Propers esdeveniments
El contingut aniria aquí ... p>
El CSS per fer que aquestes columnes múltiples comencin pel que heu vist anteriorment:
.contingut {-moz-column-count: 3; -webkit-column-count: 3; recompte de columnes: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; columna-brecha: 30 px; }Ara, el repte és que, atès que el navegador vol dividir aquest contingut de forma uniforme, de manera que si la longitud del contingut d'aquestes divisions és diferent, aquest navegador dividirà el contingut d'una divisió individual, afegint-ne l'inici a una columna i i continuareu en un altre (podeu veure-ho usant aquest codi per executar una prova i afegir longituds de contingut diferents a cada divisió).
Això no és el que vols. Voleu que cadascuna d'aquestes divisions creï una columna diferent i, no importa el gran o petit contingut d'una divisió individual, mai no vulgueu que es divideixi. Podeu aconseguir-ho afegint aquesta línia addicional de CSS:
.content div {display: inline-block; }Això obligarà a aquestes divisions que estan dins del "contingut" a romandre intactes fins i tot quan el navegador divideix això en diverses columnes. Fins i tot millor, ja que no vam donar res aquí un ample fix, aquestes columnes canviaran la mida automàticament a mesura que es redimensiona el navegador, fent-les una aplicació ideal per a llocs web responsables . Amb aquest estil "bloc inline" al lloc, cadascuna de les 3 divisions serà una columna de contingut diferent.
Ús de l'amplada de columna
Hi ha una altra propietat a més del "recompte de columnes" que podeu utilitzar, i depenent de les vostres necessitats de disseny, en realitat pot ser una millor opció per al vostre lloc. Es tracta de "amplada de columna". Usant el mateix marcat HTML com es mostra anteriorment, podríem fer això amb el nostre CSS:
.contingut {-moz-column-width: 500px; -webkit-column-width: 500px; ample de columna: 500 px; -moz-column-gap: 30px; -webkit-column-gap: 30px; columna-brecha: 30 px; } .content div {display: inline-block; }La forma en què això funciona és que el navegador utilitza aquest "ample de columna" com el valor màxim d'aquesta columna. De manera que si la finestra del navegador té menys de 500 píxels d'amplada, aquestes 3 divisions apareixerien en una única columna, una de les tapes d'una altra. Es tracta d'un disseny típic utilitzat per a dispositius mòbils / petits.
A mesura que l'amplada del navegador augmenta per ser suficientment gran com per adaptar-se a 2 columnes, juntament amb els buits de columnes especificats, el navegador anirà automàticament des d'un sol disseny de columna fins a dues columnes. Segueix augmentant l'amplada de la pantalla i, finalment, obtindrà un disseny de 3 columnes, amb cadascuna de les nostres 3 divisions que es mostren a la seva pròpia columna. Una vegada més, aquesta és una manera fantàstica d'obtenir uns dissenys amigables i receptius de múltiples dispositius , i ni tan sols haureu d'utilitzar consultes multimèdia per canviar els estils de disseny.
Altres propietats de la columna
A més de les propietats aquí coberts, també hi ha propietats de "columna-regla", inclosos els valors de color, estil i amplada que us permeten crear regles entre les columnes. Aquests s'utilitzaran en comptes de fronteres si voleu tenir algunes línies que separen les columnes.
Temps per experimentar
Actualment, el disseny de columnes múltiples de CSS està molt bé compatible. Amb els prefixos, més del 94% dels usuaris de la web podrien veure aquests estils, i aquest grup no compatible realment seria versions molt més antigues d'Internet Explorer, que de totes maneres no podreu donar suport.
Amb aquest nivell de suport ara mateix, no hi ha cap motiu per no començar a experimentar amb columnes CSS i implementar aquests estils en llocs web preparats per a la producció. Podeu començar els vostres experiments amb l'HTML i CSS que es presenten en aquest article i jugar amb diferents valors per veure què funcionaria millor per a les necessitats de disseny del vostre lloc.