Eigene Stylesheets einbinden

Aus XHTMLwiki

Dieser Artikel bedarf einer Überarbeitung. Näheres ist auf der Diskussionsseite angegeben. Hilf bitte mit, ihn zu verbessern und entferne anschließend diese Markierung.

Inhaltsverzeichnis

1 Einleitung
2 Mozilla / Firefox
3 Internet Explorer (Windows)
4 Internet Explorer (Mac)
5 Opera
6 Safari
7 Links
- 7.1 Thread im Forum
- 7.2 Weblinks

[bearbeiten] Einleitung

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

<html4strict><html id="domain-tld"> </html4strict> 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 <css>#manuelbieh-de a {color: #006600 !important;}</css> die Farbe aller sich auf der Seite befindlichen Links in einen dunklen Grünton ändern. Die Kennzeichnung „!important“ hinter der Styleangabe spielt dabei eine entscheidende Rolle, da aufgrund der Kaskadenregeln des w3c, durch !important gekennzeichnete Regeln eine höhere Priorität besitzen, und daher schwerer durch das seitenspezifische Stylesheet überschrieben werden können. [1]

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

[bearbeiten] Mozilla / Firefox

Die Deklarationen für ALLE gewünschten Seiten werden in der Datei userContent.css gespeichert, die sich im Profilordner des Browsers befindet oder dort angelegt werden muss. Der Profilordner findet sich (unter Win2000 & XP) in der Regel unter: C:/Dokumente und Einstellungen/Benutzername/» Anwendungsdaten/Mozilla/Firefox/Profiles/xxx.default/chrome

Dort gespeichert, ist das Stylesheet nach dem Neustart des Browsers für die angegebenen Seiten verfügbar. Im laufenden Betrieb gemachte Änderungen haben keine Auswirkungen und sind erst nach einem Neustart verfügbar.

Seit Firefox 1.5 / Mozilla 1.8 können auch mit einer speziellen @-Regel einzelne Domains oder URLs angesprochen werden. Dies hat den Vorteil, dass man nicht auf eine CSS-Signatur Im Dokument angewiesen ist. Fügt man folgendes Beispiel in die userContent.css ein, werden alle Links auf www.xhtmlforum.de/.info, die auf www.xhtmlwiki.de verweisen, gelb hinterlegt.

<css> @-moz-document domain(www.xhtmlforum.de), domain(www.xhtmlforum.info) {

  a[href^="http://www.xhtmlwiki.de"] {
    background-color: yellow ! important;
  }
}</css>

Siehe auch: per-site user stylesheet rules

[bearbeiten] 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 nurnoch 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!

[bearbeiten] 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.

[bearbeiten] 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 mehere 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 nacht.

Eine genaue Anleitung zum Thema hat Thomas Scholz im XHTMLForum verfasst: [2] Vielen Dank dafür!

[bearbeiten] 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. Aufgrunddessen 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 [3]