Už dlhé roky sú plaváky CSS pre vytváranie webových stránok fiktívnym, ale nevyhnutným komponentom. Ak váš dizajn vyžiadal viac stĺpcov, otočíte sa na plávajúce body . Problém s touto metódou spočíva v tom, že napriek neuveriteľnej vynaliezanosti, ktorú web dizajnéri / vývojári preukázali pri vytváraní komplexných rozvrhov stránok, plaváky CSS nikdy neboli naozaj určené na použitie týmto spôsobom.
Zatiaľ čo plávajúce pozície a umiestnenie CSS určite majú miesto v dizajne webových stránok už niekoľko rokov, novšie techniky rozloženia vrátane CSS Grid a Flexbox teraz dávajú webové dizajnérom nové spôsoby, ako vytvoriť svoje rozloženie stránok. Ďalšou novou technikou usporiadania, ktorá ukazuje veľký potenciál, je CSS Multiple Columns.
Stĺpce CSS sú už niekoľko rokov, ale nedostatok podpory starších prehliadačov (hlavne starších verzií programu Internet Explorer) spôsobil, že mnohí weboví profesionálni používajú tieto štýly vo svojej výrobnej práci.
S koncom podpory pre tie staršie verzie IE niektorí web dizajnéri teraz experimentujú s novými možnosťami rozloženia CSS, vrátane stĺpcov CSS, a zistili, že majú s týmito novými prístupmi oveľa väčšiu kontrolu ako s plavidlami.
Základy stĺpcov CSS
Ako naznačuje jeho názov, viaceré stĺpce CSS (známe aj ako rozloženie viacerých stĺpcov CSS3) vám umožňujú rozdeliť obsah na nastavený počet stĺpcov. Najzákladnejšie vlastnosti CSS, ktoré by ste použili, sú:
- Kolóna-count
- stĺpec medzery
V prípade počtu stĺpcov zadáte požadovaný počet stĺpcov. Medzery v stĺpcoch by boli okapy alebo medzery medzi týmito stĺpcami. Prehliadač zoberie tieto hodnoty a rovnomerne rozdelí obsah na počet stĺpcov, ktoré zadáte.
Bežným príkladom viacerých stĺpcov CSS v praxi by bolo rozdelenie bloku textového obsahu na viaceré stĺpce, podobne ako to, čo by ste v novinovom článku videli. Povedzme, že máte nasledujúcu značku HTML (všimnite si napríklad, že som uviedol iba začiatok jedného odseku, zatiaľ čo v praxi by v tejto značke pravdepodobne existovali viaceré odseky obsahu):
Nadpis vášho článku
Predstavte si tu množstvo odsekov textu ...
Ak ste potom napísali tieto štýly CSS:
.content {-moz-stĺpec: 3; -webkit-count-count: 3; počet stĺpcov: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; medzera medzi stĺpcami: 30px; }Toto pravidlo CSS rozdelí rozdelenie obsahu na tri rovnaké stĺpce s rozdielom 30 pixelov medzi nimi. Ak ste chceli dva stĺpce namiesto 3, jednoducho by ste túto hodnotu zmenili a prehliadač by vypočítal novú šírku týchto stĺpcov na rovnomerné rozdelenie obsahu. Všimnite si, že najprv používame vlastnosti predurčené dodávateľom, za ktorými nasledujeme deklarácie bez predpony.
Tak jednoduché je, že jeho použitie týmto spôsobom je sporné pri používaní webových stránok. Áno, môžete rozdeliť veľa stĺpcov do viacerých stĺpcov, ale nemusí to byť najlepší čitateľský zážitok pre web, a to najmä ak výška týchto stĺpcov klesne pod "záhyb" obrazovky.
Čitatelia by potom museli posúvať hore a dole, aby si prečítali celý obsah. Napriek tomu je hlavný prvok stĺpcov CSS taký jednoduchý, ako tu vidíte, a môže sa použiť na to, aby urobil toľko viac, než len rozdeliť obsah niektorých odsekov - to môže byť skutočne použité na usporiadanie.
Usporiadanie s stĺpcami CSS
Povedzme, že máte webovú stránku s obsahovou oblasťou, ktorá má 3 stĺpce obsahu. Toto je veľmi typické rozloženie webových stránok a na dosiahnutie týchto 3 stĺpcov by ste zvyčajne plavali divíziami, ktoré sa nachádzajú. S viacerými stĺpcami CSS je to oveľa jednoduchšie.
Tu je niekoľko vzorových HTML:
Najnovšie správy
Obsah by šiel sem ...
Od nášho blogu
Obsah by šiel sem ...
p> Funkcia CSS na vytvorenie týchto viacerých stĺpcov začína tým, čo ste videli predtým:
.content {-moz-stĺpec: 3; -webkit-count-count: 3; počet stĺpcov: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; medzera medzi stĺpcami: 30px; } Teraz je tu výzva, pretože prehliadač chce rozdeliť tento obsah rovnomerne, takže ak je dĺžka obsahu týchto divízií odlišná, tento prehliadač skutočne rozdelí obsah jednotlivých divízií, pridá sa začiatok do jedného stĺpca a potom pokračujte do iného (môžete to vidieť pomocou tohto kódu, aby ste mohli spustiť experiment a pridať do každej divízie rôzne dĺžky obsahu)!
To nie je to, čo chcete. Chcete, aby každá z týchto divízií vytvorila odlišný stĺpec a bez ohľadu na to, aký veľký alebo malý môže byť obsah jednotlivého oddelenia, nikdy nechcete rozdeliť. Môžete to dosiahnuť pridaním tejto jednej ďalšej línie CSS:
.content div {zobrazenie: inline-block; } Toto prinúti tie divízie, ktoré sú vo vnútri "obsahu", aby zostali neporušené, aj keď prehliadač rozdelí to do viacerých stĺpcov. Ešte lepšie, pretože sme tu nič nedali na pevnú šírku, tieto stĺpce sa automaticky zmenia veľkosťou, pretože prehliadač zmení veľkosť, čo je ideálna aplikácia pre odpovedajúce webové stránky . S týmto štýlom "inline-block" na mieste, každé z vašich 3 divízií bude odlišným stĺpcom obsahu.
Použitie šírky stĺpca
Okrem stĺpcov, ktoré môžete použiť, existuje aj iná vlastnosť a v závislosti od potrieb rozloženia môže byť skutočne lepšou voľbou pre vaše stránky. Toto je "šírka stĺpca". Ak používame rovnaké označenie HTML, ako bolo uvedené vyššie, mohli by sme to urobiť pomocou nášho CSS:
.content {-moz-stĺpec-šírka: 500px; -webkit-šírka stĺpca: 500px; šírka stĺpca: 500 pixlov; -moz-column-gap: 30px; -webkit-column-gap: 30px; medzera medzi stĺpcami: 30px; } .content div {zobrazenie: inline-block; } Spôsob, akým to funguje, je, že prehliadač používa túto "šírku stĺpca" ako maximálnu hodnotu tohto stĺpca. Takže ak je okno prehliadača menšie ako 500 pixelov, tieto 3 oddiely sa objavia v jednom stĺpci, jeden z vrcholov iného. Toto je typické rozloženie používané pre rozloženie mobilnej / malej obrazovky.
Keď šírka prehliadača narastá tak, aby bola dostatočne veľká, aby sa zmestili spolu so špecifikovanými medzerami medzi 2 stĺpcami, prehliadač automaticky prejde z rozloženia jedného stĺpca na dva stĺpce. Zvýšte šírku obrazovky a nakoniec získate 3 stĺpcový dizajn, pričom každý z našich 3 divízií sa zobrazí vo vlastnom stĺpci. Opäť platí, že je to skvelý spôsob, ako získať nejaké odpovedajúce rozloženia priateľské pre viaceré zariadenia a ani nemusíte používať mediálne dopyty na zmenu štýlov rozloženia!
Ďalšie vlastnosti stĺpcov
Okrem tu zahrnutých vlastností existujú aj vlastnosti pre "pravidlo stĺpca" vrátane hodnôt farby, štýlu a šírky, ktoré vám umožňujú vytvárať pravidlá medzi vašimi stĺpcami. Tie by boli použité namiesto hraníc, ak chcete mať niektoré riadky oddeľujúce vaše stĺpce.
Čas experimentovať
V súčasnosti je podpora viacerých stĺpcov CSS veľmi dobre podporovaná. Pri predpôboch by sa tieto štýly mohli zobraziť viac ako 94% používateľov webových stránok a táto nepodporovaná skupina by bola naozaj oveľa staršími verziami programu Internet Explorer, ktoré už nemusíte podporovať.
S touto úrovňou podpory teraz nie je dôvod začať experimentovať so stĺpcami CSS a nasadzovať tieto štýly na webových stránkach pripravených na výrobu. Experimenty môžete spustiť pomocou kódu HTML a CSS prezentovaného v tomto článku a hrať si s rôznymi hodnotami, aby ste zistili, čo bude najlepšie pre potreby rozloženia vašich stránok.
Funkcia CSS na vytvorenie týchto viacerých stĺpcov začína tým, čo ste videli predtým:
.content {-moz-stĺpec: 3; -webkit-count-count: 3; počet stĺpcov: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; medzera medzi stĺpcami: 30px; }Teraz je tu výzva, pretože prehliadač chce rozdeliť tento obsah rovnomerne, takže ak je dĺžka obsahu týchto divízií odlišná, tento prehliadač skutočne rozdelí obsah jednotlivých divízií, pridá sa začiatok do jedného stĺpca a potom pokračujte do iného (môžete to vidieť pomocou tohto kódu, aby ste mohli spustiť experiment a pridať do každej divízie rôzne dĺžky obsahu)!
To nie je to, čo chcete. Chcete, aby každá z týchto divízií vytvorila odlišný stĺpec a bez ohľadu na to, aký veľký alebo malý môže byť obsah jednotlivého oddelenia, nikdy nechcete rozdeliť. Môžete to dosiahnuť pridaním tejto jednej ďalšej línie CSS:
.content div {zobrazenie: inline-block; }Toto prinúti tie divízie, ktoré sú vo vnútri "obsahu", aby zostali neporušené, aj keď prehliadač rozdelí to do viacerých stĺpcov. Ešte lepšie, pretože sme tu nič nedali na pevnú šírku, tieto stĺpce sa automaticky zmenia veľkosťou, pretože prehliadač zmení veľkosť, čo je ideálna aplikácia pre odpovedajúce webové stránky . S týmto štýlom "inline-block" na mieste, každé z vašich 3 divízií bude odlišným stĺpcom obsahu.
Použitie šírky stĺpca
Okrem stĺpcov, ktoré môžete použiť, existuje aj iná vlastnosť a v závislosti od potrieb rozloženia môže byť skutočne lepšou voľbou pre vaše stránky. Toto je "šírka stĺpca". Ak používame rovnaké označenie HTML, ako bolo uvedené vyššie, mohli by sme to urobiť pomocou nášho CSS:
.content {-moz-stĺpec-šírka: 500px; -webkit-šírka stĺpca: 500px; šírka stĺpca: 500 pixlov; -moz-column-gap: 30px; -webkit-column-gap: 30px; medzera medzi stĺpcami: 30px; } .content div {zobrazenie: inline-block; }Spôsob, akým to funguje, je, že prehliadač používa túto "šírku stĺpca" ako maximálnu hodnotu tohto stĺpca. Takže ak je okno prehliadača menšie ako 500 pixelov, tieto 3 oddiely sa objavia v jednom stĺpci, jeden z vrcholov iného. Toto je typické rozloženie používané pre rozloženie mobilnej / malej obrazovky.
Keď šírka prehliadača narastá tak, aby bola dostatočne veľká, aby sa zmestili spolu so špecifikovanými medzerami medzi 2 stĺpcami, prehliadač automaticky prejde z rozloženia jedného stĺpca na dva stĺpce. Zvýšte šírku obrazovky a nakoniec získate 3 stĺpcový dizajn, pričom každý z našich 3 divízií sa zobrazí vo vlastnom stĺpci. Opäť platí, že je to skvelý spôsob, ako získať nejaké odpovedajúce rozloženia priateľské pre viaceré zariadenia a ani nemusíte používať mediálne dopyty na zmenu štýlov rozloženia!
Ďalšie vlastnosti stĺpcov
Okrem tu zahrnutých vlastností existujú aj vlastnosti pre "pravidlo stĺpca" vrátane hodnôt farby, štýlu a šírky, ktoré vám umožňujú vytvárať pravidlá medzi vašimi stĺpcami. Tie by boli použité namiesto hraníc, ak chcete mať niektoré riadky oddeľujúce vaše stĺpce.
Čas experimentovať
V súčasnosti je podpora viacerých stĺpcov CSS veľmi dobre podporovaná. Pri predpôboch by sa tieto štýly mohli zobraziť viac ako 94% používateľov webových stránok a táto nepodporovaná skupina by bola naozaj oveľa staršími verziami programu Internet Explorer, ktoré už nemusíte podporovať.
S touto úrovňou podpory teraz nie je dôvod začať experimentovať so stĺpcami CSS a nasadzovať tieto štýly na webových stránkach pripravených na výrobu. Experimenty môžete spustiť pomocou kódu HTML a CSS prezentovaného v tomto článku a hrať si s rôznymi hodnotami, aby ste zistili, čo bude najlepšie pre potreby rozloženia vašich stránok.