CSS-vlotte is al jare lank 'n fyn, maar noodsaaklike komponent in die skep van webbladuitlegte. As jou ontwerp vir verskeie kolomme geroep het, het jy na vlotte gedraai . Die probleem met hierdie metode is dat, ten spyte van die ongelooflike vindingrykheid wat webontwerpers / ontwikkelaars het getoon in die skep van komplekse webtuiste-uitlegte, was CSS-vlotte nooit regtig bedoel om op hierdie manier gebruik te word nie.
Terwyl dryf- en CSS-posisionering al jare lank 'n plek in webontwerp sal hê, bied nuwer ontwerptegnieke soos CSS Grid en Flexbox nou webontwerpers nuwe maniere om hul webtuiste-uitlegte te skep. Nog 'n nuwe uitleg tegniek wat baie potensiaal toon, is CSS Multiple Columns.
CSS-kolomme is al vir 'n paar jaar lank, maar gebrek aan ondersteuning in ouer blaaiers (hoofsaaklik ouer weergawes van Internet Explorer) het baie webprofessionales van hierdie style in hul produksiewerk gebruik.
Met die einde van die ondersteuning vir die ouer weergawes van IE eksperimenteer sommige webontwerpers nou met nuwe CSS-uitlegopsies, CSS-kolomme ingesluit, en vind dat hulle soveel meer beheer het met hierdie nuwe benaderings as wat hulle met vlotte gedoen het.
Die basiese beginsels van CSS-kolomme
Soos sy naam suggereer, kan CSS Multiple Columns (ook bekend as CSS3 multi-kolom uitleg) u inhoud verdeel in 'n aantal kolomme. Die mees basiese CSS eienskappe wat jy sou gebruik, is:
- kolom-telling
- kolom-gaping
Vir kolom telling, spesifiseer jy die aantal kolomme wat jy wil hê. Die kolom gaping sal die geute of spasiëring tussen daardie kolomme wees. Die leser sal hierdie waardes neem en die inhoud eweredig verdeel in die aantal kolomme wat u spesifiseer.
'N Algemene voorbeeld van CSS-veelvuldige kolomme in die praktyk sou wees om 'n blok teksinhoud in verskeie kolomme te verdeel, soortgelyk aan wat jy in 'n koerantartikel sou sien. Sê jy het die volgende HTML-opmerkings (let daarop dat ek byvoorbeeld eers die begin van een paragraaf begin, terwyl dit in die praktyk waarskynlik verskeie paragrawe van inhoud in hierdie opmaak sal wees):
Die opskrif van jou artikel
Verbeel jou baie paragrawe van teks hier ...
As jy dan hierdie CSS-style geskryf het:
. inhoud {-moz-kolom-telling: 3; -webkit-kolom telling: 3; kolom telling: 3; -moz-kolom-gaping: 30px; -webkit-kolom-gaping: 30px; kolom gaping: 30px; }Hierdie CSS reël sou die afdeling "inhoud" verdeel in 3 gelyke kolomme met 'n gaping van 30 pixels tussen hulle. As jy twee kolomme in plaas van 3 wou hê, sou jy daardie waarde net verander en die leser sal die nuwe breedtes van daardie kolomme bereken om die inhoud eweredig te verdeel. Let daarop dat ons eers die eiendomsverkoper-voorvoeglike eiendomme gebruik, gevolg deur die nie-voorgedefinieerde verklarings.
So maklik soos dit is, is die gebruik daarvan op hierdie manier bevraagtekenbaar vir webwerfgebruik. Ja, jy kan 'n klomp inhoud in verskeie kolomme verdeel, maar dit mag nie die beste leeservaring vir die web wees nie, veral as die hoogte van hierdie kolomme onder die "vou" van die skerm val.
Lesers sal dan op en af moet rol om die volledige inhoud te lees. Tog is die hoof van CSS-kolomme so maklik soos jy hier sien, en dit kan gebruik word om soveel meer te doen as om die inhoud van sommige paragrawe te verdeel - dit kan inderdaad gebruik word vir uitleg.
Uitleg met CSS-kolomme
Sê dat jy 'n webblad het met 'n inhouds area wat 3 kolomme inhoud het. Dit is 'n baie tipiese webwerf uitleg, en om daardie 3 kolomme te behaal, sal jy normaalweg die afdelings verdeel. In CSS-veelvuldige kolomme is dit soveel makliker.
Hier is 'n paar voorbeeld HTML:
Jongste Nuus
Inhoud sal hierheen gaan ...
Van ons blog
Inhoud sal hierheen gaan ...
Komende gebeure
Inhoud sal hierheen gaan ...
Die CSS om hierdie veelvoudige kolomme te maak, begin met wat jy voorheen gesien het:
. inhoud {-moz-kolom-telling: 3; -webkit-kolom telling: 3; kolom telling: 3; -moz-kolom-gaping: 30px; -webkit-kolom-gaping: 30px; kolom gaping: 30px; }Nou, die uitdaging hier is dat, aangesien die leser hierdie inhoud eweredig wil verdeel, so as die inhoudsduur van hierdie afdelings anders is, sal daardie blaaier die inhoud van 'n individuele afdeling eintlik verdeel en die begin daarvan by een kolom voeg en Vervolgens gaan jy na 'n ander (jy kan dit sien deur hierdie kode te gebruik om 'n eksperiment uit te voer en verskillende inhouds lengtes in elke afdeling by te voeg)!
Dit is nie wat jy wil hê nie. Jy wil hê dat elkeen van hierdie afdelings 'n afsonderlike kolom moet skep en maak nie saak hoe groot of klein 'n individuele afdeling se inhoud mag wees nie, jy wil dit nooit verdeel nie. U kan dit bereik deur hierdie een addisionele lyn van CSS by te voeg:
.content div {display: inline-block; }Dit sal die afdelings wat binne-in die inhoud is, dwing om ongeskonde te bly, aangesien die leser dit in verskeie kolomme verdeel. Nog beter, aangesien ons hier nie 'n vaste wydte gegee het nie, sal hierdie kolomme outomaties verander as die blaaier resize, waardeur hulle 'n ideale aansoek vir responsiewe webwerwe is . Met die "inlyn-blok" -styl in plek, sal elkeen van jou 3 afdelings 'n duidelike inhoudskolom wees.
Gebruik kolom-breedte
Daar is 'n ander eiendom behalwe 'kolom telling' wat jy kan gebruik, en afhangende van jou uitleg behoeftes, kan dit eintlik 'n beter keuse vir jou webwerf wees. Dit is 'kolom wydte'. Met dieselfde HTML-opmaak soos voorheen getoon, kan ons dit eerder met ons CSS doen:
. inhoud {-moz-kolom-breedte: 500px; -webkit-kolom-breedte: 500px; kolomwydte: 500px; -moz-kolom-gaping: 30px; -webkit-kolom-gaping: 30px; kolom gaping: 30px; }. inhoud div {vertoon: inline-block; }Die manier waarop dit werk, is dat die blaaier hierdie "kolomwydte" as die maksimum waarde van daardie kolom gebruik. So as die blaaier venster minder as 500 pixels wyd is, sal hierdie 3 afdelings in een kolom verskyn, een van die toppe van die ander. Hierdie is 'n tipiese uitleg wat gebruik word vir mobiele / klein skermuitlegte.
Aangesien die blaaier breedte toeneem om groot genoeg te wees om 2 kolomme in te pas saam met die gespesifiseerde kolom gapings, sal die blaaier outomaties van een kolomuitleg na twee kolomme gaan. Hou die skerm breedte verhoog en uiteindelik kry jy 'n 3 kolomontwerp, met elk van ons 3 afdelings wat in hul eie kolom vertoon word. Weereens, dit is 'n goeie manier om 'n paar reageerbare, multi-toestel vriendelike uitlegte te kry, en jy hoef nie eens media-navrae te gebruik om die uitlegstyle te verander nie!
Ander kolom eienskappe
Benewens die eienskappe wat hier gedek word, is daar ook eienskappe vir "kolomreël", insluitende kleur-, styl- en breedtewaardes wat jou toelaat om reëls tussen jou kolomme te skep. Dit sal gebruik word in plaas van grense as jy 'n paar lyne wil hê wat jou kolomme skei.
Tyd om te eksperimenteer
Tans is CSS Multiple Column Layout baie goed ondersteun. Met voorvoegsels sal meer as 94% van die webgebruikers hierdie style kan sien, en die nie-ondersteunde groep sou eintlik net baie ouer weergawes van Internet Explorer wees, wat u in elk geval nie meer ondersteun nie.
Met hierdie vlak van ondersteuning wat nou in plek is, is daar geen rede om nie met CSS-kolomme te eksperimenteer nie en hierdie style in produksie-gereed-webwerwe te implementeer. U kan u eksperimente begin met die HTML en CSS wat in hierdie artikel aangebied word, en speel met verskillende waardes om te sien wat die beste sal werk vir u uitleg se behoeftes.