CSS für fremde Webseiten (unter Ubuntu - Firefox)

[Linuchs]

Moin,

ich wollte testen, ob ich in einer lokalen CSS-Datei fremde HTML-Seiten beeinflussen kann.

Die Anleitungen, die ich finde, sind entweder für Windows, uralt oder unverständlich.

Habe den Ordner Persönlicher Ordner/chrome angelegt und die Datei userChrome.css hineinkopiert. Die habe ich bei Pale Moon gefunden und um eine Position erweitert:

/* 2022-01-30 Test Anpassung fuer wer-weiss-was.de - Zitate beeinflussen */
.quote {
  color: #f00;
}

Dann noch layout.css.constructable-stylesheets.enabled und toolkit.legacyUserProfileCustomizations.stylesheets auf true gesetzt, Firefox neu gestartet. Keine Veränderung auf der fremden Webseite.

Was habe ich falsch gemacht?

Gruß, Linuchs

[Rolf B]

Hallo Linuchs,

ich habe keine Ahnung, aber der hier hat mir was dazu erzählt.

(1) Dein "Persönlicher Ordner" ist das, was unter about:support als Profilordner angegeben ist? Zumindest heißt das Ding in meinem deutschen Firefox für Windows so.

Was habe ich falsch gemacht?

Du hast mutmaßlich die falsche Datei verwendet.

(2) Die Datei muss userContent.css heißen, wenn Du geladene Webseiten beeinflussen willst. Zumindest sieht meine Google-Suche jetzt knackig pink aus.

Wenn Du Angaben aus Autoren-Stylesheets überschreiben willst (also alles, was die Website mitbringt), bist Du auf "!important" angewiesen. Siehe Selfwiki, Thema Kaskade.

userChrome.css beeinflusst die "Chrome" Teil des Browsers - das ist das Geraffel um die geladene Webseite herum und hat nichts mit dem gleichnamigen Browser zu tun. Oder vielleicht doch - FF ist älter als der Google-Browser und der Terminus "Chrome" vermutlich älter als der Chrome-Browser.

Ich habe allerdings keine Ahnung, welche Styles man für das Browser-Chrome verwenden kann.

Rolf

[Der Martin]

Hallo,

(1) Dein "Persönlicher Ordner" ist das, was unter about:support als Profilordner angegeben ist? Zumindest heißt das Ding in meinem deutschen Firefox für Windows so.

yep, in der englischen Originalfassung heißt es Profile Folder. Und, wow, about:support kannte ich noch nicht. Ist ja interessant, was man da so alles ablesen kann.

(2) Die Datei muss userContent.css heißen, wenn Du geladene Webseiten beeinflussen willst. Zumindest sieht meine Google-Suche jetzt knackig pink aus.

I bäh! 😉

Wenn Du Angaben aus Autoren-Stylesheets überschreiben willst (also alles, was die Website mitbringt), bist Du auf "!important" angewiesen.

Ich schlage alternativ eine Extension wie z.B. Stylem vor. Damit kann man nicht nur gezielt Host-spezifische CSS-Regeln hinterlegen, sondern sie auch komfortabel aus dem Browser heraus bearbeiten.

userChrome.css beeinflusst die "Chrome" Teil des Browsers - das ist das Geraffel um die geladene Webseite herum und hat nichts mit dem gleichnamigen Browser zu tun. Oder vielleicht doch - FF ist älter als der Google-Browser und der Terminus "Chrome" vermutlich älter als der Chrome-Browser.

Ja, hier ist eher chrome im Sinne von Zierleisten gemeint.

Ich habe allerdings keine Ahnung, welche Styles man für das Browser-Chrome verwenden kann.

Ich hatte da mal was, ist aber Jahre her, erinnere mich nur noch an die Tatsache an sich.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Samuel fiedler]

Hallo Der Martin!

Ich habe allerdings keine Ahnung, welche Styles man für das Browser-Chrome verwenden kann.

Ich hatte da mal was, ist aber Jahre her, erinnere mich nur noch an die Tatsache an sich.

