rolovací lišty pro oříznuté části stránky
Overflow a clip - Co je občas potřeba - Overflow - Clip - Tři tečky za text - Souhrnný příklad
CSS vlastnosti overflow a clip nejsou moc známé. Všechny prohlížeče je ale podporují, a tak doporučuji overflow a clip bez obav používat.
Overflow a clip byly do kaskádových stylů přidány spolu s absolutním a relativním pozicováním. Overflow je užitečnější než clip.
Pokud děláte stránky častěji, pravděpodobně jste se setkali s těmito problémy:
Overflow znamená přetečení. Aby bylo co "přetékat", HTML objekt (nejlépe asi <div>) musí mít stylem nastavenou výšku nebo šířku nebo oboje. Například chci, aby se mi dlouhý text vešel do malého prostoru 200x86. Zápis bude následující:
<div style="width: 200px; height: 86px">dlouhý text</div>
Co když ale bude text příliš dlouhý? Pokud nenastavím overflow, tak normálně ze zadaných rozměrů vyteče, takže bude vyšší než těch 86px. Jak tomu zabránit?
Jedna možnost je tedy oříznutí. V kódu:
<div style="width: 200px; height: 86px; overflow: hidden">dlouhý text</div>
Zápis způsobí doslova skrytí přetečeného textu. Obsah nebude pouze zneviditelněn, ale bude jakoby odstraněn, takže nebude zabírat místo dalším elementům.
Overflow: hidden se často použije jako ochrana před situací, kdy si uživatel v prohlížeči nastaví příliš velké písmo, takže by se mohla rozbít pečlivě vyladěná struktura stránky. A nemusí to být jenom velikost písma v prohlížeči, co může stránku rozbít. Klasicky jsou to příliš široké cizí reklamy, příliš dlouhé položky z databáze, příliš zanořené nezalamované komentáře stránek. Prostě obsah, který autor stránek nemůže přímo ovlivnit při psaní kódu, ale který se objeví až "při provozu". Osobně do takto omezených divů uzavírám veškerou nevypočitatelnou reklamu a položky z databáze.
Je nutno počítat s tím, že se element může oříznout třeba v půlce řádku nebo písmenka.
Poznámka: v některých přehledech CSS je namísto správné hodnoty hidden uvedena nefunkční hodnota "clip". Pozor na to.
Další hodnoty scroll a auto přebývající obsah také skryjí (stejně jako hodnota hidden), ale zobrazí rolovací lišty. Hodnota scroll je ale zobrazí v obou směrech (horizontálním i vertikálním) a i když nejsou potřeba.
<div style="width: 200px; height: 86px; overflow: scroll">dlouhý text</div>
Osobně hodnotu scroll moc nepoužívám, protože nefunkční rolovací lišty prostě nejsou hezké (zejména ty horizontální). Nejraději používám hodnotu auto.
Pokud je obsah elemetu větší než předepsaný, skryje zbytek a v potřebných směrech zobrazí rolovací lišty.
<div style="width: 200px; height: 86px; overflow: auto">dlouhý text</div>
Výhodné je, že se většinou nevykreslí spodní rolovací lišta (není hezká). Pokud obsah nepřeteče, rolovací lišta se vůbec nezobrazí, což se také hodí.
Programátoři Microsoft Internet Exploreru si uvědomili, že je někdy potřeba určit jiné chování pro horizontální a vertikální směr. Proto vymysleli dvě nestandardní (ale užitečné) vlastnosti. V Mozille v době psaní tohoto textu (v roce 2003) nefungovaly, nyní (v roce 2007) už je Mozilla a Firefox umějí. Opera tyto vlastnosti stále nezná.
Pozor na zápis, není to x-overflow a y-overflow, ale overflow-x a overflow-y.
Na podobnou věc má Mozilla nové hodnoty vlastnosti overflow. Např. overflow: -moz-scrollbars-horizontal;. Další hodnoty jsou -moz-scrollbars-vertical a -moz-scrollbars-none. Abyste docílili stejného vzhledu i v Internet Exploreru, je potřeba použít nějakých triků, např.
div { overflow: -moz-scrollbars-horizontal; overflow: "visible"; overflow-x: auto }
Horizontální skrollování ve více prohlížečích - příklad
Vertikální skrollování ve více prohlížečích - příklad
Vlastnost clip (angl. "zastřihnout") dovoluje zobrazit jen určitý výsek prvku. Pokud vás nenapadá, k čemu je ostřihnutí elementů dobré, je to v pořádku. Téměř se to totiž nepoužije. Stačí vědět, že to existuje, kdyby se to snad někdy hodilo.
Vlastnost clip se dá použít pouze na elementy, které mají nastaveny absolutní pozici (nevím proč, ale je to tak). Absolutní pozice se zapisuje také css stylem, symbolicky např.
<tag style="position: absolute; width: 200px; height: 100px">obsah</tag>
Je dobré nastavit též výšku a šířku (např. 200x100), popřípadě nastavit pozici (pomocí top a left) a všechno je připraveno na ostřihnutí.
Syntaxe clip používá klíčové slovo rect, což znamená obdélník, a v závorce parametry obdélníku. V příkladu je oříznutým elementem např. odstavec (tag <p>).
<p style="clip: rect(20px 120px 80px 50px); width: 200px; height: 100px; position: absolute">Oříznutý element. Zobrazuje se jenom tak malý obdélníček, jak je předepsáno vlastností clip: rect.</p>
Čísla v závorce za rect jsou souřadnice, na kterých se bude stříhat. Pořadí je podle hodinových ručiček: horní, pravý, spodní, levý střih. První údaj (20px) říká, že horní střih povede 20px odshora. Druhý údaj říká, že pravý sřih bude 120 pixelů od levého okraje. Třetí údaj patří spodnímu ostřihu, čtvrtý levému.
Taky mi trvalo dost dlouho, než jsem v tom našel logiku. Hodnoty se dají zadávat i v procentech, ale neznám způsob, jak souřadnice vztáhnout k pravému nebo dolnímu okraji. Teoreticky se dají zadávat i záporné hodnoty, používám to občas při programování reklam (formát roll-out a opona přes katalog), když se vnitřek elementu hýbe.
Pokud horní ořez (první hodnota) bude větší než dolní (třetí hodnota), z elementu nebude nic vidět. Totéž se stane, když bude čtvrtá hodnota větší druhé.
Pokud se místo některého parametru napíše "auto" (bez uvozovek), nebude se to v daném směru ořezávat. Například pokud chci obrázek oříznout jenom shora o 15 pixelů, napíšu
<img src="obrazek.gif" style="position: absolute; clip: rect(15px auto auto auto)">
Doufám, že mě nyní nepodezříváte, že jsem prodejcem aut!
Prohlížeče někdy trochu chybují ve vykreslování ostřihnutých elementů, se kterými se skroluje. Zejména Mozilla má tendenci nezobrazovat jednou odscrollovanou oblast. Ale není to nic fatálního, stačí to vyzkoušet a případně pro Mozillu zakázat použitím uvozovek kolem "rect()" nebo jiným hackem. Od verze 1.7 by to už mělo být opraveno.
Internet Explorer a Chrome uměj elementům oříznutým (které mají overflow: jiné než visible) vykreslit tři tečky na konec dlouhých slov, které se nevejdou do zobrazené části elementu. Dělá se to zápisem
text-overflow: ellipsis; overflow: hidden
Připravil jsem na ukázku fiktivní html stránky, na které je použito absolutní pozicování článků. Protože u článků nikdo neví předem, jak budou dlouhé, je nebezpečí, že by se překrývaly. Právě to řeší overflow.
V příkladu jsou použity třídy a identifikátory pro články. Články mají nastaveno overflow: auto, takže se u nich zobrazily rolovací lišty (jsou náhodou dlouhé). Rolovací lišty jsou obarvené (což zatím nefunguje v Mozille).
Náhodou jsem zkusil použít vlastnost clip na vytvoření efektu, který zajímavě funguje. Jedná se o skrytí horní šipky rolovací lišty; předpokládám totiž, že čtenář bude rolovat zejména dolů.
div.clanek {clip: rect(16px auto auto auto); padding-top: 26px}
Horní šipka má 16 pixelů, o šestnáct jsem zvětšil i horní vnitřní okraj (padding-top) na 26, aby to neořízlo i článek. Vypadá to velmi zajímavě. Každopádně doporučuji mrknout na zdroj.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.