Għal bosta snin, is-sufruni tas-CSS kienu komponent fqir, għadu meħtieġ, fil-ħolqien ta 'taqsim ta' websajts. Jekk id-disinn tiegħek sejjaħ għal kolonni multipli, inti rrikorriet għal sufruni . Il-problema b'din il-metodu hija li, minkejja l-għerf inkredibbli li disinjaturi / żviluppaturi tal-web wrew fil-ħolqien ta 'layouts kumplessi tas-sit, CSS floats qatt ma kienu maħsuba biex jintużaw b'dan il-mod.
Filwaqt li s-sufruni u l-pożizzjonament tas-CSS huma żgur li għandhom post fid-disinn tal-web għal ħafna snin li ġejjin, tekniki ġodda ta 'tqassim inklużi CSS Grid u Flexbox issa qed jagħtu lill-disinjaturi tal-web modi ġodda biex joħolqu l-arranġamenti tas-sit tagħhom. Teknika ġdida ta 'tqassim ġdida li turi ħafna potenzjal hija CSS Multiple Columns.
Il-kolonni tas-CSS ilhom jeżistu għal ftit snin issa, iżda n-nuqqas ta 'appoġġ f'bastaturi anzjani (l-aktar verżjonijiet antiki ta' Internet Explorer) żamm ħafna professjonisti tal-web milli jużaw dawn l-istili fix-xogħol ta 'produzzjoni tagħhom.
Bit-tmiem tal-appoġġ għal dawk il-verżjonijiet anzjani tal-IE, xi disinjaturi tal-web issa qegħdin jesperimentaw b'għażliet ġodda ta 'tqassim tas-CSS, inklużi Kolonni tas-CSS, u jsibu li għandhom ħafna aktar kontroll ma' dawn l-approċċi ġodda milli għamlu ma 'sufruni.
Il-Bażiċi tal-Kolonni tas-CSS
Kif jissuġġerixxi ismu, CSS Multiple Columns (magħruf ukoll bħala tqassim b'ħafna kolonni CSS3) jippermettilek li taqsam il-kontenut f'numru stabbilit ta 'kolonni. L-iktar proprjetajiet CSS bażiċi li tuża:
- l-għadd tal-kolonni
- differenza fil-kolonna
Għall-għadd tal-kolonni, tispeċifika n-numru ta 'kolonni li trid. Id-differenza fil-kolonna tkun il-kanali jew l-ispazjar bejn dawk il-kolonni. Il-browser se jieħu dawn il-valuri u jaqsam il-kontenut indaqs fin-numru ta 'kolonni li tispeċifika.
Eżempju komuni ta 'kolonni multipli CSS fil-prattika jkun li jaqsam blokk ta' kontenut ta 'test f'kolonni multipli, simili għal dak li tara f'artiklu ta' gazzetta. Tgħid li għandek l-immarkar HTML li ġej (innota li għal skopijiet ta 'eżempju, jiena nidħol biss il-bidu ta' paragrafu wieħed, waqt li fil-prattika x'aktarx ikun hemm diversi paragrafi ta 'kontenut f'dan il-markup):
L-intestatura tal-artiklu tiegħek
Immaġina ħafna paragrafi ta 'test hawn ...
Jekk imbagħad kitbet dawn l-istili CSS:
.content {-moz-column-count: 3; -webkit-column-count: 3; għadd tal-kolonni: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; differenza fil-kolonna: 30px; }Din ir-regola tas-CSS taqsam id-diviżjoni tal- "kontenut" fi 3 kolonni ugwali b'xaqs ta '30 pixel bejniethom. Jekk riedu żewġ kolonni minflok 3, inti sempliċement ibiddel dak il-valur u l-browser jikkalkula l-wisgħat ġodda ta 'dawk il-kolonni biex jaqsam il-kontenut indaqs. Avviż li nagħmlu l-ewwel nagħmlu l-proprjetajiet prefissati mill-bejjiegħ, segwiti mid-dikjarazzjonijiet mhux iffissati minn qabel.
Daqshekk faċli bħal dan, l-użu tiegħu b'dan il-mod huwa dubjuż għall-użu tal-websajt. Iva, tista 'taqsam bukkett ta' kontenut f'diversi kolonni, iżda din tista 'ma tkunx l-aħjar esperjenza tal-qari tal-Web, speċjalment jekk l-għoli ta' dawn il-kolonni jaqa 'taħt it-tinja tal-iskrin.
Il-qarrejja imbagħad ikollhom imorru u 'l isfel biex jaqraw il-kontenut sħiħ. Still, il-prinċipal tal-Kolonni tas-CSS huwa faċli kif tara hawn, u jista 'jintuża biex jagħmel ħafna aktar milli sempliċement jaqsam il-kontenut ta' xi paragrafi - jista ', tabilħaqq, jintuża għat-tqassim.
Tqassim Bil-Kolonni tas-CSS
Tgħid li għandek paġna tal-web b'żona ta 'kontenut li għandha 3 kolonni ta' kontenut. Dan huwa tqassim tal-websajt tipiku ħafna, u biex jinkisbu dawk it-3 kolonni, inti normalment titlef id-diviżjonijiet li fihom. Bil-kolonni multipli CSS, huwa daqstant faċli.
Hawn xi kampjun HTML:
L-Aħħar Aħbarijiet
Kontenut imur hawn ...
Minn Blog
Kontenut imur hawn ...
Avvenimenti li Jmiss
Kontenut imur hawn ...
Is-CSS biex tagħmel dawn il-kolonni multipli jibda 'minn dak li rajt qabel:
.content {-moz-column-count: 3; -webkit-column-count: 3; għadd tal-kolonni: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; differenza fil-kolonna: 30px; }Issa, l-isfida hawn hija li, peress li l-browser irid jaqsam dan il-kontenut indaqs, hekk jekk it-tul tal-kontenut ta 'dawn id-diviżjonijiet huwa differenti, dak il-browser fil-fatt se jaqsam il-kontenut ta' diviżjoni individwali u jżid il- imbagħad kompli f'ieħor (tista 'tara dan billi tuża dan il-kodiċi biex tmexxi esperiment u żżid tulijiet differenti ta' kontenut f'kull diviżjoni)!
Dan mhuwiex dak li trid. Trid li kull waħda minn dawn id-diviżjonijiet toħloq kolonna distinta u, tkun kemm tkun kbira jew żgħira l-kontenut ta 'diviżjoni individwali jista' jkun, int qatt ma trid li tinqasam. Tista 'tikseb dan billi żżid din il-linja addizzjonali ta' CSS:
.content div {display: inline-block; }Dan se jġiegħel lil dawk id-diviżjonijiet li jinsabu ġewwa l-'kontenut 'biex jibqgħu intatti anke hekk kif il-browser jaqsam dan f'diversi kolonni. Anke aħjar, peress li aħna ma nagħtulna xejn hawn wisa 'fiss, dawn il-kolonni se jerġgħu jitbiddlu awtomatikament hekk kif il-browser jerġa' jbiddel, u jagħmluhom applikazzjoni ideali għal websajts li jirrispondu . Ma 'dak l-istil "inline-block" fis-seħħ, kull waħda mid-diviżjonijiet tiegħek se tkun kolonna distinta ta' kontenut.
Uża l-Wisa 'tal-Kolonna
Hemm proprjetà oħra minbarra l- "kolonna-għadd" li tista 'tuża, u skont il-ħtiġijiet ta' tqassim tiegħek, tista 'fil-fatt tkun għażla aħjar għas-sit tiegħek. Dan huwa "wisa 'tal-kolonna". Bl-użu ta 'l-istess markup HTML kif jidher qabel, nistgħu minflok tagħmel dan ma' CSS tagħna:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; wisa 'tal-kolonna: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; differenza fil-kolonna: 30px; } .content div {display: inline-block; }Il-mod kif dan jaħdem huwa li l-browser juża din il- "kolonna-wisa" bħala l-valur massimu ta 'dik il-kolonna. Mela jekk it-tieqa tal-brawżer hija inqas minn 500 pixels wiesa ', dawn id-diviżjonijiet 3 jidhru f'kolonna waħda, waħda mill-uċuħ ta' xulxin. Dan huwa tqassim tipiku użat għal taqsim mobbli / skrin żgħir.
Peress li l-wisa 'tal-wisa' tal-browser tiżdied biex tkun kbira biżżejjed biex taqdi 2 kolonni flimkien ma 'lakuni fil-kolonna speċifikati, il-browser awtomatikament imur minn format ta' kolonna waħda għal żewġ kolonni. Żomm iż-żieda tal-wisa 'tal-iskrin u eventwalment ikollok disinn ta' 3 kolonni, b'kull waħda mid-diviżjonijiet tagħna murija fil-kolonna tagħhom stess. Għal darb'oħra, dan huwa mod tajjeb ħafna biex nikseb xi taqsim li jirrispondi, b'ħafna mezzi ħbiberija , u m'għandekx bżonn tuża mistoqsijiet tal-midja biex tibdel l-istili ta 'tqassim!
Karatteristiċi ta 'Kolonna Oħra
Minbarra l-proprjetajiet koperti hawnhekk, hemm ukoll proprjetajiet għal "regola tal-kolonna", inklużi valuri tal-kulur, stil, u wisa li jippermettu li toħloq regoli bejn il-kolonni tiegħek. Dawn jintużaw minflok fruntieri jekk inti tixtieq li jkollok xi linji li jisseparaw il-kolonni tiegħek.
Ħin għall-Esperiment
Bħalissa, it-Tqassim tal-Kolonna Miftiega CSS huwa appoġġjat sew. Bil-prefissi, aktar minn 94% tal-utenti tal-web ikunu jistgħu jaraw dawn l-istili, u dak il-grupp mhux sostnut verament ikun verżjonijiet ħafna eqdem tal-Internet Explorer li x'aktarx ma tkunx qed issostni aktar.
B'din il-livell ta 'appoġġ issa fis-seħħ, m'hemm l-ebda raġuni biex ma tibda tesperimenta bil-Kolonni CSS u tuża dawn l-istili fil-websajts lesti għall-produzzjoni. Tista 'tibda l-esperimenti tiegħek billi tuża l-HTML u s-CSS ippreżentati f'dan l-artikolu u tilgħab madwarha b'valuri differenti biex tara x'taħdem aħjar għall-ħtiġijiet tat-tqassim tas-sit tiegħek.