Man muss chrome://browser/content/browser.xhtml (falls das nicht funktioniert, chrome://browser/content/browser.xul) inspizieren. Dort ist alles genau so wie im echten Browser.
Man kann aber auch in den Entwicklertools in den Einstellungen unter “Erweiterte Einstellungen“ “Debugging-Werkzeuge für Browser-Chrome und Add-ons aktivieren“ und “Externes Debugging aktivieren“ jeweils aktivieren.
Dann kann man in der Menüleiste unter “Extras“ > “Browser-Werkzeuge“ > “Browser-Werkzeuge“ den Browser-Debugger aktivieren. Nun lässt sich alles inspizieren.

Au revoir,
Samuel Fiedler

[Linuchs]

Hallo Rolf,

ich finde es immer wieder verblüffend, wie du dich in fremde Probleme reinkniest. Danke dafür.

(1) Dein "Persönlicher Ordner" ist das, was unter about:support als Profilordner angegeben ist?

Aha, Fehler #1:

Dann wohl eher der Ordner

(2) Die Datei muss userContent.css heißen

Aha, da bin ich Falschinformationen aufgesessen. Die gibt es nicht im Ordner mit dem unaussprechlichen Namen. Ich benenne meine also um und verschiebe die in diesen Ordner.

Wenn Du Angaben aus Autoren-Stylesheets überschreiben willst (also alles, was die Website mitbringt), bist Du auf "!important" angewiesen.

Den Verdacht hatte ich schon, da wird wohl userContent.css zuerst geladen (bzw. ist mit dem Start vom FF präsent?). Ich ergänze also.

"Chrome" ... hat nichts mit dem gleichnamigen Browser zu tun

Chrome ist doch das Wort für Farbe? (altgriechisch χρῶμα chrṓma, deutsch ‚Farbe‘) Hatte ich mit dem gleichnamigen Browser gar nicht verknüpft und das für den FF gültig gehalten.

Der Erfolg ist noch nicht sichtbar. Ich sende also diese Antwort ab, um den FF neu zu starten.

Gruß, Linuchs

[Linuchs]

Die Datei userContent.css enthält außer Kommentaren nur

.quote {
  color: #f00 ! important;
}

Die rote Schrift unter .quote klappt nach Neustart vom FF leider nicht

<aside class="quote no-group" data-username="Zerschmetterling" data-post="3" data-topic="9496503">
<div class="title" style="cursor: pointer;">
<div class="quote-controls"><span class="svg-icon-title" title="erweitern/minimieren"><svg class="fa d-icon d-icon-chevron-down svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#chevron-down"></use></svg></span><a href="/t/verkauf-von-firmennamen/9496503/3" title="springe zum zitierten Beitrag" class="back"><svg class="fa d-icon d-icon-arrow-up svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#arrow-up"></use></svg></a></div>
<img alt="" src="https://www.wer-weiss-was.de/user_avatar/www.wer-weiss-was.de/zerschmetterling/40/30391_2.png" class="avatar" width="20" height="20"> Zerschmetterling:</div>
<blockquote>
<p>Was bedeutet e.K.?</p>
</blockquote>
</aside>

Auch beim Untersuchen wird die Datei userContent.css nicht erwähnt. Entweder, sie muss anders heißen, ist im falschen Ordner oder muss irgendwo aktiviert werden.

Unter about:config lese ich dies:

Auch disallow = false und Neustart FF rötet nicht.

[Rolf B]

Hallo Linuchs,

bei mir ist es so, dass ich nach jeder Änderung der userContent.css den Fuchs neu starten muss, damit es greift.

Das Space hinter dem ! ist etwas, was ich nicht verwende und ich wusste gar nicht, dass es erlaubt ist. Aber es funktioniert (bei mir).

bist Du auf "!important" angewiesen.

Den Verdacht hatte ich schon, da wird wohl userContent.css zuerst geladen (bzw. ist mit dem Start vom FF präsent?).

Hast Du den Kaskade-Artikel im Wiki gelesen? Die Ladereihenfolge ist unerheblich, es gibt eine festgelegte Priorität für Useragent-Styles (=Browserdefault), User-Styles (=usercontent.css) und Autoren-Styles (das, was die Website mitbringt). Erst innerhalb dieser Priorität kommt die Spezifität zum Zuge, und DANACH erst die Ladereihenfolge.

Das wichtige bei !important (this was punny by intention) ist, dass Autoren-Stylesheets Vorrang vor User-Stylesheets haben. Außer bei !important - da hat das User-Stylesheet Vorrang vor dem Autoren-Stylesheet.

