Dum multaj jaroj, CSS-kaleŝegoj estis finika, tamen necesa, komponanto en kreado de retpaĝaj layouts. Se via dezajno nomis plurajn kolumnojn, vi turnis sin al flosoj . La problemo kun ĉi tiu metodo estas, malgraŭ la nekredebla inĝenieco, kiun projektistoj / programistoj retejo montris krei kompleksajn retejajn aranĝojn, CSS-kaleŝegojn neniam estis vere uzataj en ĉi tiu maniero.
Dum flosoj kaj CSS-pozicioj certas havi lokon en retpaĝo pri multaj jaroj, novaj aranĝaj teknikoj inkluzive de CSS Grid kaj Flexbox nun donas al la diseñadores rete novajn manierojn krei iliajn ejon-arangojn. Alia nova aranĝo-tekniko, kiu montras multajn eblojn, estas CSS Multoblaj Kolumnoj.
CSS-Kolumnoj jam daŭris kelkajn jarojn, sed manko de subteno en malnovaj foliumiloj (ĉefe pli malnovaj versioj de Interreto Esploristo) konservis multajn retejajn profesiulojn uzi ĉi tiujn stilojn en sia produktado.
Kun la fino de subteno por tiuj pli malnovaj versioj de IE, iuj retejo-projektantoj nun spertas novajn CSS-aranĝajn eblojn, CSS-kolumnojn inkluzivitajn, kaj trovante, ke ili havas multe pli da kontrolo kun ĉi tiuj novaj aliroj ol ili faris kun flosoj.
La Bazaĵoj de CSS-Kolumnoj
Kiel ĝia nomo sugestas, CSS Multoblaj Kolumnoj (ankaŭ konata kiel CSS3-multkolora aranĝo) permesas vin dividi enhavon en aro de kolumnoj. La plej bazaj CSS-proprietoj, kiujn vi uzus estas:
- kolumno-kalkulo
- kolumno-breĉo
Por kolumno-grafo, vi specifas la nombron de kolumnoj, kiujn vi volas. La kolumpa breĉo estus la gutteroj aŭ interspaco inter tiuj kolumnoj. La retumilo prenos ĉi tiujn valorojn kaj dividos la enhavon egale en la nombro da kolumnoj, kiujn vi specifas.
Komuna ekzemplo de CSS multoblaj kolumnoj en praktiko estus dividi blokon de enhavo de teksto en plurajn kolumnojn, simile al tio, kion vi vidus en ĵurnalo. Diru, ke vi havas la sekvan HTML-markon (notu, ke ekzemple, mi nur komencas la komencon de unu paragrafo, kvankam en la praktiko probable verŝajne estus multaj alineoj de enhavo en ĉi tiu marko):
La titolo de via artikolo
Imagu multajn alineojn de teksto ĉi tie ...
Se vi tiam skribis ĉi tiujn CSS-stilojn:
.kontenta {-moz-kolumno-kalkulo: 3; -kalkulado-kolumno-kalkulo: 3; kolumno-kalkulo: 3; -moz-kolumno-breĉo: 30px; -webkit-column-gap: 30px; kolumno-breĉo: 30px; }Ĉi tiu CSS-regulo dividus la "enhavon" dividon en 3 egalajn kolumnojn kun breĉo de 30 rastrumeroj inter ili. Se vi volus du kolumnojn anstataŭ 3, vi simple ŝanĝus tiun valoron kaj la retumilo kalkulas la novajn larĝojn de tiuj kolumnoj por dividi la enhavon egale. Rimarku, ke ni unue uzu la faktorojn-prefiksitajn proprietojn, sekvitajn de ne-prefiksitaj deklaroj.
Tiel facila kiel tio estas, ĝia uzo ĉi-rilate estas pridubebla por la uzo de la retejo. Jes, vi povas disigi multajn enhavojn en plurajn kolumnojn, sed ĉi tio eble ne estas la plej bona legado de la retejo, precipe se la alteco de ĉi tiuj kolumnoj falas sub la "faldon" de la ekrano.
Legantoj tiam devus rulumi supren kaj malsupren por legi la plenan enhavon. Ankoraŭ tiel, la ĉefa CSS-Kolumnoj estas tiel facila kiel vi vidas ĉi tie, kaj ĝi povas esti uzata por multe pli ol nur dividi la enhavon de iuj alineoj - ĝi ja povas esti uzata por aranĝo.
Aranĝo Kun CSS-Kolumnoj
Diru, ke vi havas retpaĝon kun enhavo areo, kiu havas 3 kolumnojn da enhavo. Ĉi tio estas tre tipa retejo-aranĝo, kaj por atingi tiujn 3 kolumnojn, vi kutime flosus la dividojn, kiuj estas. Kun CSS multoblaj kolumnoj, ĝi estas multe pli facila.
Jen kelkaj specimeno HTML:
Latest News
Enhavo ĉi tie ...
De nia Blogo
Ĉi-rilato iros ĉi tie ...
Upcoming Events
Enhavo ĉi tie ...
La CSS por fari ĉi tiujn multoblajn kolumnojn komenciĝas kun tio, kion vi vidis antaŭe:
.kontenta {-moz-kolumno-kalkulo: 3; -kalkulado-kolumno-kalkulo: 3; kolumno-kalkulo: 3; -moz-kolumno-breĉo: 30px; -webkit-column-gap: 30px; kolumno-breĉo: 30px; }Nun la defio ĉi tie estas, ĉar la retumilo volas dividi ĉi tiun enhavon egale, do se la enhavo de ĉi tiuj dividoj diferencas, tiu retumilo fakte dividos la enhavon de individua divido, aldonante la komencon de ĝi al unu kolumno kaj Sekvu al alia (vi povas vidi ĉi tion uzante ĉi tiun kodon por ekzekuti eksperimenton kaj aldoni malsamajn longojn de enhavo en ĉiu divido)!
Tio ne estas, kion vi volas. Vi volas, ke ĉiu el ĉi tiuj dividoj kreu distingan kolumnon kaj, kiom ajn granda aŭ malgranda individua divido povas esti, vi neniam volas dividi ĝin. Vi povas sukcesi tion aldonante ĉi tiun kroman linion de CSS:
.content div {display: inline-block; }Ĉi tio devigos tiujn dividojn, kiuj estas ene de la "enhavo" resti nerompitaj eĉ kiel la retumilo dividas ĉi tion en plurajn kolumnojn. Eĉ pli bone, ĉar ni ne donis ion ĉi tie fiksitan larĝecon, ĉi tiuj kolumnoj aŭtomate regrandiĝos kiel la retumilo-resizeĵoj, igante ilin ideala apliko por respondemaj retejoj . Kun tiu stilo "inline-block", ĉiu el viaj 3 dividoj estos klara kolumno de enhavo.
Uzanta Kolumno-Larĝeco
Ekzistas alia posedaĵo krom "kolumno-kalkulo", kiun vi povas uzi, kaj laŭ via aranĝo bezonas, eble efektive estu pli bona elekto por via retejo. Ĉi tio estas "kolumno-larĝa". Uzante la saman HTML-markon, kiel ni montris antaŭe, ni povus anstataŭe fari ĉi tion per niaj CSS:
.kontentu {-moz-kolumno-larĝa: 500px; -webkit-column-width: 500px; kolumno-larĝa: 500px; -moz-kolumno-breĉo: 30px; -webkit-column-gap: 30px; kolumno-breĉo: 30px; } .content div {display: inline-block; }La maniero, kiun ĉi tio funkcias, estas, ke la retumilo uzas ĉi tiun "kolumn-larĝecon" kiel la maksimuman valoron de tiu kolumno. Do se la retumilo estas malpli ol 500 pikseloj larĝe, ĉi tiuj 3 dividoj aperos en sola kolumno, unu el la suproj de alia. Ĉi tiu estas tipa aranĝo uzita por moveblaj / malgrandaj ekranaj arangoj.
Ĉar la larĝeco de la retumilo kreskas sufiĉe granda por persvadi 2 kolumnojn kune kun la specifaj kolumnaj malplenoj, la retumilo aŭtomate iros el unu kolumna aranĝo al du kolumnoj. Daŭre kreskigu la ekranon kaj poste vi ricevos 3 kolumnajn dezajnojn, kun ĉiu el niaj 3 dividoj montritaj en sia propra kolumno. Denove, ĉi tio estas bonega maniero por ricevi kelkajn respondemajn, mult-aparatajn amikaĵojn, kaj vi eĉ ne bezonas uzi amaskomunikilajn demandojn por ŝanĝi la aranĝajn stilojn!
Aliaj Kolumaj Ecoj
Krom la propraĵoj kovritaj ĉi tie, ankaŭ ekzistas propraĵoj por "kolumno-regulo", inkluzive de koloroj, stiloj kaj larĝaj valoroj, kiuj permesas krei regulojn inter viaj kolumnoj. Ĉi tiuj estus uzataj anstataŭ limoj, se vi volas havi iujn liniojn apartigante viajn kolumnojn.
Tempo al Eksperimento
Nuntempe CSS Multoblaj Kolumna Aranĝo estas tre bone subtenata. Kun prefiksoj, pli ol 94% de la uzantoj retejo povus vidi ĉi tiujn stilojn, kaj tiu ne subtenata grupo vere nur estus multe pli malnovaj versioj de Interreta Esploristo, kiun vi eble ne plu subtenas.
Kun ĉi tiu nivelo de subteno nun en loko, ekzistas neniu kialo ne komenci sperti kun CSS-Kolumnoj kaj disfaldi ĉi tiujn stilojn en produktado pretaj retejoj. Vi povas komenci viajn eksperimentojn uzante la HTML kaj CSS prezentitan en ĉi tiu artikolo kaj ludi ĉirkaŭe kun malsamaj valoroj por vidi, kio funkcios plej bone por la bezonoj de via retejo.