Jak používat sloupce CSS3

S rostoucí rozmanitostí velikosti monitorů není praktické navrhnout jednotlivé bloky textu, které by zabíraly celou šířku obrazovky. Tradičním řešením je rozdělení textu na sloupce ručně, což je velmi časově náročné; nebo rozdělit text dynamicky pomocí jazyka JavaScript, který nefunguje univerzálně. Kromě toho se jedná o problém s prezentací, měli bychom být schopni to stylovat s CSS bez použití mřížkových systémů nebo plaveb, neměli bychom?

CSS3 ve skutečnosti poskytuje způsob, jak stylovat váš text do různých sloupců, dokonce vám dává možnost nastavit žlab - prostor mezi těmito sloupci - tímto způsobem máte plnou kontrolu namísto rámce nebo mřížkového systému, který tyto mezery pro vás .

Nejlepší ze všech je, že CSS3 se laskavě degraduje, takže pokud někdo prohlíží Netscape Navigator, vaše stránky se nebudou rozbít.

Podpora prohlížeče

Je důležité si uvědomit, že zatímco všechny současné prohlížeče podporují více sloupců v CSS3 - ano i IE10 - mnoho novějších verzí - např. IE9 - ne. Přestože podpora je dobrá, budete chtít zahrnout předpony prohlížeče pro webkit (-webkit-) a mozilla (-moz-). Není třeba zahrnout -ms- nebo -o- pro IE a Opera, neboť buď tuto funkci plně podporují, nebo vůbec ne.

Vlastnosti

Tato vlastnost CSS ve skutečnosti nabízí několik vlastností, které vám umožňují plnou kontrolu nad tím, jak se váš obsah vytiskne v prohlížeči a tyto vlastnosti jsou:

• počet sloupců: Zde určíte počet sloupců, které chcete použít pro prvek.
• šířka sloupce: šířka jednoho sloupce. Uvědomte si, že tato hodnota bude pravděpodobně změněna prohlížečem.
• sloupová mezera: šířka mezery mezi sloupci.
• sloupec-šířka pravidla: část pravidla je druh hranice pro vaše sloupce a zde určíte šířku této hranice.
• sloupec-pravý styl: také jako hranice, pokud potřebujete určit styl.
• column-rule-color: zde barva pravidla.
• sloupec-rozpětí: hodnota v této části řekne prohlížeči, kolik sloupců chcete elementu span, to je dobré pro nadpisy a funguje jako colspan a rowspan v tabulkách.

Se všemi těmito vlastnostmi si nemyslím, že potřebujeme cokoli jiného, ​​abychom měli plnou kontrolu nad našimi sloupci. Samozřejmě, že všechny tyto vlastnosti nejsou nutné pro práci s více sloupci, je skutečně zapotřebí pouze počet sloupců, ale vždy byste měli také použít mezery pro sloupce, aby text měl malý prostor a neměl všechny sloupce jeden nad druhým.

K tomu, aby to bylo provedeno, se jedná pouze o dva řádky kódu:

/* This will produce a 3 column layout with a gap of 20px between each column */.cols3 {column-count: 3;column-gap: 20px;}

Chcete-li také pravidlo použít ve sloupcích, stačí přidat další vlastnosti:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */.cols3 {column-count: 3;column-gap: 20px;column-rule-width: 1px;column-rule-style: solid;column-rule-color: #000;}

Stejně jako obyčejnější hraniční vlastnost můžete také barvu, styl a šířku stohovat ve stejném řádku, například:

.cols3 {column-count: 3;column-gap: 20px;column-rule: 1px solid #000;}

Pokud máte záhlaví a chcete, aby záhlaví zahrnovalo všechny sloupce, které jste přidali pouze jedním řádkem:

/*This h1 will take up the space of the 3 columns*/.cols3 h1{column-span: all;}

Demo

Můžete je aplikovat na prakticky libovolný HTML, z jednoho odstavce na více