Ein weiterer Grund für Nichtfunktion könnte sein, dass Du die Farbe für's aside festlegt, aber darin jede Menge Sub-Elemente stehen, die eigene color-Angaben haben könnten. Hast Du die Farb-Styles für das <aside> überprüft? Das userContent.css sollte dort sichtbar sein.

Rolf

[Der Martin]

Hallo Rolf,

Das Space hinter dem ! ist etwas, was ich nicht verwende und ich wusste gar nicht, dass es erlaubt ist. Aber es funktioniert (bei mir).

dass das erlaubt ist, wusste ich wohl. Aber ich habe mich schon oft über die eigenartige Syntax gewundert. Und darüber, dass man ausgerechnet ein Ausrufezeichen als Trennzeichen gewählt hat, das in vielen anderen Kontexten die Bedeutung einer Negation hat. Also "not important". 😀

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Gunnar Bittersmann]

@@Der Martin

Aber ich habe mich schon oft über die eigenartige Syntax gewundert. Und darüber, dass man ausgerechnet ein Ausrufezeichen als Trennzeichen gewählt hat, das in vielen anderen Kontexten die Bedeutung einer Negation hat. Also "not important". 😀

Du wirst dich sicher auch wundern, dass :nth-child(1) das erste Geschwisterkind selektiert, obwohl die 1 in vielen anderen Kontexten die Bedeutung „zweites“ hat. 🤨

😷 LLAP

[Der Martin]

Hallo,

Aber ich habe mich schon oft über die eigenartige Syntax gewundert. Und darüber, dass man ausgerechnet ein Ausrufezeichen als Trennzeichen gewählt hat, das in vielen anderen Kontexten die Bedeutung einer Negation hat. Also "not important". 😀

Du wirst dich sicher auch wundern, dass :nth-child(1) das erste Geschwisterkind selektiert, obwohl die 1 in vielen anderen Kontexten die Bedeutung „zweites“ hat. 🤨

gut erkannt. Ja, das geht mir auch etwas zuwider.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Rolf B]

Hallo Martin und Gunnar,

das C in CSS steht nicht dafür, dass es die Makroassembler-Denke von C verwendet.

Dass Indexe bei 1 beginnen, ist in etlichen Programmiersprachen normal. Je näher am Business, desto öfter.

Rolf

[Der Martin]

Hallo,

das C in CSS steht nicht dafür, dass es die Makroassembler-Denke von C verwendet.

nein, aber der Gedanke ist interessant. 😉

Dass Indexe bei 1 beginnen, ist in etlichen Programmiersprachen normal. Je näher am Business, desto öfter.

Ich weiß. Für mich fühlt es sich trotzdem "falsch" an.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Gunnar Bittersmann]

@@Der Martin

das C in CSS steht nicht dafür, dass es die Makroassembler-Denke von C verwendet.

Mir war das klar.

Dass Indexe bei 1 beginnen, ist in etlichen Programmiersprachen normal. Je näher am Business, desto öfter.

Ich weiß. Für mich fühlt es sich trotzdem "falsch" an.

Das hab ich befürchtet.

Falsch ist aber, dass in etlichen Programmiersprachen Indexe bei 0 beginnen.

Da haben uns die Urväter von Arrays totalen Mist eingebrockt, der jetzt nicht mehr zu korrigieren ist.

Und deshalb muss man so’n Quatsch wie array[array.length - 1] schreiben, um an das letzte Element im Array zu kommen.

Wenn man die Zählung bei 1 beginnen würde (wie das jeder vernünftige Mensch tut), wäre das letzte Element ganz natürlich array[array.length].

Schön wär’s gewesen.

😷 LLAP

[Der Martin]

Hi,

Dass Indexe bei 1 beginnen, ist in etlichen Programmiersprachen normal. Je näher am Business, desto öfter.

Ich weiß. Für mich fühlt es sich trotzdem "falsch" an.

Das hab ich befürchtet.

Falsch ist aber, dass in etlichen Programmiersprachen Indexe bei 0 beginnen.

das ist Ansichtssache.

Und deshalb muss man so’n Quatsch wie array[array.length - 1] schreiben, um an das letzte Element im Array zu kommen.

Wenn man die Zählung bei 1 beginnen würde (wie das jeder vernünftige Mensch tut), wäre das letzte Element ganz natürlich array[array.length].

