CSS vlastnost column-count určuje počet sloupců ve sloupcové sazbě.
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:
<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á.
Internet Explorer podporuje column-count dobře od verze 10.
U ostatních prohlížečů
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- |
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.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.