Column-count

CSS vlastnost column-count určuje počet sloupců ve sloupcové sazbě.

background
hodnoty počet sloupců

auto

text nebude ve sloupcích, respektive bude jen v jednom sloupci, výchozí stav
2 text se zalomí do dvou sloupců
N text se zalomí do N sloupců

Sloupcová sazba si rozvrhne text prvku na sloupce a postupně je naplní. Pokud není zadáno jinak (přes column-width), rozpočítá dostupnou šířku mezi sloupce tak, aby byly stejně široké. Dále se snaží, aby sloupce byly i přibližně stejně vysoké.

Sloupcovou sazbu nelze bez této CSS vlastnosti udělat, protože CSS neobsahuje žádné možnosti, přelít obsah z jednoho obdélníku (sloupce) do druhého.

Použití na webu je sporné. Lidé si za desetiletí existence internetu zvykli na to, že text se na webu čte shora dolů v jednom širším sloupci. Napadají mě dvě vhodná použití sloupcové sazby:

  1. vyskládání odkazů v patičce do sloupečků
  2. tisková verze pro delší texty

Příklad s prefixy

<div class="sloupce">
    delší text...
</div>

<style>
div.sloupce {
    -webkit-column-count: 2; /* pro Chrome a Safari */
    -moz-column-count: 2; /* pro Firefox */
    column-count: 2; /* pro IE a budoucí prohlížeče */
}
</style>

V prosinci 2015 podporuje zápis bez prefixů jenom Internet Explorer. Proto se musí styl zapisovat s prefixy. Nemám prefixové zápisy rád a nechci je moc podporovat, aby se příliš nevžily, ale v tomhle případě myslím, že to je omluvitelné. Sloupcová sazba je totiž užitečná.

Podpora

Internet Explorer podporuje column-count dobře od verze 10.

U ostatních prohlížečů

Podpora background
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer od verze 10  
Mozilla (Firefox) od verze 2.0 s prefixem pouze s prefixem -moz-
Chrome od verze 4.0 s prefixem pouze s prefixem -webkit-

Další vlastnosti sloupcové sazby

vlastnost sloupcové sazby hodnoty význam vlastnosti
column-count číslo počet sloupců - o tom je tato stránka
column-width délka doporučená šířka jednoho sloupce
columns délka číslo souhrnná vlastnost pro column-width a column-count, např.
columns: 2rem 2;
column-gap délka mezera mezi sloupci - výchozí je 1em
column-rule jako u border vlastnosti oddělovací čáry, souhrnně, např. 1px solid blue
column-rule-color barva barva oddělovací čáry
column-rule-style styl čáry styl čáry oddělující sloupce - výchozí je none, tedy bez čáry
column-rule-width délka tloušťka oddělovací čáry
column-span 1, all, inherit určuje, přes kolik sloupců se vykreslí stylovaný zanořený prvek. Například odkaz h2 {column-span: all;} ukončí sloupce a vykreslí se na celou šířku stránky. Po prvku budou pokračovat sloupce.

Pamatujte prosím, že všechny výše uvedené vlastnosti musíte zapsat třikrát a dvakrát opatřit prefixy.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.