Aber beim Gruppieren ist es Murx: Möchte ich durchnumerierte Elemente z.B. in Zehnergruppen splitten, hat die erste Gruppe nur 9 statt 10 Elemente, weil die 0 fehlt. Oder die Gruppengrenzen liegen so daneben, dass sie nicht mit dem Wechsel der Zehnerstelle zusammenpassen. Das sieht dann auch irgendwie kaputt aus.

Schön wär’s gewesen.

Noch schöner, wenn man's sich aussuchen kann. Das gibt's AFAIK auch.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Rolf B]

Hallo Gunnar,

wie wär's mit COBOL

01  FILLER OCCURS 5.
    05  someArray PIC X(10).

oder BASIC

OPTION BASE 1
DIM someArray(5) as string

oder Pascal

var someArray[1..5] OF STRING;

oder PL/1

DCL someArray(1:5) CHAR(10) varying;

Das Schreckliche an dieser Liste ist: in all diesen Sprachen hab ich schon programmieren müssen 😕

Rolf

[JürgenB]

Hallo Rolf,

wie wär's mit COBOL

01  FILLER OCCURS 5.
    05  someArray PIC X(10).

oder BASIC

OPTION BASE 1
DIM someArray(5) as string

oder Pascal

var someArray[1..5] OF STRING;

oder PL/1

DCL someArray(1:5) CHAR(10) varying;

ich ergänze mal:

oder Fortran

REAL, DIMENSION(7:17) :: x

Gruß
Jürgen

[ottogal]

Da möchte ich widersprechen.
Gerade neulich hatten wir einen Fall, wo man sehr schön den Vorteil davon sieht, die Indexzählung bei 0 beginnen zu lassen. Da sind tatsächlich die Urväter von all dem hier schnell draufgekommen.
Ein Missverständnis liegt natürlich vor, den "Programmierern" vorzuwerfen, sie würden die 0 zu den natürlichen Zahlen rechnen...

[Der Martin]

Hallo,

Ein Missverständnis liegt natürlich vor, den "Programmierern" vorzuwerfen, sie würden die 0 zu den natürlichen Zahlen rechnen...

dabei ist die 0 die natürlichste aller Zahlen überhaupt.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Linuchs]

dabei ist die 0 die natürlichste aller Zahlen überhaupt.

Immer eine Handbreit Wasser unterm Kiel

Keine Handbreit Wasser unterm Kiel soll natürlich sein? Spezialfall Plattbodenschiff, aber bei Seglern sehr unbeliebt.

[ottogal]

Und deshalb muss man so’n Quatsch wie array[array.length - 1] schreiben, um an das letzte Element im Array zu kommen.

Auch das ist doch ganz sinnvoll: Es ist das 1. Element von hinten.
Es wäre doch schwerer lesbar, wenn
array[array.length - 4]
das 5. Element von hinten bezeichnen würde...

[Rolf B]

Hallo ottogal,

Auch das ist doch ganz sinnvoll: Es ist das 1. Element von hinten.

I beg to differ

Wieso ist es sinnvoll, das 1. Element von hinten mit "-1" zu indexieren, während man das erste Element von vorne mit "+0" indexiert?

Wenn Du schon Eselsbrücken baust, dann schick bitte keine Zebras drüber…

Es ist natürlich genauso wenig logisch, das erste Element von vorn mit +1 und das erste Element von hinten mit -0 zu indexieren.

Fazit: Deine Eselsbrücke steht mutmaßlich in der Nähe von Lüdenscheid

Rolf

[ottogal]

Okay, war schon eine Eselei meinerseits...

[Linuchs]

obwohl die 1 in vielen anderen Kontexten die Bedeutung „zweites“ hat.

mySQL:

SUBSTRING(string,1,4) die ersten 4 Stellen

[Rolf B]

Hallo Linuchs,

genau. Und PHP

   substr($aString, 1, 4)

die Stellen 2-5. Für einen XAMP-Entwickler sicherlich eine besondere Herausforderung.

Rolf

[Linuchs]

Ein weiterer Grund für Nichtfunktion könnte sein, dass Du die Farbe für's aside festlegt, ... Hast Du die Farb-Styles für das <aside> überprüft? Das userContent.css sollte dort sichtbar sein.

Ja, das habe ich geprüft, die userContent.css wird nicht erwähnt.

Nehme jetzt mal ein Element, das keine Kinder hat:

