CSS: Farbige Scrollbalken loswerden

Deutsche Übersetzung der Seite "Web Style Sheets CSS tips & tricks"
Originale Version: http://www.w3.org/Style/Examples/007/scrollbars.html
Aktuelle - übersetzte - Version: http://www.ich-lerne-css.de/Style/Examples/007/scrollbars.html
Übersetzer: A.Friedrich
Bookmark:

Sehr geehrter Leser dieses Dokumentes - bitte beachten Sie dass es sich bei dieser Seite um die Übersetzung eines W3C Textes handelt.
Der Original Text ist urheberrechtlich geschützt, bitte beachten Sie die im Originaldokument vermerkten Hinweise. Die Rechte an der Übersetzung selbst liegen allein beim Übersetzer. Der Übersetzer bedankt sich bei den folgenden Seiten für Ihre Unterstützung: BO, css. Für eventuell vorhandene Fehler in der Übersetzung kann keine Gewähr übernommen werden, das einzig massgebliche und legitime Dokument ist das englische W3C Original.
Kommentare des Übersetzers sind als solche gekennzeichnet und unterliegen ebenfalls dem Copyright des Übersetzers. Diese sind nicht Bestandteil des englischen Originaldokumentes.

Scrollbars - ohne Farben

Einige Browser (IE, Konqueror) sind dazu übergegangen nicht-Standard Eigenschaften wie 'scrollbar-shadow-color' oder 'scrollbar-track-color' zu unterstützen. Diese Eigenschaften sind jedoch nicht Regel-konform! Sie sind weder in CSS definiert noch speziell das Produkt eines Herstellers (wenn sie z.B. mit dem Prefix "-vendor-" markiert wären). Zum Glück kann man sie ziemlich einfach los werden.

Um sicher zu gehen dass Ihr Browser auch die Standard-Browserfarben für die Scrollbalken verwendet nutzen Sie die Anweisungen user style sheet und '!important'. User Style Sheets können im Browser konfiguriert werden. Im IE z.B. unter der Option Extras - Internetoptionen - Eingabehilfen. Im Konqueror im "Stylesheets" Tab.

Wenn Sie noch keinen User Style Sheet erzeugt haben können Sie den Folgenden in einer neuen CSS Datei abspeichern.

Fügen Sie die folgenden Zeilen Ihrer Style Sheet Datei hinzu:

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

Den Pfad zur Datei geben Sie dann im jeweiligen User Styles - Menupunkt Ihres Browsers ein.

Das sollte es sein. Sie müssen den Browser neu starten um das Resultat zu überprüfen. Rufen Sie zum Testen z.B. meine kleine Testseite auf.

Web Style Sheets CSS Tips & Tricks

Scrollbars - ohne Farben

Web Style Sheets
CSS Tips & Tricks