Variablen in CSS nutzen

    Firefox-Version
    118.0.1 (64-Bit)
    Betriebssystem
    Linux
    Zitat von Mira_Belle

    Mir ist nicht bekannt, dass es in CSS auch Variablen oder ähnliches gibt.

    Ich kann mir z. B. keine Farbwerte merken, deshalb benutze ich das:

    Oder mit FF-Var deklariert (usercontent z. B. in 'about:preferences'):

    CSS
    :root {
    --in-content-primary-button-background: var(--uc-color-orange-dark) !important;
    --in-content-primary-button-background-hover: var(--uc-color-orange-normal) !important;
    --in-content-primary-button-background-active: var(--uc-color-orange-light) !important;
}

    Außerdem gelingt die Umstellung auf andere Farben schneller, da ich nur die Var ändern muss...

    Ein weiterer Vorteil: shadow-root lässt sich von außen mit Variablen ansprechen!

    Edit:

    Universalselektor * gegen :root ausgetauscht (untere css).

    Zitat von Sören Hentzschel

    Variablen gehören in einem Container-Element definiert und wenn diese wirklich global zur Verfügung stehen sollen, ist das üblicherweise :root.

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf/Astrid Lindgren]

    4 Mal editiert, zuletzt von Mitleser (30. September 2023 um 11:50)

    Zitat von Mitleser

    Ich kann mir z. B. keine Farbwerte merken, deshalb benutze ich das:

    Oder mit FF-Var deklariert (usercontent z. B. in 'about:preferences'):

    CSS
    * {
    --in-content-primary-button-background: var(--uc-color-orange-dark) !important;
    --in-content-primary-button-background-hover: var(--uc-color-orange-normal) !important;
    --in-content-primary-button-background-active: var(--uc-color-orange-light) !important;
}

    Außerdem gelingt die Umstellung auf andere Farben schneller, da ich nur die Var ändern muss...

    Ein weiterer Vorteil: shadow-root lässt sich von außen mit Variablen ansprechen!

    Das ist ja mal sowas von cool :!:

    Egentlich hätte ich da auch drauf kommen müssen, bin ich aber nicht.

    Danke für diesen Tipp!

    Das hätte ich schon Gestern gebrauchen können. :D

    Zitat von Horstmann

    Das hier kennst du aber doch bestimmt, bei deiner Erfahrung? :/

    Ist super praktisch, und man kann auch einiges mit Tricksen.

    Danke für den Link.

    Ich sollte wirklich da öfter mal reinschauen, mach ich viel zu selten.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (28. September 2023 um 11:22) aus folgendem Grund: Ein Beitrag von Mira_Belle mit diesem Beitrag zusammengefügt.

    Habe es angewendet, klappt echt SUUUPER :!:

    Hier ein Auszug der Deklarationen:

    Mit <3lichem Gruß

    Mira

    Zitat von Mira_Belle

    Habe es angewendet

    Nur mal so zur Bezeichnung :root für alle Fälle.

    Beitrag

    RE: Datei speichert anstatt zu öffnen

    Kleine Klarstellung: Es ist grundsätzlich vollkommen okay, :root zu verwenden. Das Missverständnis beruht vermutlich auf einer falsch verstandenen Aussage von mir aus dem Jahr 2018.

    Ich schrieb damals, dass die Definition von Variablen in :root aus Performance-Sicht teuer ist. Und aus diesem Grund hatte Mozilla damals ein paar Variablen-Definitionen an eine andere Stelle verschoben. Mein Hinweis diente also an Information an die Bastler, falls eine der individuellen Anpassungen nicht mehr…
    Sören Hentzschel
    25. März 2022 um 09:24

    Toll, jetzt hast Du mich aber verunsichert!

    Heißt das jetzt ich kann in allen anderen CSS-Dateien auch z.B. var(--uc-color-black-light) anstatt den Farbwert einsetzen?

    Ist es dann nicht besser die Deklaration der Variablen direkt in der userChrome.css und eventuell,

    wenn nötig auch in der userContent.css zu machen?

    Denn ich hätte das jetzt in jeder Datei einzeln gemacht.

    Aber würde ja irgendwie Sinn ergeben, z.B. für immer wieder kehrende Farbwerte,

    oder wenn fast über all der Borderradius gleich ist, oder, oder ...

    Lieg' ich da mit meiner Vermutung richtig?

    Mit <3lichem Gruß

    Mira

    Zitat von Mira_Belle

    jetzt hast Du mich aber verunsichert!

    Sorry, das wollte ich nicht ;)

    Es sollte nur ein allgemeiner Hinweis sein auf die Nutzung der pauschalen Bezeichnung :root

    Beispiel aus dem Link im obigen Link:

    Zitat

    :root {--tab-line-color: #f9f9f9 !important;}


    Das wird ab Firefox 60 nicht mehr funktionieren. Das müsste dadurch ersetzt werden:


    #tabbrowser-tabs {--tab-line-color: #f9f9f9 !important;}

    D.h., :root funktioniert evtl. nicht mehr überall.

    Zitat von Mira_Belle

    Toll, jetzt hast Du mich aber verunsichert!

    Heißt das jetzt ich kann in allen anderen CSS-Dateien auch z.B. var(--uc-color-black-light) anstatt den Farbwert einsetzen?

    Ist es dann nicht besser die Deklaration der Variablen direkt in der userChrome.css und eventuell,

    wenn nötig auch in der userContent.css zu machen?

    Solange du die Variable nicht anderweitig überschreibst, sollte eine einmal definierte Variable - in irgendeiner aktiven CSS Datei - für dein gesamtes CSS gelten, egal wo du sie reinschreibst, und in welcher Reihenfolge sie in userChrome.css importiert werden.

    Also sollte sowas wie:

    CSS
    :root {
--uc-color-black-light: pink; 
}

    ...über dein gesamtes CSS als Variable verfügbar sein, mit zB color: var(--uc-color-black-light) !important; .

    Funktioniert so jedenfalls bei mir.

    Ob das auch für Java Scripts gilt, in denen solche CSS Variablen definiert werden, weiss ich allerdings nicht.

    Hier ist ein Thema in dem wir etwas damit rumgespielt hatten; ist am Anfang etwas verwirrend, bietet aber eine Menge Möglichkeiten.

    2002Andreas

    :/

    In "Deinem" Beispiel" sieht der Code aber anders aus, als den, den ich verwende.

    Bei mir sieht es dann wie folgt aus.

    Deklaration: :root {--tab-line-color: #f9f9f9 !important;}

    Anwendung: #tabbrowser-tabs: var(--tab-line-color) !important;

    Und meine grundsätzlichen Fragen?

    D.h. für mein Verständnis, es ist am Besten diese Deklarationen direkt schon in der userChrome.css zu machen,

    wenn sie definitiv "global" wirken sollen.

    Denn wenn die Variablen in zig Dateien verstreut sind, blickt man da ja gar nicht mehr durch.

    Richtig?

    (Das Thema in dem Link schaue ich mir noch an, muss aber jetzt weg)

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (28. September 2023 um 13:27) aus folgendem Grund: Ein Beitrag von Mira_Belle mit diesem Beitrag zusammengefügt.

    Ich glaube da gibt es aber auch einen Unterschied zwischen Variablen die Fx selber benutzt, and welchen die man selber definiert.

    Fx überschreibt seine eigenen :root Variablen in einigen Fällen, um sie je nach Einsatzort/Element anzupassen.

    Zb ein Button in der tabbar und einer in der Lesezeichenleiste kann die gleiche Variable benutzen, wird aber für beide jeweils anders definiert.

    Zitat von Mira_Belle

    D.h. für mein Verständnis, es ist am Besten diese Deklarationen direkt schon in der userChrome.css zu machen,

    wenn sie definitiv "global" wirken sollen.

    Denn wenn die Variablen in zig Dateien verstreut sind, blickt man da ja gar nicht mehr durch.

    Richtig?

    So wie ich sie benutze, scheint es egal zu sein wo du die Definition/Deklaration reinschreibst, sie wirken immer global - meiner beschränkten Erfahrung nach.

    Doppelt solltest du sie natürlich nicht anlegen, dann ginge es nach Präferenzkette.

    Zur Übersichtlichkeit kannst du natürlich alle in die userChrome.css reinschreiben, oder in eine separate importierte CSS Datei.

    2 Mal editiert, zuletzt von Horstmann (28. September 2023 um 13:40) aus folgendem Grund: Ein Beitrag von Horstmann mit diesem Beitrag zusammengefügt.

    Du hast recht! Ich denke, ich werde für die Variablen eine separate CSS schreiben.

    Das macht es übersichtlicher und es kommt sich nichts ins Gehege!

    Nur eine Frage hätte ich noch dazu!

    Spielt die Struktur der Ablageorte im System eine Rolle?

    Und wie ist das dann beim Einbinden der Dateien in der userChrome.css?

    Sollte, muss man nicht da eine Reihenfolge beachten?

    Macht es einen Unterschied, wenn z.B. erst zwanzig andere CSS-Dateien "eingelesen" werden

    und dann erst die Variablen dazu?

    :/ Ich denke linear, ist das denn bei dem CSS auch so, oder wird der Code parallel eingelesen und steht dann komplett

    im Speicher?

    Mit <3lichem Gruß

    Mira

    Gute Frage!

    Da müsste vielleicht mal jemand wie Sören Hentzschel was dazu sagen.

    Meine Vermutung wäre, dass idealerweise die CSS Datei mit den Hauptvariablen unten in der @import Liste von CSS Dateien steht, und damit zuerst eingelesen wird und Vorrang hat.

    Oder direkt in der userChrome.css, die Vorrang hat vor importiertem CSS.

    Was Ablageorte angeht, da bin ich überfragt - meine CSS Dateien sind alle im chrome Ordner.

    Meine Vermutung wäre aber auch, dass es komplett schnuppe ist. ;)

    Ich benutze einige Variablen hier kreuz und quer durch meine importierten CSS Dateien, vor allem zum Testen, und hatte noch nie ein Problem.

    Warum unten?

    Werden die Einträge nicht von oben nach unten eingelesen?

    Bei mir sieht z.B. die userChrome.css so aus:

    In der Annahme, dass die Hamburgermenü.css als erstes eingelesen wird,

    danach die Anderen und dann erst der restliche Code.

    Aber wenn ich es mir so recht überlege, kann das auch nicht so sein.

    Eigentlich müsste zuerst der Code eingelesen werden. Kopf kratz

    2002Andreas Weist Du näheres darüber?

    Mit <3lichem Gruß

    Mira

    Zitat von 2002Andreas
    Zitat von Mira_Belle

    Werden die Einträge nicht von oben nach unten eingelesen?

    Teste es doch einfach mal.

    :D

    Wie :?:

    Ich habe alles in meinen Mixer getan, volle Drehzahl.

    Es funktioniert alles wie bisher auch, keine Konflikte.

    Eventuell denke ich falsch und der komplette Code liegt im Speicher und wird genutzt, wenn er gebraucht wird.

    Von daher sind dann die Einträge egal, wobei, was ich noch nicht getestet habe,

    die import-anweisungen mal ans Ende zu setzen.

    Mit <3lichem Gruß

    Mira

    Elchtest nicht bestanden!

    Die import-anweisungen müssen zwingend an den Anfang!

    2002Andreas

    Es geht mir ja darum, dass ich nicht weiß, ob es Sinn macht, eigne Definitionen von

     :root { --us-irgendwas: irgendeinwert !important; } in eine separate Datei zu schreiben

    und diese dann per @import url("./root.css"); einzubinden,

    oder ob es besser ist diese Variablen direkt in, tja und da ist das zweite Problem,

    in die userChrome.css oder userContent.css zu schreiben.

    Ist das egal? Ich werde es wohl austesten müssen, so scheint mir.

    __________________________________________________________________________________________

    Horstmann

    Es ist nicht egal :!:

    Variablen, die auf "Seiten" wie z.B. about:logins wirken sollen, müssen in die userContent.css :!:

    Sie wirken sich nicht auf Änderungen, die unter userChrome.css bzw. die per @import url eingebundenen

    Änderungen aus!

    Andersherum verhält es sich genau so :!:

    Frage geklärt.

    Mit <3lichem Gruß

    Mira

    3 Mal editiert, zuletzt von Mira_Belle (29. September 2023 um 10:59)

    Wenn du das direkt in z.B. die userChrome.css schreibst, dann sprichst du damit pauschal alle Einträge im Fx an.

    Pauschal in der userContent.css sind es ja nicht nur die div. Einstellungen vom Fx die sich in Tabs öffnen, sondern evtl. auch auf manchen Webseiten.

    Ich pers. habe in beiden Dateien nur meine import Regeln stehen.

    Hier befindet sich die ausgelagerte Deklarationsdateie(mit :root) im chrome/userchrome-Ordner.

    Den chrome/usercontent-Ordner habe ich auch lediglich von der userContent.css 'verlinkt' (Ähnlich wie bei Andreas) und keine 'Deklarationsdatei'.

    Die Variablen funktionieren hier in 'chrome' und 'content' sowie 'css in js eingebettet' ohne Probleme.

    Edit: und in svg-Grafiken auch...

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf/Astrid Lindgren]

    Einmal editiert, zuletzt von Mitleser (29. September 2023 um 12:02)

    Zitat von 2002Andreas

    Wenn du das direkt in z.B. die userChrome.css schreibst, dann sprichst du damit pauschal alle Einträge im Fx an.

    Pauschal in der userContent.css sind es ja nicht nur die div. Einstellungen vom Fx die sich in Tabs öffnen, sondern evtl. auch auf manchen Webseiten.

    Ich pers. habe in beiden Dateien nur meine import Regeln stehen.

    Es wird wohl aber keinen Unterschied machen, ob diese Deklarationen direkt in der userChrome.css stehen

    oder per @import eingebunden werden.

    Sie stehen dann nur den Anpassungen zur Verfügung, die eben die Oberfläche des Firefox beeinflussen,

    bzw, jenen, die eben per userChrome.css definiert werden.

    Was die userContent.css betrifft wirst Du, hast Du sicher recht, aber mal ganz ehrlich, wer wird denn

    für seine Page Variablennamen wie var(--uc-color-orange-normal) verwenden?

    Aber um auch das Risiko zu minimieren, var(--my-uc-color-orange-normal).

    Und zum letzten Punkt, ja wollte ich auch so hand haben, aber es gibt da ein paar Anpassungen, die wollen einfach nicht,

    wenn ich sie in betreffende Dateien auslagere.

    Darum habe ich mich aber auch nicht weiter bemüht.

    Das wären diese:

    Da müsste ich noch einmal ran.

    Die Sidebar auslagern müsste ja gehen, warum ich das nicht gemacht habe?

    Mit <3lichem Gruß

    Mira