Vlastnosti CSS3 pro vícesloupcový layout

3. července 2012

Většina webových designérů a koderů si jistě pamatuje na dobu ne tak moc vzdálenou, kdy se pro tvorbu vícesloupcových layoutů stránek používaly tabulky (prvek <table>), ve kterých byly vnořeny tabulky, ve kterých byly vnořeny další tabulky a tak dál. Fungovalo to perfektně. Pak přišly kaskádové styly, které tvorbu vícesloupcových layoutů značně usnadnili – v HTML kódu stačilo vytvořit pár prvků <div>, které se následně prostřednictvím CSS vlastností jako width, height, float, position atd. naformátovaly a napozicovaly podle záměru webdesignéra. Vývoj ale samozřejmě pokračoval, tvůrci HTML a CSS specifikace si konečně uvědomili, že specifikace tu má být především pro webdesignéry a ne naopak, takže v HTML5 a CSS3 přibyla spousta nových praktických značek a vlastností. Například pro vytváření sloupců pomocí CSS3 byly představeno několik speciálních vlastností jako column-count, column-width, column-fill atd. Článek CSS Columns z blogu Davida Walshe se věnuje právě těmto novým vlastnostem pro vytváření vícesloupcového layoutu. Popisuje význam jednotlivých vlastností a v příkladech demonstruje, jak je použít v praxi.

Zdroj: davidwalsh.name.

Mohlo by vás také zajímat

Nejnovější

2 komentářů

  1. Anonym

    Čvc 3, 2012 v 17:06

    CSS column vlastnosti rozhodně nejsou učeny pro tvorbu layoutu stránky, ale jen k formátování textu. Nelze totiž určit, co se vykreslí ve kterém sloupci (co se nevejde do prvního se dá do druhého.

    Odpovědět
  2. kubajz

    Čvc 7, 2012 v 16:38

    Tak tak, vlastnosti column-* jsou určeny pro „novinové“ sloupce.

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *