CSS Switch

  • Hallo... :)

    Ich habe sämtliche Farbvariablen meiner Anpassung in einer gesonderten CSS-Datei.
    Nun dachte ich, es wäre doch nett, wenn ich per Button(s) eine Funktion aufrufen könnte, über die ich nachträglich CSS-Files mit Farb-Varianten laden lassen kann. Ich bin mir allerdings nicht sicher, ob so dynamisch geladenes CSS auf die Browser-Styles eine Auswirkung hätte oder einfach ignoriert werden.
    Weiss jemand von euch, ob es per Script möglich ist, einen solchen CSS Switch zu verwirklichen?
    Oder hat das eventuell sogar schon mal jemand gemacht?

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Sehr geil, aborix. Bist mein Held... :P
    nsIStyleSheetService, das war's.
    Ich bin da neulich schon mal drüber gestolpert, habe es blöderweise aber vergessen zu bookmarken.
    Na, dann werde ich mir das mal am WE anschauen.
    Vielen Dank dafür!... :D

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • So, ich habe meinen Switcher soweit jetzt fertig. Funktioniert ganz gut und ist auch zum Testen von Styles sehr geil. Mein grösstes Problem bei der Geschichte war es, herauszufinden, wie man den Pfad zu den CSS-Dateien zu einer file://-URI umwandeln kann. Dabei hat mir das UserCSSLoader-Script geholfen. Ansonsten läuft das Beispiel-Script aber bei mir in Version 57 nicht. Also das Menü wird erstellt, aber alle Funktionen sind ohne Wirkung.

    Für alle, die es interessiert, hier der Code des Switchers.
    Das Javascript für den Button und der Funktion zum Switchen der Styles:


    Das CSS für den Button:

    CSS
    #fp-switch {
    	list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbpJREFUeNqkU01LQkEUvTPviaLicxGvXos2/gmXrUKIhDb9hraltI0CNyW0bdlPCNpEG39Bj/wD4kozgtQ039P30Zyb76UEkTRwYe7MOeeeuTMjwjCk/wxxfH5JQog9NbdW5HZV8Ts9CAIkm1enJ9d/NSME0dHZxSHm0vM8UiFcn+jm9p7eZ/RrADNRWHDA1WezGQthcX+3RAPXo9FoxLE4stksBzAQUjyJ9UhAfHhhTOr3+1Sr1ZYEKpUK5fN5etM0SqfTEBCLAnI6nZLrugz2fZ+SySRVq1XO6/U6DYdD0hQZA7jYAYhwgGYisIk1VDEMgwmYY01K5jBO5V8O5lW5mY7j8CYq4bzNZjM+P3CRA3XtyOWigEAFbACUSCSYdFDaZoJt27DMDoCZC4jFI0hUjixGDl6c7xvAgEgqleK54i07iKqzmhKyLIva7TbnuVyOdF3nY2QymaiR7ECOx2NSISHQaDRYBOBisUi9Xo9arRaZpsmiaGaEAQdc/cl+JHPDYrVyuUyTySS++0Kh8OMZR5hOpyNenrsE4pYw1ndIamsrfaXAfw0HvQcI4LLRGW3F36gePzmfAgwATxH6b1wdl1wAAAAASUVORK5CYII=') !important;
    }


    Das CSS der Switch-Files schaut von der Struktur her eigentlich immer gleich:

    Die Files sind mit einem Präfix benannt und bekommen eine ID-Nr angehängt.
    Also in meinem Fall etwa fp-switch-0.css, fp-switch-1.css, fp-switch-2.css, usw.
    Das erste File - hier die fp-switch-0.css - wird in der userChrome.css included, alle anderen werden bei Bedarf über das Script dynamisch geladen.

    Momentan muss ich dem Script noch manuell mitteilen, wie die letzte ID-Nr lautet (= sidMax). Doch da gibt es sicher auch noch andere Möglichkeiten, wie man die Anzahl von Dateien mit dem Präfix X automatisch zählen kann.

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Ich habe das Script jetzt noch so angepasst, das automatisch ermittelt wird, wieviele Switch-Files im chrome-Verzeichnis des Profils liegen.


    Die Konstante switchPrefix legt den Präfix der Switch-Files fest. Die Funktion countSwitch() ermittelt die Anzahl der Switch-Files. Es muss also ggfs. nur noch die Konstante des Präfix angepasst werden. Ich rufe die countSwitch()-Funktion übrigens bewusst in der onClick-Funktion auf, damit man ohne Neustart des Browsers neue Switch-Files anlegen kann.

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)