Variablen in CSS nutzen

    Zitat von Mira_Belle

    Warum unten?

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


    CSS liest von unten nach oben, wenn ich mich nicht ganz vertue. :/

    Wie auch immmer, auf jeden Fall hat eine Regel die weiter unten steht Präferenz über die darüber.

    Wenn du zB das in eine CSS Datei schreibst (beides zusammen) :

    CSS
    #nav-bar {
    background-color: green !important;
}

#nav-bar {
    background-color: red !important;
}

    ...ist deine Navbar rot.

    Wenn du beide Farben vertauschst, ist deine Navbar grün.

    Den gleichen Spass kannst du mit importierten CSS Dateien probieren; die untere importierte Datei hat Präferenz über die darüber; Einträge direkt in der userChrome.css haben Präferenz über alle.

    Wenn du 2 Test CSS Dateien anlegst, und den Navbar Code von oben reinschreibst ( diesmal jeweils eine Variante rot oder grün in eine Datei ), dann kannst du das einfach testen.

    userchrome.css :

    CSS
    @import url("farbe2.css");

@import url("farbe1.css");


#nav-bar {
    background-color: lightblue !important;
}

    Deshalb habe ich für zB für schnelle Tests eine extra CSS Datei, die in der Importierliste ganz unten steht; damit kann ich Regeln in den darüber eingetragenen importierten CSS Dateien schnell überschreiben.

    Ich war mal davon ausgegangen, dass der Unterschied zwischen userChrome.css und userContent.css klar ist. ;)

    Und ja, @import Regeln müssen immer ganz oben stehen, vor allen CSS Regeln.

    Einmal editiert, zuletzt von Horstmann (29. September 2023 um 15:20)

    Hehe, und ich dachte, der letzte bleibt!

    Dann wäre es genau andersrum.

    Erster Wert grün, zweiter Wert überschreibt und es ist rot.

    PS: Der Code für die Sidebar ist nun ausgelagert und funktioniert.

    Mit <3lichem Gruß

    Mira

    Zitat von Mira_Belle

    aber mal ganz ehrlich, wer wird denn

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

    Das kann bei großen Dateien/umfangreichen Sites durchaus Sinn machen (die Variablen liegen nach wie vor in einem von der userchrome.css eingebundenem Unterordner von chrome).

    Beispiel:

    Spoiler anzeigen

    Dieser Beitrag ist ohne Hilfe einer 'KI' entstanden.

    Einmal editiert, zuletzt von Mitleser (29. September 2023 um 15:54)

    Mitleser

    Eventuell habe ich mich etwas unglücklich ausgedrückt, aber genau so habe ich es vor es umzusetzen.

    Ich denke aber, 2002Andreas hat etwas anders gemeint, mit dem Einwand, dass sich da etwas ins Gehege kommen könnte.

    2002Andreas

    Kannst Du bitte, da es hier ja gerade nicht wirklich um die Symbole geht, ab #121 das Thema abtrennen

    mit Verweis auf diesen Thread hier?

    Titel für den neuen Thread eventuell "Variablen in CSS nutzen", oder so?

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (29. September 2023 um 14:12) aus folgendem Grund: Ein Beitrag von Mira_Belle mit diesem Beitrag zusammengefügt.

    Wenn du deine Variablen (nicht FF-Variablen) nur einmalig deklarierst, kannst du sie irgendwo in der userchrome.css mit @import als Datei einbinden. Wenn du unsauber programmierst, z. B. die Variablendeklaration kommt mehrfach vor, überschreibt das was später geparst wird das Vorherige...aber das ist ja nichts Neues (Unten überschreibt Oben). Und da es dir doch garnicht um Variablen die von FF kommen geht, kommt sich auch nichts ins 'gehege'.

    Dieser Beitrag ist ohne Hilfe einer 'KI' entstanden.

    2 Mal editiert, zuletzt von Mitleser (29. September 2023 um 15:24)

    Variablen kann man definieren oder umdefinieren, wie man will, nur im Zielobjekt sollten die dann auch genutzt werden. Firefox macht das und ändert so zB die Themenfarben an zentraler Stelle.

    Hier gibt es keine Probleme, nur Lösungen! Meine Glückszahl hier: 97.

    Zitat von Mitleser

    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;
}

    Der Selektor ist nicht gut. Mal abgesehen davon, dass man den Universalselektor * nach Möglichkeit überhaupt nicht verwenden sollte, welchen Sinn hat es, die Variablen für jedes Element zu definieren? Variablen gehören in einem Container-Element definiert und wenn diese wirklich global zur Verfügung stehen sollen, ist das üblicherweise :root. Wenn die Idee ist, dass eine Variable im Original-Code auf einer anderen Ebene definiert ist, sollte die jeweilige Variable auch genau dort (oder auf einer tieferen Ebene) überschrieben werden, aber nicht über den Universalselektor.

    Zitat von Mira_Belle

    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?

    Das ist komplett egal - bis zu dem Punkt, an dem du mit einer Anweisung eine andere überschreibst.

    Zitat von Mira_Belle

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

    im Speicher?

    Ja, das CSS wird zuerst komplett eingelesen, bevor damit was passiert. Alles andere würde auch keinen Sinn ergeben, weil die Reihenfolge ja erst relevant wird, wenn zwei Selektoren mit identischer Spezifität miteinander konkurrieren.

    Zitat von Mira_Belle

    was ich noch nicht getestet habe,

    die import-anweisungen mal ans Ende zu setzen.

    Du hast es ja selbst schon bemerkt, aber um das mal als explizite Regel zu formulieren: Allgemeine @-Regeln wie @charset und @import, welche Regeln für das gesamte Dokument festlegen, müssen immer am Anfang stehen.

    Zitat von Horstmann

    CSS liest von unten nach oben, wenn ich mich nicht ganz vertue. :/


    Wie auch immmer, auf jeden Fall hat eine Regel die weiter unten steht Präferenz über die darüber.

    Richtige Beobachtung, falsche Schlussfolgerung. ;) Bei gleicher Spezifität hat eine Regel, die weiter unten steht, Präferenz gegenüber einer Regel, die weiter oben steht. Und zwar, weil CSS von oben nach unten geht, nicht umgekehrt. Die „untere“ Regel überschreibt dann die „obere“ Regel, weil sie danach kommt.

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    CSS liest von unten nach oben, wenn ich mich nicht ganz vertue. :/


    Wie auch immmer, auf jeden Fall hat eine Regel die weiter unten steht Präferenz über die darüber.

    Richtige Beobachtung, falsche Schlussfolgerung. ;) Bei gleicher Spezifität hat eine Regel, die weiter unten steht, Präferenz gegenüber einer Regel, die weiter oben steht. Und zwar, weil CSS von oben nach unten geht, nicht umgekehrt. Die „untere“ Regel überschreibt dann die „obere“ Regel, weil sie danach kommt.

    Wo ich das nur her habe mit von unten nach oben, irgenwo hab ich das mal gelesen...? :/

    Solange das Prinzip funktioniert, ist halb daneben aber ja immer noch ein Treffer. ;)

    Spezifität ist ein gutes Stichwort, damit kann man viel anstellen mit Variablen.

    Es funktioniert.

    Ich habe zwei "Root"-Dateien angelegt.

    In diesen sind die Variablen für die Farben definiert.

    rootChrome.css & rootContent.css

    An der Bezeichnung lässt sich auch schon der Geltungsbereich erahnen.

    Jeweils per @import url("./root/rootChrome.css"); , bzw. @import url("./root/rootContent.css"); eingebunden.

    Echt super! Spasses halber habe ich mal "mein" orange in der rootChrome.css gegen lime getauscht,

    irre wie einfach.

    Mit <3lichem Gruß

    Mira

    Zitat von Mira_Belle

    Echt toll, wenn ich dann mit nur einer Änderung das komplette Farbdesign ändern kann.

    Und das ist nur der Anfang; wenn man damit anfängt komplexe Kalkulationen mit Variablen zu bedienen, oder (auch mit Script selber gemachte) Klassen etc. gegeneinander auszuspielen, dann gibt's kein Halten mehr. =O

    Die meisten meiner eher aufwendigeren Modifikationen haben im Kern eigene Klassen in einem Script zugefügt, und der Rest wird mit CSS Variablen berechnet und plaziert.

    Obwohl das Fehlerpotential recht hoch sein kann, der erste Aufwand auch; aber Spass macht's schon, und die Möglichkeiten sind fast unbegrenzt. ;)

    Horstmann

    Eventuell komme ich darauf irgendwann noch mal zurück.

    Im Augenblick beschränke ich mich erst einmal auf "Werte" die CSS-Dateien übergreifend gleich sind.

    Und ich habe noch ein zweites Projekt in der Pipeline, ich möchte alle Symbole, die ich verwende, einfärben,

    denn bisher haben die ja die gleiche Farbe wie die Schrift.

    Mit <3lichem Gruß

    Mira

    Zitat von Mira_Belle

    Echt super! Spasses halber habe ich mal "mein" orange in der rootChrome.css gegen lime getauscht,

    irre wie einfach.


    Du hast Spaß daran, die Art und Weise, wie du dein CSS strukturierst, zu verändern, um hinterher „besseres“ im Sinne von leichter wartbarem CSS zu haben? Oh, ich hätte schon das nächste Thema für dich und das ist so brandheiß, dass es mindestens Firefox 117 erfordert und ich in meinem Artikel über Firefox 117 schrieb, dass diese CSS-Neuerung das Potenzial hat, „die Art und Weise, wie das CSS [von Websites] geschrieben wird, zu revolutionieren“. Ich spreche von der Verschachtelung von CSS. ;)

    Zitat von Sören Hentzschel

    Oh, ich hätte schon das nächste Thema für dich und das ist so brandheiß, dass es mindestens Firefox 117 erfordert und ich in meinem Artikel über Firefox 117 schrieb, dass diese CSS-Neuerung das Potenzial hat, „die Art und Weise, wie das CSS [von Websites] geschrieben wird, zu revolutionieren“. Ich spreche von der Verschachtelung von CSS. ;)

    Bist Du irre, so etwas hier zu Posten? Das wird mich auch wieder herausfordern und ich werde mir wieder wer weiß wie lange die Nächte um die Ohren schlagen, Dankeschön. :saint: ;)

    Es grüßt,

    Ralf