Alternativa pevné šířky

Pavel Salvet  /  23. 04. 2008, 11:38

Spolu s CSS layoutem převládlo pojímání webové stránky prizmatem grafika. Je na ni nahlíženo jako na nějaký plakát kde má vše svou neměnnou podobu, pečlivě vyměřenou polohu a fixní rozměry.

Popisovaný přístup se projevuje na relativně vysokém procentu webů a v některých případech vede snaha vše pevně spoutat k bizarním výsledkům.

Obecně

Nevýhody pevně stanovených rozměrů jsou dvojího druhu.

  1. Jde o velice nespolehlivé řešení. Například při zvětšení písma můžeme být svědky toho, jak na některých webech položky menu „přetékají“ svůj grafický rámec a hyzdí tak celkový vzhled.

  2. Nejsou dostatečně přizpůsobivé, a to především z hlediska šířky. Různá zařízení disponují různým rozlišením. Stránky však zůstávají stále stejně široké. V zajetí pevných rozměrů nedokážou adekvátně využít nabízený prostor.

    Představme si například fotogalerii, kde se náhledy, řazené po dvou či třech snímcích tísní v úzkém sloupci, zatímco 50 % místa vyplňuje po obou stranách čisté pozadí.

    Opačný případ může nastat, když zadavatel zvyklý na svůj velký monitor s vysokým rozlišením, bude požadovat stránku co nejširší, aby se toho do viewportu hodně vešlo, a webdesignér se tohoto úkolu zhostí tak, jak je zvyklý – s využitím pevné šířky. Netřeba asi dodávat, že uživatele horizontální scrollování patrně nenadchne.

Jen pro vyjasnění – předešlé řádky nebyly kritikou CSS layoutu a výzvou k návratu k tabulkovému layoutu! Tabulkový layout sice měl tu výhodu, že dokázal stránky automaticky přizpůsobit šířce okna, leč nevýhody zcela jasně převažovaly. Tento typ layoutu byl nejenom sémanticky pochybený a značně omezující, ale především enormně nepřehledný. Nepřehlednost zdrojového kódu způsoboval nadměrný výskyt tagů tr, td, kvůli tomu se někdy tabulkovému layoutu ironicky přezdívalo vlakový layout.

Postup

Pokud chceme, aby náš layout byl flexibilní, musíme k tomu využít CSS. Prvním krokem bude přiřadit odlišným zařízením odlišné sady stylů. Obvykle se rozlišují styly pro

  • všechny typy zařízení
  • obrazovku a projekci
  • tiskárnu
  • zařízení s malým displayem

Tato diferenciace se provede buď v HTML kódu,

<link rel="stylesheet" type="text/css" media="all" href="styl.css">
<link rel="stylesheet" type="text/css" media="screen,projection" href="obrazovka.css">
<link rel="stylesheet" type="text/css" media="print" href="tisk.css">
<link rel="stylesheet" type="text/css" media="handheld" href="display.css">

nebo přímo v CSS

@media all {
/* styl pro všechna zařízení */ }

@media screen, projection {
/* styl obrazovku a projekci */ }

@media print {
/* styl pro tisk */ }

@media handheld {
/* styl pro zařízení s malým displayem */ }

Druhým krokem bude zvolit vhodnou šířku stránky. K nastavení šířky lze použít

  • absolutní jednotky
  • pixely
  • jednotky velikosti písma
  • procenta

Nedá se obecně říct, že by některé z těchto jednotek byly lepší než druhé. Každá se hodí pro jinou situaci. Pokud by šlo kupříkladu o výstup na tiskárnu, mohly by se výborně uplatnit absolutní jednotky (cm, mm, in aj.). To však závisí ještě na dalších faktorech (hlavně na tom, jestli má v tomhle případě vůbec smysl šířku zadávat), které zde nebudeme rozvádět. Věnujme se raději výstupu na obrazovku.

Převládající postup je takový, že se webdesignér snaží zabránit horizontálnímu scrollování, které je uživatelsky nepřívětivé. Aby toho dosáhl, vybere takovou šířku, která se mu zdá bezpečná. Obyčejně to bývá kolem 800 px.

