Firefox-Tipps: Websites via userContent.css anpassen

Mo., 13. Okt. 2008 •
Firefox •
Tipps

Vorwort

Eigentlich schreibe ich jetzt über ein Thema, was mir als Webentwickler ja schon ein wenig weh tut, denn es geht darum, die bewusste Gestaltung einer Website in die Macht des Nutzers zu legen und ihn diese (natürlich nur für sich persönlich) anpassen zu lassen.
Klar, Benutzer-Stylesheets gibt es seit „geraumer“ Zeit und sind beim Thema Zugänglichkeit schon fast Routineaufgaben. Auch ist es freilich sinnvoll, sich vom Gedanken zu lösen, dass der Entwickler das Aussehen einer Seite in den Händen hat – Irrtum, das letzte Wort hat immer der Nutzer.
Der Großteil der surfenden Gemeinschaft hat an sich nicht die Kenntnis über diese Fähigkeiten eines Browsers, deswegen will ich hier mal ein (wirklich) kleines Beispiel zeigen, wie man sowas nutzen kann – für was auch immer – ich bspw. für GMX.

Nervfaktor

Ich habe seit Menschengedenken eine E-Mail-Adresse (und bezahle sogar dafür!) bei GMX und ich muss sagen, dass ich aktuell nichts nervenderes kenne, als die Startseite von GMX. Da werden vollkommen irrsinnige und unwichtige „News“ angepriesen, Werbung hier, uninteressanter Schnickschnack da. Ich will mich dem Reizüberfluss und dem Angriff der Banalitäten erwehren … was tun? Klar, ausblenden, aus den Augen, aus dem Sinn.

userContent.css

One CSS to rule them all. Diese unscheinbare CSS-Datei, nur jungfräulich mit dem Anhängsel „-example“ existiert, ist der Schlüssel zum Glücklichsein. Gefunden werden kann sie hier (OS X):

{Nutzeraccount}/Library/Application Support/ »

Firefox/{Profilname}/chrome/

Das » ist nur ein optischer Trenner, die Zeile ist sonst zu lang. {Nutzeraccount} und {Profilname} unterscheiden sich natürlich von Rechner zu Rechner, das Standardprofil heißt „default“. Dort findet sich die userContent-example.css. Wo diese Datei unter Windows liegt, kann ich nicht sagen. Einfach suchen.

Input!

Als erstes entferne man das Anhängsel „-example“ und öffne anschließend die Datei in einem Texteditor. Wer sich etwas mit der CSS-Syntax auskennt, sollte eigentlich keine Verständnisprobleme haben.

Die folgende Zeile befielt dem Firefox, bestimmte Styles auf eine bestimmte URL anzuwenden, hier gmx.net:

@-moz-document url(http://www.gmx.net/) { }

@-moz-document url(…) ist eine Anweisung für Firefox, beim Dokument mit der URL … bestimmte Anweisungen zu erledigen.
Wir erweitern das noch auf die Statusmeldungsseite, falls man sich nicht manuell ausgeloggt hat:

@-moz-document url(http://www.gmx.net/),
url(http://www.gmx.net/de/?status=hinweis) { }

Das ist eigentlich schon das komplizierteste an der Geschichte, der Rest ist Standard. Befüllen wir mal die geschweiften Klammern mit allen Elementen, die wir ausblenden wollen:

@-moz-document url(http://www.gmx.net/),
url(http://www.gmx.net/de/?status=hinweis) {
  #header, #nav, #footer ul,
  #moduleSearchFirst, #infoLine,
  .area.a2, .area.a3 {
    display: none !important;
  }
}

Klartext: Wir listen alle #IDs und .Klassen auf und vergeben ein neues Attribut, display, mit dem Wert none. Da wir sichergehen müssen, dass diese Anweisungen befolgt werden, setzen wir ein !important dahinter.

Der Vergleich

Was das überhaupt bringt, sollen diese beiden vorher/nachher-Screenshots zeigen:

GMX – vorher

GMX – nachher

Wichtig zu wissen:

Mit diesem kleinen Trick wird nur die Darstellung verändert, es wird jedoch alles, was die Seite beinhaltet, vom Browser geladen. Wem das zu lange dauert, der drückt einfach Esc, damit wird der Ladevorgang abgebrochen (natürlich sollte man auf die Login-Box warten).
Änderungen werden erst nach einem Neustart des Firefox wirksam.
Von dieser Spielerei ist nur die reine Startseite betroffen. Sobald man sich eingeloggt hat, ist die URL wieder verschieden (gmx.net/de/) und somit greift das CSS nicht mehr. Man könnte sich hier noch weiter austoben, aber für den Einstieg reicht das erst einmal.