Fia in protte jierren hawwe CSS floaten in lyts, yet nedich, komponint by it meitsjen fan webside-layouts. As jo ûntwerp neamde foar meardere kolommen, feroare jo nei floaten . It probleem mei dizze metoade is dat, nettsjinsteande de ûnkrêftige yngewikkens dat web-ûntwerpers / ûntwikkelers sjen litten hawwe om kompleksere sitewebsen te meitsjen, CSS-floaten nea echt wier betsjutte op dizze manier.
Wylst floaten en CSS oprjochting binne wis fan in plakje yn web-ûntwerp foar in protte jierren te kommen, wurde nije layouttechniken lykas CSS Grid en Flexbox no nije ûntwerpers oanwêzich om harren side-layouts te meitsjen. In nije nije layouttechniek dy't in soad potensjes is, is CSS Multiple Columns.
CSS-kolommen binne no al in pear jier al rûn, mar it ûntbrekken fan stipe yn âldere browsers (benammen âldere ferzjes fan Internet Explorer) hat in soad websteeën behannele troch dizze styl te brûken yn har produksjewurk.
Mei de ein fan 'e stipe foar dy âldere ferzjes fan IE binne guon webûntwerpers eksperimintearjen mei nije CSS-layoutopsjes, CSS Columns ynbegrepen, en befetsje dat se safolle mear kontrôle hawwe mei dizze nije oanwêzingen as se mei floaten hawwe.
De basisen fan CSS-kolommen
As its name suggests, CSS Multiple Columns (ek wol CSS3 mear-kolom-layout neamd) jout jo diel te meitsjen yn in ynstelde tal kolommen. De meast basale CSS-eigenskippen dy't jo brûke wolle binne:
- kolom-count
- kolom-gap
Foar kolom-getal pleatst de tal kolommen dy't jo wolle. De kolomfal soe de rinnen of ôfstân wêze tusken dy kolommen. De blêder sil dizze wearden nimme en de ynhâld sels evenigje yn it tal kolommen dy jo oanwize.
In mienskiplik foarbyld fan CSS meardere kolommen yn 'e praktyk soe wêze om in blok fan tekstynformaasje yn meardere kolommen te dielen, sa't jo sjogge yn in kranteartikel. Sizje dat jo de folgjende HTML markearje ha (note dat bygelyks bygelyks de begjin fan in paragraaf allinich begjinne, wylst yn 'e praktyk dan wierskynlik meardere paragrafen fan ynhâld wêze yn dizze markearring):
De titel fan jo artikel
Stel dan in soad teksten fan tekst ...
As jo dizze CSS-stylen skreaun hawwe:
.content {-moz-column-count: 3; -webkit-column-count: 3; kolom-count: 3; -moz-kolom-gap: 30px; -webkit-column-gap: 30px; kolom-gap: 30px; }Dit CSS-regel soe de divyzje "ynhâld" yn 3 lykweardige kolommen besparje mei in gat fan 30 piksels tusken har. As jo twa kolommen hawwe ynstee fan 3 wiene, ferfange jo gewoan dizze wearde en de browser sil de nije breedten fan dizze kolommen berekkenje om de ynhâld sels te splitsen. Tink derom dat wy de ferfangerfoarmige e-posysjes earst brûke, folge troch de net-prefiksearre deklaraasjes.
Sa maklik as dat is, it gebrûk op dizze manier is fraachteken foar webside gebrûk. Ja, jo kinne in bân fan ynhâld yndield wurde yn meardere kolommen, mar dit kin net de bêste lêsûnderfining foar it web, foaral as de hichte fan dizze kolommen ûnder de "falt" fan it skerm falt.
Lêzers soene dan omheech gean moatte om de folsleine ynhâld te lêzen. Dochs is it haad fan CSS Columns sa maklik as jo hjir sjogge, en it kin brûkt wurde om safolle mear te dwaan as allinich de ynhâld fan inkele paragrafen te splitsen - it kin, yndie, brûkt wurde foar layout.
Layout mei CSS-kolommen
Meitsje jo dat jo in webside hawwe mei in ynhâldgebiet dat 3 kolommen fan ynhâld hat. Dit is in tige typysk webside, en om dizze 3 kolommen te berikken, jo soenen normaal de divyzjes floeie, dy't yn binne. Mei CSS meardere kolommen, is it safolle makliker.
Hjir is guon sample HTML:
Latest News
Ynhâld soe hjir gean ...
Fan ús Blog
Ynhâld soe hjir gean ...
Kommende eveneminten
Ynhâld soe hjir gean ...
De CSS om dizze ferskate kolommen te meitsjen begjint mei wat jo earder sjoen hawwe:
.content {-moz-column-count: 3; -webkit-column-count: 3; kolom-count: 3; -moz-kolom-gap: 30px; -webkit-column-gap: 30px; kolom-gap: 30px; }No is de útdaging dêrtroch dat, omdat de blêder dizze ynhâld evenigens spielet, dus as de ynhâldlange fan dizze divyzjes oars is, dan sil dizze browser de ynhâld fan in yndividuele divyzje splitsje, it begjinnen fan 'e begjin oan in kolom en dan bliuwend yn in oare (jo kinne dit sjen troch dizze koade te brûken om in eksperimint te fieren en ferskillende lengte fan ynhâld yn elke divyzje te fieren)!
Dat is net wat jo wolle. Jo wolle elk fan dizze divyzjes in unike kolom meitsje en, lykas grut of lyts in yndividuele divyzje-yndieling wêze kin, jo wolle nea beslute. Jo kinne dit berikke troch dizze ien ekstra line fan CSS te tafoegje:
.content div {display: inline-block; }Dit sil de divyzjes krêft meitsje dy't binnen de "ynhâld" binne yntinsyf bliuwe, lykas de blêder dit yn meardere kolommen splitset. Noch better, om't wy hjir net in fêste breed hawwe, sille dizze kolommen automatysk feroarje wurde as de browser fertsjintwurdt, wêrtroch't se in ideaal applikaasje binne foar responsive websides . Mei dy "inline-block" styl yn plak, elk fan jo 3 divyzjes sil in ûnderskate kolom fan ynhâld wêze.
Brûk kolombreedte
Der is in oar eigendom, neist "kolom-getal", dat jo brûke kinne, en ôfhinklik fan jo oanpassingsbedriuwen, kin in feiligens wêze foar jo side. Dit is "kolombreed". Mei itselde HTML-markearring lykas earder te sjen, kinne wy dat dan mei ús CSS dwaan:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; kolom-breed: 500px; -moz-kolom-gap: 30px; -webkit-column-gap: 30px; kolom-gap: 30px; } .content div {display: inline-block; }De manier wêrop dat wurket is dat de browser dizze "kolombreedte" brûke as de maksimale wearde fan dizze kolom. As de browser-finster minder as 500 piksels breed is, sille dizze 3 divyzjes ferskine yn in single kolom, ien fan 'e topen fan in oar. Dit is in typyske ynrjochting dy't brûkt wurdt foar mobile / lytse skerm-layouts.
As de blêder breedte ferheget om grut genôch te wurden om 2 kolommen tegearre mei de oantsjutte kolomfalten te passen, sil de blêder automatysk fanút in inkele kolomblêd nei twa kolommen gean. Bliuw de skermbreedte úteinlik en úteinlik krije jo in kolom ûntwerp, mei elk fan ús 3 divyzjes werjûn yn har eigen kolom. Eartiids is dit in geweldige manier om wat reaktyf, multy-apparatefreonlike layouts te krijen, en jo moatte sels gjin media-fragen brûke om de layoutstilen te wizigjen!
Oare kolom eigenskippen
Neist de hjir beskreaune eigenskippen binne der ek eigenskippen foar "kolombehear", ynklusyf kleuren, styl, en breedwearden dy't jo regels meitsje kinne tusken jo kolommen. Dizze sille brûkt wurde ynstee fan grinzen as jo in pear linen hawwe dy't jo kolommen skiede.
Tiid om te eksperimintearjen
Op dit stuit is CSS Multiple Column Layout hiel goed stipe. Mei prefikses kinne mear dan 94% fan 'e web brûkers dizze stilen sjen sjogge, en dat net stipe groep soe wier gewoan al folle âldere ferzjes fan Internet Explorer wêze, wêrtroch jo net mear stipe wurde kinne.
Mei dit nivo fan stipe no op it plak, is der gjin reden om net te begripen mei CSS-kolommen te eksperiminearjen en dizze stilen yn te setten yn produksjonele websiden. Jo kinne jo eksperiminten begjinne mei it brûken fan de HTML en CSS yn dit artikel presintearre en spielje mei ferskillende wearden om te sjen wat jo it bêste dwaan kinne foar jo webstee.