Tím ovšem dostane úzké sloupce s krátkými řádky textu. Aby dojem napravil, zmenší písmo. Teď už sloupce nevypadají úzké a řádky krátké. Skvělé! Může existovat lepší, alternativní řešení? To je sporné, my se však přesto o jedno takové pokusíme.

Taktéž nám bude záležet na bezpečné šířce stránky, která zajistí jednak to, že se horizontální posuvník objeví, jakmile bude v důsledku nízkého rozlišení hrozit kolaps layoutu, a jednak to, že se horizontální posuvník neobjeví pokaždé, když dojde k demaximalizaci okna prohlížeče. Obojího dosáhneme deklarováním minimální možné šířky stránky.

div#page {min-width: 600px}

Zůstane už jen jedna nepříjemnost, se kterou se budeme muset vypořádat. Blokové prvky jsou obvykle dost nenasytné a pokud jim v tom nezabráníme, „sežerou“ veškerou dostupnou šíři. I na to však existuje účinný lék. Když prvku přiřadíme maximální šířku (max-width), bude se prvek rozpínat maximálně jen do zadané maximální šířky.

div#page {min-width: 600px; max-width: 60em}

V případě, že zadaná minimální šířka bude shodou okolností reálně větší než zadaná maximální šířka, přednost dostane minimální šířka.

A takhle nějak by to v praxi mohlo vypadat. Předloženou ukázkovou stránku jen tak něco nerozhází.

Poznámka: IE 6 bohužel max-width ani min-width nepodporuje, takže pro něj bude nutné připravit zvláštní řešení.

Není všechno zlato, co se třpytí

Popsaný postup ovšem není zdaleka tak ideální, jak by se na první pohled mohlo zdát. S nepředvídatelnou šířkou bloků je totiž spojena celá řada potíží, které ze své podstaty nelze zcela ideálně zvládnout. A o jaké potíže by se konkrétně mohlo jednat?

Kulaté rohy

Elegantní oblé hrany se často řeší za pomoci dvou obrázků, z nichž první se nastaví jako pozadí hlavičky, druhý jako pozadí patičky webové stránky.

horní rohydolní rohy

Tento způsob nyní nebude možný, protože nepůjde zajistit, aby šířka obrázků byla shodná s šířkou stránky. Místo dvou obrázků se budou muset použít čtyři (čtyři kulaté rohy) a každý z nich se bude muset napozicovat do svého místa. Sofistikovanější způsob s jedním společným obrázkem publikoval Petr Novák. Existuje i snadnější způsob, jenž spočívá v použití vlastnosti border-radius z CSS 3. Bohužel tato vlastnost zatím není v prohlížečích implementována, pouze v těch, které jsou založeny na jádře Gecko, funguje -moz-border-radius. To by se však mělo zakrátko změnit.

Obrázek v záhlaví

Mnohé weby mají v pozadí své hlavičky široký obrázek, např. panorama. Zde hrozí, že takový obrázek bude na své pravé straně nepřirozeně „useknutý“. Řešení tohoto problému se bohužel neobejde bez kompromisů. Buď obrázek uděláme dostatečně dlouhý a smíříme se jak s navýšením datového objemu, tak s tím, že podstatná část obrázku se neukáže, nebo necháme obrázek zvolna přecházet do ztracena.

Délka řádků

S předlouhými řádky jsou dvě nesnáze. Jednak široké odstavce o dvou či třech řádcích významně kazí estetický dojem a jednak se čtenáři lehce stane, že přeskočí řádek – cesta z konce jednoho řádku na začátek následujícího je zkrátka příliš dlouhá a oko se může ztratit. Vyřešit by to mohlo sloupcování, ale to je hudba budoucnosti.

Hrozí i opačný extrém. Někteří webmasteři vkládají obrázky, popřípadě jiné objekty přímo do textu pomocí vlastnosti float. Takto vložený objekt pak třeba zabere na úzké stránce tolik prostoru, že se na řádek s bídou vejde jedno či dvě slova.

Ach jo, stojí zužitkování prostoru a odolnější layout za takové komplikace? To si musí zodpovědět každý sám.

Neprehliadnite: