O webu
Column – obsah ve sloupcích

V novinách nebo časopisech je běžné, že je text rozdělen do více sloupečků. Pro docílení tohoto efektu na webové stránce existují CSS vlastnosti column-*.

Podpora

Tvorba sloupců s využít CSS vlastností column-* funguje od Internet Exploreru 9. V Chrome/Opeře je nutno použít CSS prefix -webkit-, ve Firefoxu zase -moz-. Ve staré Opeře 12 funguje samotné column-* jako v IE 9 a novějších.

Ukázka rozdělení seznamu <ul>:

  • První
  • Druhá
  • Třetí
  • Čtvrtá
  • Pátá
  • Šestá
  • Sedmá
  • Osmá
  • Devátá

Vlastnost column-*

Pro nastavení sloupců existují následující vlastnosti:

ZnačkaVýznam
column-countpočet sloupců
column-gapšíře mezery mezi sloupci
column-rulestyl oddělovače sloupců, funguje podobně jako border (analogicky lze rozdělit na 3 vlastnosti column-rule-color, column-rule-style a column-rule-width).
column-widthšířka jednoho sloupce
columnszkratka; sdružení column-count a column-width do jedné vlastnosti

Změna počtu sloupců

Užitečné chování CSS column spočívá v tom, že se počet sloupců dokáže sám průběžně měnit podle dostupného prostoru. V případě, že se zadá šířka (column-width), se tento rozměr chápe jako minimální, kdy se při zúžení sloupeček odebere.

  • Živá ukázka – při změně dostupné velikosti se mění počet sloupců

Používat sloupce?

Stručně řečeno: Ne.

Web funguje jinak než časopis nebo noviny – není rozdělen na jednotlivé stránky, ale text plyne nerozděleně shora dolů.

Použití více sloupců bude tedy pro návštěvníky většinou nezvyklé a nepřehledné.

Možná existují výjimky, kdy je použití více sloupců užitečné, ale moc mě jich nenapadá (budu rád, když mi dáte tip do komentářů).

Více sloupců ve starších prohlížečích

Ve starších prohlížečích existují dvě možnost řešení:

  1. Přesypávání obsahu JavaScriptem.
  2. Hackování v CSS.

Následující ukázka je funkční od Internet Exploreru 7. Používá se primitivní metoda selektoru sourozence ve stylu li+li+li+li+li+li a relativní posicování.

Od páté položky v seznamu se začne tvořit nový sloupec.

  • První
  • Druhá
  • Třetí
  • Čtvrtá
  • Pátá
  • Šestá
  • Sedmá
  • Osmá
  • Devátá