.quote {
  color: #f00 ! important;
}
blockquote p {
  color: #f00 ! important;
}

FF aus und wieder an ...

Leider nein, auch hier wird userContent.css nicht erwähnt.

[Rolf B]

Hallo Linuchs,

dann ist auf deienr Dose noch irgendwas anders oder nicht so, wie es sein soll. Dateinamen sind in Linux case sensitive, fällt mir noch ein, aber ich bin jetzt ausgezählt.

Wende Dich an die Suchmaschine deines geringsten Misstrauens. Ja ich weiß, das bin ich. Wende dich an die zweitbeste 😉

Rolf

[MudGuard]

Hi,

dann ist auf deienr Dose noch irgendwas anders oder nicht so, wie es sein soll. Dateinamen sind in Linux case sensitive, fällt mir noch ein, aber ich bin jetzt ausgezählt.

toolkit.legacyUserProfileCustomizations.stylesheets muß auf true stehen.

userContent.css wird doch nur noch "gnadenhalber" unterstützt.

Es gibt aber Addons wie (IIRC) stylish ...

cu,
Andreas a/k/a MudGuard

[Fred]

Hi,

userContent.css wird doch nur noch "gnadenhalber" unterstützt.

Die sollen das bloß nicht entfernen, das ist für mich der letzte Grund beim Fuchs zu bleiben.

Es gibt aber Addons wie (IIRC) stylish ...

hab gerade mal nach dem Addon gesucht, das hat aber ganz schlechte Bewertungen, soll angeblich Spyware enthalten. Sicherer scheint Stylus zu sein...

Fred

[MudGuard]

Hi,

userContent.css wird doch nur noch "gnadenhalber" unterstützt.

Die sollen das bloß nicht entfernen, das ist für mich der letzte Grund beim Fuchs zu bleiben.

Ich bin auch gegen eine Entfernung.

Es gibt aber Addons wie (IIRC) stylish ...

hab gerade mal nach dem Addon gesucht, das hat aber ganz schlechte Bewertungen, soll angeblich Spyware enthalten. Sicherer scheint Stylus zu sein...

Wie gesagt, den genauen Namen wußte ich nicht mehr (weil ich ja noch das legacy-Zeug nutze).

cu,
Andreas a/k/a MudGuard

[Der Martin]

Hallo Linuchs,

Dann wohl eher der Ordner

(2) Die Datei muss userContent.css heißen

Aha, da bin ich Falschinformationen aufgesessen. Die gibt es nicht im Ordner mit dem unaussprechlichen Namen. Ich benenne meine also um und verschiebe die in diesen Ordner.

hast du auch gelesen, dass du in diesem Profilverzeichnis erst noch ein Verzeichnis mit dem Namen chrome anlegen muss, und die CSS-Datei dann dort hineingehört?

"Chrome" ... hat nichts mit dem gleichnamigen Browser zu tun

Chrome ist doch das Wort für Farbe? (altgriechisch χρῶμα chrṓma, deutsch ‚Farbe‘)

Ja, daher kommt auch der Name des chemischen Elements Chrom, dessen Verbindungen viele unterschiedliche Farben haben. Vom hochglänzenden polierten Chrom, wie es z.B. im Automobilbereich für Beschläge und Zierleisten verwendet wird, leitet sich schließlich der IT-Begriff chrome für die optischen Ausschmückungen ab.

Hatte ich mit dem gleichnamigen Browser gar nicht verknüpft und das für den FF gültig gehalten.

So war's auch gemeint.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Linuchs]

Hallo Martin,

hast du auch gelesen, dass du in diesem Profilverzeichnis erst noch ein Verzeichnis mit dem Namen chrome anlegen muss, und die CSS-Datei dann dort hineingehört?

Jippiiiii! Geil, das war's.

Das mit dem Verzeichnis chrome hatte ich ja ganz am Anfang, als die Datei noch userChrome.css heißen sollte.

Wenn ich jetzt quasi als Abfallprodukukt noch die Adressleiste des FF beeinflussen könnte ...

Beim Hineinklicken ist - anders als bei sonstigen inputs - der Inhalt markiert und wenn ich was hinzufügen möchte, wird der bisherige Inhalt ersetzt. Die Markierung ist weiß auf schwarz, wenn nicht markiert ist es hellgrau auf schwarz, kaum zu unterscheiden.