Veľa rokov, Plaváky CSS boli veľmi zložitou, ale nevyhnutnou súčasťou pri vytváraní rozložení webových stránok. Ak váš návrh vyžadoval viac stĺpcov, zmenili ste sa na plaváky. Problém tejto metódy spočíva v tom, že napriek neuveriteľnej vynaliezavosti, ktorú weboví dizajnéri / vývojári preukázali pri vytváraní zložitých stránok rozloženia, Plaváky CSS nikdy skutočne nemali byť použité týmto spôsobom.
Aj keď plaváky a umiestnenie CSS budú mať vo webdizajne určite miesto ešte mnoho rokov, novšie rozloženie techniky vrátane CSS Grid a Flexbox teraz poskytujú webovým dizajnérom nové spôsoby, ako vytvoriť ich rozloženia stránok. Ďalšou novou technikou rozloženia, ktorá ukazuje veľký potenciál, je CSS Multiple Columns.
Stĺpce CSS existujú už niekoľko rokov, ale nedostatok podpory v starších prehliadačoch (hlavne starších verzie programu Internet Explorer) mnohým webovým profesionálom bráni vo využívaní týchto štýlov pri ich výrobe práca.
Po ukončení podpory týchto starších verzií IE niektorí weboví dizajnéri teraz experimentujú s novým rozložením CSS možnosti, vrátane stĺpcov CSS a zistenia, že majú týmto novým prístupom oveľa väčšiu kontrolu ako s nimi plaváky.
Základy stĺpcov CSS
Ako naznačuje jeho názov, CSS Multiple Columns (tiež známy ako CSS3 rozloženie viacerých stĺpcov) vám umožňuje rozdeliť obsah na stanovený počet stĺpcov. Najzákladnejšie vlastnosti CSS, ktoré by ste použili, sú:
- počet stĺpcov
- medzera v stĺpci
Pre počet stĺpcov zadajte požadovaný počet stĺpcov. Medzera medzi stĺpmi by bola medzi odkvapmi alebo medzerami medzi týmito stĺpmi. Prehliadač prevezme tieto hodnoty a obsah rozdelí rovnomerne do zadaného počtu stĺpcov.
Bežným príkladom viacerých stĺpcov CSS v praxi by bolo rozdelenie bloku textového obsahu do viacerých stĺpcov, podobne ako by ste videli v novinovom článku. Povedzme, že máte nasledujúce značky HTML (upozorňujeme, že napríklad na úvod sme uviedli iba začiatok) jeden odsek, zatiaľ čo v praxi by pravdepodobne existovalo viac odsekov obsahu v tomto označení):
Nadpis vášho článku.
Predstavte si tu veľa odsekov textu ...
Ak ste potom napísali tieto štýly CSS:
.obsah {
-moz-počet stĺpcov: 3;
-webkit-počet stĺpcov: 3;
počet stĺpcov: 3;
-moz-stĺpcová medzera: 30px;
-webkit-stĺpec-medzera: 30px;
medzera v stĺpci: 30px;
}
Toto pravidlo CSS by rozdelilo rozdelenie „obsah“ na 3 rovnaké stĺpce s medzerou 30 pixelov medzi nimi. Ak by ste chceli dva stĺpce namiesto 3, jednoducho by ste zmenili túto hodnotu a prehliadač by vypočítal nové šírky týchto stĺpcov, aby sa obsah rozdelil rovnomerne. Všimnite si, že najskôr použijeme vlastnosti s predponou od dodávateľa a až potom pred prefixy.
Akokoľvek je to jednoduché, jeho použitie týmto spôsobom je pre použitie na webe otázne. Áno, môžete rozdeliť množstvo obsahu do viacerých stĺpcov, ale nemusí to byť najlepšie čítanie skúsenosti s webom, najmä ak výška týchto stĺpcov klesne pod „záhyb“ okna obrazovka.
Čitatelia by potom museli prečítať celý obsah hore a dole. Napriek tomu je princíp stĺpcov CSS taký ľahký, ako vidíte tu, a dá sa použiť na oveľa viac, ako len na rozdelenie obsahu niektorých odsekov - dá sa skutočne použiť na rozloženie.
Rozloženie so stĺpcami CSS
Povedzme, že máte webovú stránku s oblasťou obsahu, ktorá má 3 stĺpce obsahu. Toto je veľmi bežné rozloženie webových stránok. Ak chcete dosiahnuť tieto 3 stĺpce, zvyčajne by ste rozdelili divízie, ktoré sa nachádzajú. Vďaka viacstĺpcom CSS je to oveľa jednoduchšie.
Tu je ukážka kódu HTML:
Z nášho blogu.
Obsah by sa sem dostal ...
Pripravované akcie.
Obsah by sa sem dostal ...
CSS na vytvorenie týchto viacerých stĺpcov začína tým, čo ste videli predtým:
.obsah {
-moz-počet stĺpcov: 3;
-webkit-počet stĺpcov: 3;
počet stĺpcov: 3;
-moz-stĺpcová medzera: 30px;
-webkit-stĺpec-medzera: 30px;
medzera v stĺpci: 30px;
}
Výzvou teraz je, že prehliadač chce tento obsah rozdeliť rovnomerne, takže ak je dĺžka obsahu týchto divízií iná, tento prehliadač skutočne rozdelí obsah individuálne rozdelenie, pridanie jeho začiatku do jedného stĺpca a potom pokračovanie do iného (môžete to vidieť tak, že pomocou tohto kódu spustíte experiment a do každého z nich pridáte inú dĺžku obsahu rozdelenie).
To nie je to, čo chcete. Chcete, aby každá z týchto divízií vytvorila samostatný stĺpec, a bez ohľadu na to, aký veľký môže byť obsah jednotlivých divízií, nikdy ich nechcete rozdeliť. Môžete to dosiahnuť pridaním tohto ďalšieho riadku CSS:
.obsah div {
display: inline-block;
}
Toto prinúti tie divízie, ktoré sa nachádzajú vo vnútri „obsahu“, aby zostali nedotknuté, aj keď to prehliadač rozdelí do viacerých stĺpcov. A čo je ešte lepšie, keďže sme tu nič nepridali pevnú šírku, tieto stĺpce sa budú automaticky meniť podľa veľkosti prehliadača, čo z nich robí ideálnu aplikáciu pre responzívne weby. S týmto štýlom „vloženého bloku“ bude každá z vašich troch divízií samostatným stĺpcom obsahu.
Pomocou šírky stĺpca
Okrem „počtu stĺpcov“ môžete použiť ešte jednu vlastnosť, ktorá môže byť v závislosti od vašich potrieb rozloženia skutočne lepšou voľbou pre vaše stránky. Toto je „šírka stĺpca“. Pomocou rovnakého označenia HTML, ako je uvedené vyššie, by sme to mohli urobiť pomocou nášho CSS:
.obsah {
-moz-šírka stĺpca: 500px;
-webkit-šírka stĺpca: 500px;
šírka stĺpca: 500px;
-moz-stĺpcová medzera: 30px;
-webkit-stĺpec-medzera: 30px;
medzera v stĺpci: 30px;
}
.obsah div {
display: inline-block;
}
Funguje to tak, že prehliadač používa túto „šírku stĺpca“ ako maximálnu hodnotu tohto stĺpca. Ak je teda okno prehliadača široké menej ako 500 pixelov, tieto 3 rozdelenia by sa zobrazili v jednom stĺpci, jeden nad druhým. Toto je typické rozloženie používané pre rozloženie pre mobilné zariadenia a malé obrazovky.
Keď sa šírka prehliadača zvýši na dostatočne veľkú veľkosť, aby sa do nej vošli dva stĺpce a medzery medzi nimi, prehľadávač automaticky prejde z rozloženia jedného stĺpca na dva stĺpce. Stále zväčšujte šírku obrazovky a nakoniec získate dizajn 3 stĺpcov, pričom každá z našich 3 divízií je zobrazená v ich vlastnom stĺpci. Je to opäť skvelý spôsob, ako získať responzívne, priateľské pre viac zariadení rozloženia a nemusíte ich ani používať mediálne dotazy zmeniť štýly rozloženia!
Ostatné vlastnosti stĺpca
Okrem tu uvedených vlastností existujú aj vlastnosti stĺpcového pravidla vrátane hodnôt farieb, štýlov a šírky, ktoré vám umožňujú vytvárať pravidlá medzi stĺpcami. Tieto by sa použili namiesto orámovania, ak chcete, aby stĺpce oddeľovali určité riadky.
Čas experimentovať
V súčasnosti je CSS rozloženie viacerých stĺpcov veľmi dobre podporované. S predponami by tieto štýly malo vidieť viac ako 94% používateľov webu. Táto nepodporovaná skupina by bola skutočne oveľa staršími verziami prehľadávača Internet Explorer, ktoré už aj tak nie sú podporované.
Keď je táto úroveň podpory teraz k dispozícii, nie je dôvod nezačať experimentovať so stĺpcami CSS a nasadiť tieto štýly na webové stránky pripravené na produkciu. Svoje experimenty môžete začať pomocou HTML a CSS uvedených v tomto článku a pohrať sa s rôznymi hodnotami, aby ste zistili, čo by najlepšie vyhovovalo potrebám rozloženia vášho webu.