Po mnoho let, Plovoucí CSS byly vybíravou, přesto nezbytnou komponentou při vytváření rozvržení webových stránek. Pokud váš návrh vyžadoval více sloupců, obrátili jste se na plováky. Problém této metody spočívá v tom, že i přes neuvěřitelnou vynalézavost, kterou weboví designéři / vývojáři prokázali při vytváření složitých stránek rozvržení, Plováky CSS nikdy neměly být tímto způsobem skutečně použity.
Zatímco floats and CSS positioning are sure have a place in web design for many years to come, newer layout techniky včetně CSS Grid a Flexbox nyní dávají webovým návrhářům nové způsoby, jak vytvářet rozvržení svých stránek. Další nová technika rozvržení, která ukazuje velký potenciál, je CSS Multiple Columns.
Sloupce CSS existují už několik let, ale nedostatek podpory ve starších prohlížečích (hlavně starších verze aplikace Internet Explorer) zabránila mnoha webovým profesionálům v používání těchto stylů při jejich výrobě práce.
Po ukončení podpory těchto starších verzí IE nyní někteří weboví designéři experimentují s novým rozložením CSS možnosti, včetně sloupců CSS a zjištění, že mají s těmito novými přístupy mnohem větší kontrolu než s nimi plováky.
Základy sloupců CSS
Jak název napovídá, CSS Multiple Columns (také známý jako CSS3 vícesloupcové rozložení) umožňuje rozdělit obsah na stanovený počet sloupců. Nejzákladnější vlastnosti CSS, které byste použili, jsou:
- počet sloupců
- sloupová mezera
Pro počet sloupců určíte požadovaný počet sloupců. Mezera sloupu by byla žlaby nebo mezery mezi těmito sloupy. Prohlížeč převezme tyto hodnoty a obsah rovnoměrně rozdělí do zadaného počtu sloupců.
Běžným příkladem CSS více sloupců v praxi by bylo rozdělit blok textového obsahu do více sloupců, podobně jako byste viděli v novinovém článku. Řekněme, že máte následující označení HTML (všimněte si, že například jsme uvedli pouze začátek jeden odstavec, zatímco v praxi by pravděpodobně existovalo více odstavců obsahu v tomto označení):
Nadpis vašeho článku.
Představte si zde spoustu odstavců textu ...
Pokud jste pak napsali tyto styly CSS:
.obsah {
-moz-počet sloupců: 3;
-webkit-column-count: 3;
počet sloupců: 3;
-moz-sloupcová mezera: 30px;
-webkit-column-gap: 30px;
mezera ve sloupci: 30px;
}
Toto pravidlo CSS by rozdělilo rozdělení „obsahu“ na 3 stejné sloupce s mezerou mezi nimi 30 pixelů. Pokud byste chtěli dva sloupce místo 3, jednoduše byste tuto hodnotu změnili a prohlížeč by vypočítal nové šířky těchto sloupců, aby obsah rozdělil rovnoměrně. Všimněte si, že nejprve použijeme vlastnosti s předponou dodavatele a poté nepředponové deklarace.
Jak snadné to je, jeho použití tímto způsobem je pro použití na webu sporné. Ano, můžete rozdělit spoustu obsahu do více sloupců, ale nemusí to být nejlepší čtení zkušenosti s webem, zejména pokud výška těchto sloupců klesne pod „záhyb“ okna obrazovka.
Čtenáři by pak museli procházet nahoru a dolů, aby si mohli přečíst celý obsah. Princip CSS Columns je stále tak snadný, jak vidíte zde, a lze jej použít k mnohem více, než jen k rozdělení obsahu některých odstavců - lze jej skutečně použít pro rozložení.
Rozložení se sloupci CSS
Řekněme, že máte webovou stránku s oblastí obsahu, která má 3 sloupce obsahu. Toto je velmi běžné rozložení webových stránek a k dosažení těchto 3 sloupců byste normálně plavili divize, které jsou v. S více sloupci CSS je to mnohem jednodušší.
Zde je několik ukázkových HTML:
Z našeho blogu.
Obsah by šel sem ...
Připravované akce.
Obsah by šel sem ...
CSS pro vytvoření těchto více sloupců začíná tím, co jste viděli dříve:
.obsah {
-moz-počet sloupců: 3;
-webkit-column-count: 3;
počet sloupců: 3;
-moz-sloupcová mezera: 30px;
-webkit-column-gap: 30px;
mezera ve sloupci: 30px;
}
Výzvou nyní je, že prohlížeč chce rozdělit tento obsah rovnoměrně, takže pokud je délka obsahu těchto divizí odlišná, bude tento prohlížeč ve skutečnosti rozdělit obsah individuální rozdělení, přidání jeho začátku do jednoho sloupce a pokračování do jiného (můžete to vidět pomocí tohoto kódu ke spuštění experimentu a přidání různých délek obsahu do každého divize).
To není to, co chcete. Chcete, aby každá z těchto divizí vytvořila samostatný sloupec, a bez ohledu na to, jak velký nebo malý může být obsah jednotlivých divizí, nikdy jej nechcete rozdělit. Toho můžete dosáhnout přidáním tohoto dalšího řádku CSS:
.obsah div {
display: inline-block;
}
To donutí ty divize, které jsou uvnitř „obsahu“, aby zůstaly nedotčené, i když to prohlížeč rozdělí do více sloupců. Ještě lépe, protože jsme zde nic nedali pevnou šířku, tyto sloupce se automaticky změní podle velikosti prohlížeče, což z nich dělá ideální aplikaci pro responzivní weby. S tímto stylem „inline-block“ bude každá z vašich 3 divizí samostatným sloupcem obsahu.
Použití šířky sloupce
Kromě „počtu sloupců“ můžete použít i další vlastnost, která může být pro vaše stránky v závislosti na vašich požadavcích na rozvržení skutečně lepší volbou. Toto je „šířka sloupce“. Pomocí stejného značení HTML, jak bylo ukázáno dříve, bychom místo toho mohli udělat s naším CSS:
.obsah {
-moz-width-width: 500px;
-webkit-column-width: 500px;
šířka sloupce: 500px;
-moz-sloupcová mezera: 30px;
-webkit-column-gap: 30px;
mezera ve sloupci: 30px;
}
.obsah div {
display: inline-block;
}
Funguje to tak, že prohlížeč používá tuto „šířku sloupce“ jako maximální hodnotu tohoto sloupce. Pokud je tedy okno prohlížeče menší než 500 pixelů, tyto 3 divize by se objevily v jednom sloupci, jeden na druhém. Toto je typické rozložení používané pro mobilní / malé rozložení obrazovky.
Vzhledem k tomu, že šířka prohlížeče se zvětšuje na dostatečně velkou velikost, aby se do ní vešly 2 sloupce spolu se zadanými mezerami sloupců, prohlížeč automaticky přejde z rozložení jednoho sloupce na dva sloupce. Stále zvětšujte šířku obrazovky a nakonec získáte design se 3 sloupci, přičemž každá z našich 3 divizí se zobrazí v jejich vlastním sloupci. Je to opět skvělý způsob, jak získat určitou odezvu, přátelský pro více zařízení rozvržení a nemusíte je ani používat mediální dotazy změnit styly rozvržení!
Další vlastnosti sloupce
Kromě zde popsaných vlastností existují také vlastnosti pro „sloupcové pravidlo“, včetně hodnot barev, stylu a šířky, které vám umožňují vytvářet pravidla mezi sloupci. Ty by se používaly místo ohraničení, pokud chcete mít nějaké řádky oddělující vaše sloupce.
Čas experimentovat
V současné době je CSS Multiple Column Layout velmi dobře podporováno. S předponami by více než 94% uživatelů webu vidělo tyto styly a tato nepodporovaná skupina by ve skutečnosti byla jen mnohem staršími verzemi aplikace Internet Explorer, které už stejně nejsou podporovány.
S touto úrovní podpory nyní na místě není důvod nezačat experimentovat se sloupci CSS a nasazovat tyto styly na webové stránky připravené k produkci. Experimenty můžete zahájit pomocí HTML a CSS uvedených v tomto článku a pohrát si s různými hodnotami, abyste zjistili, co by nejlépe vyhovovalo potřebám rozvržení vašeho webu.