Text do více sloupců a Firefox 1.5

-moz-column-width

Vlastnost -moz-column-width řídí šířku jednoho sloupce. Hodnotou jí může být libovolné kladné reálné číslo s libovolnou v CSS deklarovanou rozměrovou jednotkou či výchozí hodnota „auto“. Je-li šířka určena procenty, vlastnost se vůbec neaplikuje.

Šířka sloupce není konstantní, hodnota určuje minimální šířku sloupce. Vzhledem k faktu, že sloupce vždy zabírají maximum dostupného horizontálního prostoru, se může stát, že šířka sloupce bude o něco větší, než je definovaná. Chcete-li mít sloupce za všech okolností stejně široké, musíte nadřazenému prvku nastavit konkrétní šířku.

div { -moz-column-count: 3; -moz-column-width: 150px; }

V takovém případě se při rozlišení 1024×768 vykreslí jeden sloupec něco přes 300px široký. Při zúžení okna prohlížeče se v jednom bodě počet sloupců redukuje na dva a následně na jeden. Bude to při rozměrech 450px a 300px.

Praxe

Když jsem si s těmito vlastnostmi hrál, bylo povětšinou vše v pořádku. Narazil jsem však na jednu nepříjemnou chybu. Mějme obalový box, kterému nastavíme formátování obsahu do několika sloupců a mezery mezi jednotlivými sloupci. Obsahem tohoto boxu bude další box, který v sobě bude mít spoustu textu a který bude mít nastaveno šedé pozadí. Mezi jednotlivými podbarvenými sloupci tak budou prosvítat bílé pruhy (za předpokladu, že dokument má bílé pozadí) o šířce nastavené hodnotou vlastnosti -moz-column-gap.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>
      Sloupce textu
    </title>
    <style type="text/css">

        #dva_sloupce { -moz-column-count: 3; -moz-column-width: 150px; -moz-column-gap: 2%; }
        #dva_sloupce div { background-color: #eee; }

    </style>
  </head>
  <body>
        <div id="dva_sloupce">
                <div>
                    <p>Lorem ipsum ...</p>
                </div>
        </div>
  </body>
</html>

Ukázka zde.

Dosud je vše v pořádku. Ovšem každého napadne, že by bylo mnohem hezčí, kdyby pozadí tak těsně svými okraji nepřisedalo k textu. Plni očekávání tedy nastavíte padding a… zklamání. Při aplikaci paddingu na vnitřní element se odsazení projeví pouze na třech stranách, tou čtvrtou, haprující, je vrchní okraj. Vrchní odsazení se neaplikuje na druhý a všechny další sloupce. Dolní odsazení je zcela v pořádku. Je to nepříjemná chyba, která bude doufejme brzy odstraněna.

Ukázka chyby zde.

Využití

Nový Firefox si v prvních dnech stáhlo přes dva miliony uživatelů, není tedy zcela od věci se touto sic proprietární, avšak velice užitečnou vlastností vážně zabývat. Nabízí velice zajímavé možnosti formátování obsahu webové stránky, které mohou být na mnoha místech k nezaplacení už třeba jen z důvodu úspory místa (podívejte se například na přehled nálepek na rootu). Používá-li někdo jiný prohlížeč, obsah se zobrazí normálně v jednom sloupci.
2. 12. 2005, 17.53 | (X)HTML, CSS, Typografie, Prohlížeče.


Zanechte komentář





Můžete použít Texy! formátování.
Pokud se obsah boxů níže mění, zatímco píšete, potom žádné číslice nevyplňujte. V takovém případě antispam funguje, pouze se prohlížeči nepovedlo skrýt tento box.