chrome mit @import strukturieren

  • Moin,
    auch wenn man die Einträge in userChrome.css und userContent.css wohl dokumentiert, tendieren diese Dateien zur Unübersichtlichkeit. Fährt man dann noch mehrere FF parallel und möchte diese Dateien dann synchronisieren hat man mindestens ein Suchproblem.

    Es ist zwar alt bekannt, wird aber gern vergessen, die *.css Dateien sind CSS und kennen darum auch den Befehl @import, mit dem weitere Dateien eingefügt werden. Somit kann man sauber abgegrenzte Dateien mit genau definierter Funktionalität einfügen und bei möglichen Änderungen findet man sofort die richtige Baustelle.

    Hier eingesetzte Umsetzung
    Die userChrome.css schrumpft zu

    Es gibt ein Verzeichnis chrome auf der Ebene der Profile, ../../. D.h. alle FF können darauf zugreifen. In diesem Verzeichnis gibt es für jeden Aufgabenbereich eigene Unterverzeichnisse, in dem die *.css Datei erstellt ist.

    Z.B. für die Menüs: @import "../../chrome/menu_bar/menu_bar.css"; beinhaltet

    Code
    @import "file_menu.css";
    @import "view_menu.css";
    @import "tools_menu.css";
    
    
    menu[id="edit-menu"] 		{ display: none; }	/* Bearbeiten */
    menu[id="history-menu"] 	{ display: none; }	/* Chronik */
    menu[id="bookmarksMenu"]	{ display: none; }	/* Lesezeichen */
    menu[id="helpMenu"]			{ display: none; }	/* Hilfe */

    Drei Menüs bedürfen einer weiteren Behandlung und werden via @import eingebunden. Jetzt ohne Pfadangabe, da sich diese Dateien im gleichen Ordner befinden. Der Rest der Menüs wird einfach nur ausgeblendet.

    Die userContent.css schrumpft entsprechend

    Code
    @import "../../chrome/anzeige/fonts.css";
    @import "../../chrome/anzeige/links.css";
    @import "../../chrome/anzeige/heise.css";
    @import "../../chrome/anzeige/decoration.css";

    Die Schrift wird bestimmt, Links zu pdf-Dateien werden umgefärbt, eine Webseite wird umgebaut und Sachen wie blink deaktiviert.

    Das mal so zur Anregung, die gewonnenen Freiheitsgrade sind enorm. Lauter kleine Dateien mit einem exakt abgegrenzten Aufgabengebiet.

    P.S. um es gleich zu sagen, ein Stylish wurde hier aus bestimmten Gründen ausgesondert.

  • @.Ulli,
    ich habe keinen Smiley gefunden, der der Hut zieht :wink: . Bis Dato hatte ich den @import Befehl immer "nur" mit Themes [1] - eigentlich richtígere Weise (vor_den_Kopf_klopf) - in Verbindung gebracht.

    Du bist ein Fuchs! Wird hier über die Zeitachse getestet.
    Nur zur Vollständikeit - eine ausgelagerte stylish.rdf lässt ebenfalls einen guten Organisationsgrad zu.

    Hier sagt einer Danke!

    [1] Benutzeroberfläche mit userChrome.css