XHTML a CSS v moderních prohlížečích X

10.10.2009 - PaedDr. Petr Pexa Počet zobrazení: 956  

V jubilejním dílu našeho seriálu, zabývajícího se podporou a funkčností problematických elementů resp. vlastností jazyků XHML a CSS v moderních prohlížečích, se budeme věnovat velmi užitečné vlastnosti overflow, deklarované v jazyce CSS2.

Tato vlastnost je určena k nastavení vzájemného vztahu mezi libovolným blokovým prvkem s nastavenou konkrétní velikostí (např. < div >, < table > apod.) a textem (či jiným obsahem), který se v tomto boxu nachází. Delší text,  který se do takového boxu nevejde, může být vhodným nastavením hodnot vlastnosti overflow  oříznut, může box tzv. přetékat, může být možnost jím uvnitř boxu rolovat apod.

Hodnota visible (none)

První možnost, jak vzájemný vztah obsahu libovolného boxu nastavit, je použití hodnot visible resp. none (jejich význam je shodný, none je starší varianta z jazyka CSS1). V takovém případě obsah nerespektuje nastavenou velikost boxu a přetéká rámeček i přes následující objekty na stránce.

Ve všech testovaných prohlížečích (Explorer 7, 8, Firefox 3.5, Opera 9.5 a vyšší, Safari a Google Chrome) je tento efekt již podporován dobře. V Opeře 8 a 9 ale tato vlastnost funguje jen s libovolnou deklarací DTD (bez ní nikoliv), Explorer 6 a Opera 7 dokonce nadefinovaný box automaticky zvětšily na výšku a obsah nepřetékal.

< div style="border: solid 1px; width: 200px; height: 86px; overflow: visible" >delší text< /div >

Ukázka

Hodnota hidden

Jak již překlad příkazu hidden napovídá, pokud se obsah do nadefinovaného boxu nevejde, bude oříznut na jeho velikost. Tento efekt funguje ve všech prohlížečích spolehlivě.

< div style="border: solid 1px; width: 200px; height: 86px; overflow: hidden" >delší text< /div >

Ukázka

Hodnota scroll

Tato hodnota zobrazí ve vymezeném boxu vždy na pravé a spodní straně rolovací pásy, obsah je oříznut, ale lze jej v horizontálním a zejména vertikálním směru v boxu posouvat.  Rolovací pásy jsou ovšem zobrazeny i v případě, že nejsou nutné, tedy pokud se obsah do boxu vejde. Tato varianta je podporována všemi prohlížeči také dobře.

< div style="border: solid 1px; width: 200px; height: 86px; overflow: scroll" >delší text< /div >

Ukázka

Hodnota auto

Touto hodnotou vlastnosti overflow docílíme zřejmě nejideálnější varianty ve vztahu obsahu uvnitř blokového prvku na webové stránce - rolovací pásy se zobrazí pouze v případě, že jsou nutné, tedy pokud je obsah boxu opravdu delší, než vymezená velikost boxu. V všech prohlížečích je zobrazení správné.

< div style="border: solid 1px; width: 200px; height: 86px; overflow: auto" >delší text< /div >

Ukázka

Hodnota auto s rolovacím pásem na levé straně boxu

Nabízí se také otázka, zda by vertikální rolovací pás nemohl být na levé straně boxu. K horizontálnímu otočení textu byla zavedena nová vlastnost jazyka CSS2 unicode-bidi. Její hodnotou bidi-override a současným nastavením směru zobrazovaného textu vlastností direction:rtl (right to left) lze zobrazovat text dle potřeby (např. v arabských jazycích) směrem zprava doleva, všechny prohlížeče tuto vlastnost podporují. Pro jiné objekty (např. obrázky) tuto vlastnost ovšem použít nelze, funguje pouze pro text.

< span style="unicode-bidi:bidi-override; direction:rtl" >otočený text< /span >

Ukázka

Zjistili jsme ale, že prohlížeč Explorer je schopen tuto vlastnost aplikovat i na  boxy s použitou vlastností overflow. Starší verze Exploreru horizontálně otočily box celý, tedy i s textem uvnitř boxu, Explorer 7 a 8 již otočí pouze box s rolovacími pásy a text ponechá zobrazený normálně zleva doprava. Tento efekt fungoval i v prohlížeči Firefox 2, verze Firefoxu 3.x ho ale již, stejně jako ostatní prohlížeče, nepodporuje.

< div style="border: solid 1px; width: 200px; height: 86px; overflow: auto; unicode-bidi:bidi-override; direction:rtl" >delší text< /div >

Ukázka

Barevné rolovací pásy

Závěrem tohoto článku se ještě zmíníme o poměrně žádaném efektu barevných rolovacích pásů. K jejich obarvení v celém okně prohlížeče (tedy především hlavních rolovacích pásů webové stránky, ale i pásů v textových formulářových polích či pásů v boxech s definovanou vlastností overflow:scroll resp. overflow:auto) lze použít vlastnost scrollbar pro element . Vzhledem k tomu, že definice této vlastnosti pochází z dílny firmy Microsoft, funguje tento efekt ovšem pouze v prohlížeči Explorer, pokud nepoužijeme deklaraci DTD, pak také v Opeře.

Barvu lze nastavit jednodušším způsobem pouze jednu pro celý rolovací pás:

< style type="text/css" >
  html {
       scrollbar-base-color: blue;
              }
< /style >

Přesnější nastavení pro jednotlivé prvky rolovacího pásu:

< style type="text/css" >
  html {
       scrollbar-face-color: #004080;
       scrollbar-highlight-color: #004080;
       scrollbar-shadow-color: #004080;
       scrollbar-3dlight-color: #ffff3f;
       scrollbar-arrow-color: #ffff3f;
       scrollbar-track-color: #007fbf;
       scrollbar-darkshadow-color: #000000;
       }
< /style >

Ukázka