Barvení rolovací lišty

v prohlížečích pomocí CSS

Prohlížeče Internet Explorer od verze 5.5 a Chrome umožňují definovat barvu rolovacích lišt (scroll-baru). Mnohým autorům, zejména těm, co rádi pracují s rámy, dělaly šedivé lišty "čáru přes design". Tak teď si mohou přijít na své alespoň co se barev týče. Dnes už také není problém přidat rolovací lištu čemukoliv, tím spíše je dobré moci ji barvit.

Barvení lišty je v Exploreru realizováno pomocí nových CSS vlastností scrollbar-něco-color. Zápisy pro Chrome popisuju někde dole. Firefox lištu barvit nedovoluje, Opera jenom když si to uživatel zapne.

Příklad pro Explorer

Takhle to pak vypadá po zvětšení: názvy barevných částí rolovací lišty

Do hlavičky stránky je vložen stylopis:

<style>
body, html  {
scrollbar-track-color: silver;
scrollbar-face-color: blue;
scrollbar-highlight-color: yellow;
scrollbar-3dlight-color: green;
scrollbar-darkshadow-color: black;
scrollbar-shadow-color: purple;
scrollbar-arrow-color: red; }
</style>

Asi vidíte, že lišta je anatomicky rozdělena na několik částí s různými názvy. Kdo obecně nerozumí syntaxi, nechť se podívá na zápis stylopisů nebo na zápis barev.

Základní obarvení

Lišta se základní barvou červenouPokud se nechcete s barvením lišty moc párat, poslouží vám báječně vlastnost scrollbar-base-color.

<style>
body, html  { scrollbar-base-color: red; }
</style>

Nastavenou barvou (v tomto případě červenou) se obarví některé části lišty. Konkrétně face, 3dlight a svrchní barva oblasti track. Další části lišty se obarví barvami odvozenými. Světlejší odstín nastavené barvy (růžovou) získají higlight a spodní track. Oblast shadow bude mít tmavší odstín (nahnědlou). Arrow a darkshadow se nezmění -- budou černé, ať nastavíte základní barvu jakkoliv.

Lišta v normálním zbarveníModifikace

Kdyby se nezapsaly všechny vlastnosti, lišta by dědila přednastavené barvy. Většinou jsou to různé stupně šedi, bílá a černá.

Track - "dráha" lišty

Pokud není nastavena vlastnost scrollbar-track-color, přebírá se spodní barva z highlight. (Není-li nastaveno ani higlight, pak ze světlejšího odstínu base.) Pokud vlastnost track nastavena je, změní se šachovnicový rastr na jednolitou barvu.

Selektor

Pokud máte na stránce další objekty s lištami (<textarea>, <div> nebo odstavec <p> s CSS vlastností overflow: auto (nebo scroll)), musíte je do deklarace vypsat jako selektor, to jest místo toho "body, html".

Například toto je odstavec, který má omezenou velikost a má nastaveno overflow: auto. Rolovací lištu u něj lze barvit pouze přidáním třídy (class) nebo přímým stylem:
<p style="scrollbar-face-color: green; width: 300px; height: 90px; overflow: auto">

Jak možná na příkladu vidíte, vlastnosti lišty nastavené dříve pro body se zdědily i do odstavce.

Select nefunguje

U prvku formuláře <select> se lišta obarvit nedá. Prohlížeč to patrně nechápe jako lištu, ale prostě nějaký jiný objekt, který náhodou vypadá jako lišta.

Iframe je třeba barvit zevnitř

Lišty plovoucích rámů (iframe), které jsou na stránce umístěné, se nedají barvit z té stránky, ve které jsou vložené. Informaci o barvě lišty je potřeba vložit až do stránky, která se do iframe načítá (atributem src). Jinak řečeno -- lišta patří ke svému dokumentu.

Chrome (webkit)

Prohlížeč Chrome a vykreslovací jádro Webkit také umí modifikovat rolovací lištu. Dělá to ale jiným přístupem. Celá rolovací lišta se dá vyselektovat v dokumentu a poté formátovat běžnými CSS vlastnostmi. Zápis vypadá nějak takhle:

::-webkit-scrollbar {width: 20px; background-color: blue;}
.nejakyprvek::-webkig-scrollbar {width: 16px;}

Dále ještě existují vlastnosti ::-webkit-scrollbar-track-piece. ::-webkit-scrollbar-button, ::-webkit-scrollbar-corner, ::-webkit-scrollbar-thumb:vertical a možná ještě další, ale ty jsem nijak netestoval.

Moc jsem s tím neexperimentoval a asi ani nechci.

Barvení lišty v prohlížeči Konqueror, za obrázek děkuji EuroUFOnoviPodpora

Zda váš prohlížeč barvení lišt používá nebo ne, můžete vidět přímo na této stránce. Podporuje to Konqueror a Internet Explorer od verze 5.5. V Opeře od verze 7.2 (možná 7.1) se dá barvení lišty zapnout: File > Preferences... > Page style > Enable styling of scrollbars (za info děkuju Radku Hrabůvkovi), defaultně je to vypnuté, což znamená, že naprosté většině uživatelů se to neobjeví.

Internet Explorer 6 s <!doctype> nastaveným na striktní verzi HTML nebere nastavení lišty pro tag body, ale jenom pro html. Pro zachování zpětné kompatibility doporučuji psát tam oboje a oddělovat čárkou:

body, html {scrollbar-...}

Je nutné si ale uvědomit, že lišta jako taková není objekt dokumentu, ale pouze vlastnost objektu (většinou body).

Ani moderní prohlížeče neumožňují obarvit stavovou lištu, nabídku nebo titulkový proužek (to je asi dobře).

Také byste měli přemýšlet o psychické podpoře čtenářů. Barevná lišta s více jak dvěma odstíny by jim klidně mohla způsobit morální šok. Příliš složitě barvená lišta podstatně snižuje použitelnost stránek.

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.