Istnieje możliwość ustalenia własnych kolorów suwaków (scrollbarów). Zadziała to TYLKO w IE, począwszy od wersji 5.5, ponieważ owe polecenie nie wchodzi w skład specyfikacji CSS, a jest tylko rozszerzeniem udostępnianym przez Microsoft i – co zrozumiałe – interpretowane jest jedynie przez jego produkty.
Dodatkowo w danym dokumencie jako prolog trzeba wstawić taki kod:
| <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN”> |
Poprzez prolog ustalamy wersję języka HTML, w której napisana jest strona. Wersja prologu strict wymaga bezbłędnego kodu w 100% zgodnego ze specyfikacją. Ponieważ kolorowe scrollbary nie są zgodne ze standardem, trzeba ustalić tzn. wersję przejściową prologu, która zezwala na używanie niestandardowych znaczników i innych niezgodnych ze standardem elementów wyświetlając przy tym prawidłowo dokument.
Definicję wyglądu suwaków można wstawić zarówno w stylu osadzonym, jak i zewnętrznym. W jaki sposób ją wstawiamy? Proszę popatrzeć poniżej:
| <style type=”text/css”> <!– body { scrollbar-face-color – podstawowy kolor elementów scrollbar-track-color – kolor ścieżki scrollbar-arrow-color – kolor strzałki scrollbar-3dlight-color – kolor świateł elementu 3d scrollbar-highlight-color – kolor świateł scrollbar-shadow-color – kolor cieni scrollbar-darkshadow-color – kolor głębokich cieni } –> </style> |
Jak widać definicja scrollbar’a składa się z 7 części:
Pobaw się kolorami różnych części, to zobaczysz który kawałek kodu odpowiada za konkretną część.
Zobacz przykład:
I jeszcze mała uwaga: w tym przypadku jako selektor zostało zastosowane ciało dokumentu czyli body { }, ale równie dobrze może być to np. TEXTAREA czy IFRAME. Jeżeli chodzi o ramki sprawa ma się jeszcze inaczej. Otóż definicja suwaków nie zadziała jeżeli jako selektor ustawi się IFRAME bądź FRAME. Ponieważ do ramek wczytywany jest zawsze jakiś dokument, kolorowe suwaki należy ustalić właśnie w tym dokumencie. Kod do textarea wyglądałby zaś tak:
| <style type=”text/css”> <!– textarea { scrollbar-face-color: itp… itp… kod, kod i jeszcze trochę kodu…. } –> </style> |
Wypróbujmy nową umiejętność!
