Firefox 52: Unterstützung für userContent.css und Multiprozess-Architektur
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:
[pastacode lang=“css“ manual=“%40-moz-document%20domain(soeren-hentzschel.at)%20%7B%0A%09.reading-time%20%7B%0A%09%09color%3A%20rgb(255%2C%200%2C%200)%3B%0A%09%7D%0A%7D“ message=“userContent.css“ highlight=““ provider=“manual“/]
Das Resultat sieht so aus:
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.
Sören Hentzschel ist Webentwickler aus Salzburg. Auf soeren-hentzschel.at informiert er umfassend über Neuigkeiten zu Mozilla. Außerdem ist er Betreiber von camp-firefox.de, der ersten Anlaufstelle im deutschsprachigen Raum für Firefox-Probleme aller Art. Weitere Projekte sind firefox.agenedia.com, mozilla.de, firefoxosdevices.org sowie sozone.de.
Ah, das erklärt warum meine letzten Versuche mit der userChrome.css nicht mehr erfolgreich waren.
Die 52 scheint wirklich eine Menge neuer Funktionen bringen zu wollen.
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.
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. 😉
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!
Ergänzung zu vorherigem Kommentar: Ich meine das jetzt mit Blick auf die userChrome.css
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.
Perfekt, danke!
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?)
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. 😉
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?
Jupp, das ist in der Betaversion implementiert. 🙂
wOw dankeschön für die schnelle Anwort, dann hol ich mir die beta 🙂