13 Reaktionen

Firefox 52: Unterstützung für userContent.css und Multiprozess-Architektur

Geschätzte Lesedauer:

Firefox besitzt seit vielen Jahren die eingebaute Möglichkeit, die Gestaltung beliebiger Webseiten mittels CSS zu beeinflussen – und das vollkommen ohne Erweiterung. Bislang war dies aber nicht gemeinsam mit der neuen Multiprozess-Architektur Electrolysis (e10s) möglich. Das ändert sich ab Firefox 52: dann kann die Datei userContent.css auch gemeinsam mit e10s genutzt werden.

Firefox besitzt ein mächtiges Werkzeug von Haus aus integriert, welches er ermöglicht, die Gestaltung von Webseiten nahezu beliebig zu beeinflussen, zumindest im Rahmen dessen, was mit CSS möglich ist. Eine Erweiterung wie Stylish ist also für Firefox-Nutzer häufig gar nicht notwendig, wenn die Optik einer Webseite geändert werden soll.

Dazu wird im Profil-Verzeichnis von Firefox ein Unterverzeichnis chrome und darin eine Datei mit dem Namen userContent.css erstellt. In das Profilverzeichnis gelangt man per Klick auf eine Schaltfläche nach Eingabe von about:support in die Adressleiste. In diese CSS-Datei schreibt man einfach alle gewünschten CSS-Deklarationen hinein und kann damit das CSS einer Webseite beliebig überschreiben. Anschließend ist noch ein Neustart von Firefox notwendig, damit die Änderungen übernommen werden.

Tipp: Ähnliches gibt es statt für Webseiten auch für Firefox selbst. Entsprechende Änderungen werden stattdessen in eine Datei userChrome.css im selben Verzeichnis gespeichert.

Um beispielsweise die geschätzte Lesedauern in Artikeln dieses Blogs rot zu färben, kann Folgendes in die Datei userContent.css geschrieben werden:

userContent.css
@-moz-document domain(soeren-hentzschel.at) {
	.reading-time {
		color: rgb(255, 0, 0);
	}
}

Das Resultat sieht so aus:

userContent.css Firefox

Bislang konnte diese Möglichkeit nicht gemeinsam mit der neuen Multiprozess-Architektur Electrolysis, kurz: e10s, genutzt werden. Dies ändert sich mit der heutigen Nightly-Version von Firefox 53. Ab sofort können userContent.css und e10s gemeinsam genutzt werden. Geplant ist, diese Neuerung nachträglich in die Developer Edition von Firefox 52 zu integrieren, so dass die Möglichkeit, Webseiten auch bei aktivierter Multiprozess-Architektur per userContent.css umzugestalten, auch Teil von Firefox ESR 52 sein wird.

Dieser Artikel wurde von Sören Hentzschel verfasst.

Sören Hentzschel ist Webentwickler und Mozilla Repräsentant (Alumnus). Neben diesem Mozilla-Blog betreibt er unter anderem noch firefoxosdevices.org sowie das Fußball-Portal Soccer-Zone und ist außerdem Administrator des deutschsprachigen Firefox Hilfeforums Camp Firefox.

13 Kommentare - bis jetzt!

Eigenen Kommentar verfassen
  1. blub
    schrieb am :

    Ah, das erklärt warum meine letzten Versuche mit der userChrome.css nicht mehr erfolgreich waren.

  2. Nym
    schrieb am :

    Die 52 scheint wirklich eine Menge neuer Funktionen bringen zu wollen.

  3. schrieb am :

    Is there an option to edit this CSS file from within Firefox itself, e.g. via a text field in about:preferences somewhere? If no, why not? It would certainly be very useful.

  4. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    No, there is no option to edit this CSS file from within Firefox itself. I don't know why not but I think the reason is that it's not useful for the majority of the users. It's a feature for "power users" and power users are able to edit a file. And there are add-ons like Stylish. 😉

  5. Guido
    schrieb am :

    Hi,

    CSS kann ich gut genug, aber wie finde ich die passenden Selektoren? Gibt es eine Möglichkeit, beispielsweise die Dev-Tools/den Inspektor auf der Benutzeroberfläche von FF zu nutzen?

    Danke!

  6. Guido
    schrieb am :

    Ergänzung zu vorherigem Kommentar: Ich meine das jetzt mit Blick auf die userChrome.css

  7. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    Hi,

    öffne die Entwickler-Werkzeuge (F12), gehe dort in die Einstellungen und aktiviere die Debugging-Werkzeuge für Browser-Chrome und Add-ons. Es kann sein, dass "Externes Debugging" auch noch aktiviert werden muss, da bin ich mir jetzt nicht sicher. Anschließend gibt es im Menü der Entwickler-Werkzeuge einen Menüpunkt "Browser-Werkzeuge". Dieser entspricht u.a. dem Inspector für Webseiten, bloß eben für Firefox selbst.

  8. Guido
    schrieb am :

    Perfekt, danke!

  9. rugk
    schrieb am :

    Vielleicht eine etwas blöde Frage, aber geht das auch  in Firefox für Android?

    (Gibt es da überhaupt ein Profil Verzeichnis, so wie man es vom Desktop her kennt?)

  10. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    Nein, keine blöde Frage, und nein, sowas wie userContent.css gibt es nicht für Android. Aber das Add-on Stylish gibt es für Android. 😉

  11. Merlin
    schrieb am :

    ich benutz den aktuellen FF 51 mit aktiviertem e10s, meine usercontent.css funktioniert da erwartungsgemäß nicht, weißt du zufällig ob das in der beta 52 schon implementiert ist, falls ja würd ich die beta installiern, oder muß man da abwarten bis die Final erscheint?

  12. Sören Hentzschel Verfasser des Artikels
    schrieb am :

    Jupp, das ist in der Betaversion implementiert. 🙂

  13. Merlin
    schrieb am :

    wOw dankeschön für die schnelle Anwort, dann hol ich mir die beta 🙂

Und jetzt du! Deine Meinung?

Erforderliche Felder sind mit einem Asterisk (*) gekennzeichnet. Die E-Mail-Adresse wird nicht veröffentlicht.