Manuel Bieh – Web Development & Consulting

CSS Signaturen

Eine selten genutzte Möglichkeit bieten aktuelle Browser in der Form vom Einbinden von User Stylesheets, welche man mit dem hinzufügen einer eigenen CSS-Signatur entgegenkommen kann.

Dem HTML-Element wird dabei eine Identifikationsbezeichnung zugewiesen, welche optimalerweise die Form
<html id="domain-tld"> haben sollte. Der User kann so mittels eines speziell angelegten Stylesheets für entsprechende Seiten Umformatierungen vornehmen, um so, beispielsweise bei einer Sehschwäche, Schriftgrade, Zeilenhöhe oder Kontraste zu erhöhen, Bilder auszublenden, oder einfach kleinere Modifikationen nach persönlichem Geschmack vorzunehmen.

Wie man eigene Style-Deklarationen in den gängigen Browsern einbindet, möchte ich versuchen euch mit diesem Artikel näher zu bringen, und gleichzeitig dazu aufrufen in Zukunft ebenfalls eine solche Signatur mitzuliefern. Denn dazu bedarf es gerade mal der Modifikation einer einzigen Zeile im HTML-Dokument, es steigert den Wert einer Seite in meinen Augen jedoch ungemein.

Nehmen wir als Beispiel diesen meinen Weblog welcher die Signatur „manuelbieh-de“ mitgeliefert bekommt. Hier könnte man nun, sollte man regelmäßig meinen Weblog lesen, jedoch immer schon der Meinung gewesen sein, dass mein Farbsinn unzumutbar ist, durch

#manuelbieh-de a {color: #006600 !important;} die Farbe aller sich auf der Seite befindlichen Links in einen dunklen Grünton ändern. Die Kennzeichnung „!important“ hinter der Style-Angabe spielt dabei eine entscheidende Rolle, da aufgrund der Kaskadenregeln des w3c, durch !important gekennzeichnete Regeln die höchste Priorität besitzen, und daher schwerer durch das seitenspezifische Stylesheet überschrieben werden können.

Hat man nun für Seiten, die entsprechende Signaturen anbieten, eigene Style-Angaben gemacht, muss man diese noch in seinem entsprechenden Browser verfügbar machen. Dies erreicht man wie folgt:

Mozilla / Firefox

Die Deklarationen für ALLE gewünschten Seiten müssen in eine Datei geschrieben werden. Diese wird als userContent.css gespeichert und im Profilordner des Browsers, und dort im Cache Unterverzeichnis abgelegt. Dieses findet sich (unter Win2000 & XP) in der Regel unter:
C:/Dokumente und Einstellungen/Benutzername/»
Anwendungsdaten/Mozilla/Firefox/Profiles/xxx.default/chrome

Dort hinein gespeichert ist das Stylesheet nach dem Neustart des Browsers für die angegebenen Seiten verfügbar. Dabei ist darauf zu achten das im laufenden Betrieb keine Änderungen gemacht werden können. Nach einer Änderung muss der Mozilla-Browser stets neugestartet werden um die Änderungen verfügbar zu machen.

Internet Explorer (Windows)

Auch hier müssen alle gewünschten Angaben in eine einzelne CSS-Datei gepackt werden. Um im Internet Explorer das eigene Stylesheets einzubinden ist dann folgendes zu tun:

Browser starten, und in der Menüleiste wählen: „Extras -> Internetoptionen -> Allgemein“. Nun sollte man unten rechts unten einen Button „Eingabehilfen“ sehen. Diesen klickt man, und aktiviert im aufklappenden Fenster den Punkt „Benutzerstylesheet – Dokumente mit dem eigenen Stylesheet formatieren“. Nun muss nur noch das entsprechende Stylesheet ausgewählt werden, [welches wir vorher idealerweise im Mozilla-Profilordner abgelegt haben sollten um in beiden Browsern die gleichen Änderungen zu erhalten], und OK geklickt werden. Nun ist das eigene Stylesheet auch im Internet Explorer verfügbar!

Internet Explorer (Mac)

Hier findet man den entsprechenden Punkt nicht wie beim Windows-Pendant bei den Internetoptionen, sondern unter:
Explorer -> Einstellungen -> Webinhalt -> Lokales Stylesheet

Dort wie gehabt beim entsprechenden Punkt die Datei auswählen, und bestätigen.

Opera

Im Opera sieht die Sache ein wenig anders aus. Hier kann das gewünschte Stylesheet ähnlich wie im Internet Explorer frei gewählt werden, es gibt jedoch auch eine Möglichkeit um das User-Stylesheet in mehrere CSS-Files [beispielsweise für jede Seite ein spezielles] zu teilen. Die einfache Version funktioniert wie folgt:
„Datei -> Einstellungen -> Seitendarstellung“ – unter „Eigenes Stylesheet“ die CSS-Datei auswählen, anschließend unter „Moduskonfiguration…“ den Haken bei „Mein Stylesheet verwenden“ setzen.

Wer neugierig auf die zweite von mir angesprochene Methode geworden ist, liest am besten Selbst nach.
Eine genaue Anleitung zum Thema hat Thomas Scholz im XHTMLForum verfasst:
http://www.xhtmlforum.de/viewtopic.php?p=12196#12198
Vielen Dank dafür!

Safari

Natürlich gibt es auch im Safari auf dem Mac die Möglichkeit ein eigenes Stylesheet einzubinden. Die Möglichkeit dazu findet sich hier unter:
Safari -> Einstellungen -> Erweitert -> Style Sheet -> Auswählen

Gerade – wie am Anfang des Artikels bereits angesprochen – für behinderte Menschen kann dies eine große Hilfe sein, da diese sich Seiten notfalls ihren Bedürfnissen anpassen können. Aufgrund dessen das es lediglich eine Arbeit von Sekunden ist, sollte man in Erwägung ziehen ob man dies nicht nachträglich in aktuellen bzw. zumindest in zukünftigen Projekten beherzigen möchte. Es gibt Leute die darüber durchaus dankbar sein können. Der Wert einer Seite lässt sich so wie gesagt mit nur wenig Aufwand steigern …

Für den Firefox gibt es eine Extension welche Internetseiten automatisch um eine ID in der Form <body id="www-domain-tld"> ergänzen soll. Funktioniert hat dies bei mir im Testlauf jedoch leider nicht fehlerfrei: URIID
http://extensionroom.mozdev.org/more-info/uriid

Links zum Thema:
http://www.mozilla.org/unix/customizing.html#userContent
http://www.xhtmlforum.de/viewtopic.php?p=12196#12198
http://www.squarefree.com/userstyles/user-style-sheets.html
http://extensionroom.mozdev.org/more-info/uriid
http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap06.html
http://www.w3.org/TR/CSS21/cascade.html