Verbesserung userChrome.css (Saubere Programmierung)

Zitat von FireBugs

die [Sidebar-Hoverfarbe] verändert

Hallo und Willkommen hier im Forum. 😊

Meinst du das so?

Wenn ja, dann teste bitte und pass dir die Farben an.

@-moz-document url("chrome://browser/content/browser.xhtml"),
               url("chrome://browser/content/places/bookmarksSidebar.xhtml") {

treechildren::-moz-tree-cell(hover),
treechildren::-moz-tree-cell-text(hover),
treechildren::-moz-tree-row(hover) {
    appearance: none !important;    
    border: none !important;
    text-decoration: none !important;
    outline: none !important;
}

treechildren::-moz-tree-cell(even, hover) {
    background: -moz-linear-gradient(rgb(135,206,250) 25%, rgb(240,255,255) 95%) !important;
}

treechildren::-moz-tree-cell(odd, hover) {
    background: -moz-linear-gradient(rgb(192,192,192) 25%, rgb(255,255,255) 95%) !important;
}

treechildren::-moz-tree-cell-text(hover) {
    font-weight: bold !important;
    color: green !important;
}

.sidebar-placesTreechildren::-moz-tree-cell-text(container) {
    color: orange !important;
    font-weight: bold !important;
}

.sidebar-placesTreechildren::-moz-tree-cell-text(container, hover) {
    color: blue !important;
}

.sidebar-placesTreechildren::-moz-tree-cell(selected) {    
   margin-right: -15px !important;
   background: -moz-linear-gradient(rgb(000,255,255) 25%, rgb(000,000,255) 95%) !important;
}

.sidebar-placesTreechildren::-moz-tree-cell-text(selected) {
   color: Snow !important;
}

#bookmarks-view-children::-moz-tree-cell(selected) {    
   background: -moz-linear-gradient(rgb(000,255,255) 25%, rgb(000,000,255) 95%) !important;
}

#bookmarks-view-children::-moz-tree-cell-text(selected) {
   color: Snow !important;
}
}

Zitat von FireBugs

haben bei mir mit FF_v101 KEINEN Effekt.

Welchen Code genau brauchst/möchtest du denn haben?

Zitat von FireBugs

ob man das nicht "schöner"/sauberer programmieren kann/sollte.

Ich würde den Code so lassen.

Bei meinem Test funktionierte alles, und du findest dank deiner Erklärungen schneller mal etwas wieder.

Zitat von FireBugs

Aber ganz so sauber dürfte es nicht sein:

=> Wenn man in der userChrome.css die Import-Zeile ganz nach unten setzt, klappt es nicht mehr: Die Import-Datei wird nicht ausgeführt...

Wenn ich jetzt nicht total falsch liege, muss das so sein!

Import immer zu Anfang andere Anweisungen danach.

Bitte um Korrektur, wenn ich Blödsinn erzähle.

Gruß

Mira

Zitat von FireBugs

Ich hatte folgende Codeschnipsel (einzeln) getestet

So sieht ein Tab mit längerem Text aus:

Die letzten Buchstaben werden leicht ausgeblendet, reichen aber bis an das x ran.

Mit dem ersten Code sie das so aus:

Der Text wird nicht ausgeblendet, und bis zum x ist etwas Platz.

Wenn du dann mit der Maus über den Tab gehst(hover), verschiebt sich der Text nach links.

Um das zu verhindern brauchst du noch diesen Code:

/*Tabtext nicht verkürzt bei hover*/
.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 7px !important;
  width: 24px !important;
}

.tabbrowser-tab[visuallyselected=true]:not(:hover),
#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):not(:hover) {
  --tab-label-mask-size: 1em !important;
}

Der 2te Code ist für diese Scrollpfeile wenn du viele Tabs offen hast:

Zitat von FireBugs

in der userChrome.css die Import-Zeile ganz nach unten setzt

Die Import-Zeile muss immer am Anfang stehen.

Ich habe gar keinen Code in der userChrome.css, sondern nur Import Regeln.

Vorteil dadurch, alle deine Codes sind dann einzeln und dadurch viel übersichtlicher.

Zitat von FireBugs

sodaß man zB die [Reihenfolge der Absätze] ändern könnte

Innerhalb eines Codes ist das im Normalfall egal, welcher Eintrag am Anfang ist.

Zitat von FireBugs

daß ist aber viel Code für solch eine "kleine" Farbänderung.

Wenn du es nur ganz einfach möchtest:

@-moz-document url("chrome://browser/content/browser.xhtml"),
               url("chrome://browser/content/places/bookmarksSidebar.xhtml") {

treechildren::-moz-tree-cell(odd, hover),
treechildren::-moz-tree-cell(even, hover) {
    background: red !important;
}
                 
.sidebar-placesTreechildren::-moz-tree-cell-text(container, hover),
treechildren::-moz-tree-cell-text(hover) {
    font-weight: bold !important;
    color: white !important;
}
}

@FireBugs:

Bist du sicher, dass color-mix() bei dir richtig funktioniert? Hast du vorher explizit diese experimentelle CSS-Funktion unter 'about:config' mit layout.css.color-mix.enabled = true freigegeben? Weil standardmäßig ist es nicht aktiviert...

Zitat von FireBugs

Übrigens muß auch dieser Schnipsel ganz oben (direkt nach dem Import) stehen.

Sonst ist er inaktiv.

In welcher Reihenfolge CSS-Blöcke stehen, ist grundsätzlich vollkommen egal, außer:

a) Ein Code-Block überschreibt einen anderen Code-Block, weil beide das gleiche Element ansprechen und die Spezifität der verwendeten Selektoren identisch ist. Dann entscheidet die Reihenfolge.

oder

b) Es gibt einen Syntax-Fehler an einer Stelle, der verhindert, dass das CSS ab einer bestimmten Stelle überhaupt noch ausgeführt wird.

Zitat von BrokenHeart

Hast du vorher explizit diese experimentelle CSS-Funktion unter 'about:config' mit layout.css.color-mix.enabled = true freigegeben? Weil standardmäßig ist es nicht aktiviert...

Die Option in about:config bezieht sich ausschließlich auf Websites. Für sogenananten chrome-Code ist color-mix bereits seit Firefox 88 aktiv und kann auch gar nicht deaktiviert werden. Denn Mozilla macht selbst davon Gebrauch für die Firefox-Oberfläche.

Zitat von FireBugs

aber dafür robust gegen zukünftige Updates] bin,

Solche Änderungen werden von Mozilla nur geduldet, aber nicht unterstützt.

D.h., bei einem Update kann sich immer mal etwas verändern, und der Code muss dann eben angepasst werden.

Zitat von FireBugs

irgendwann (nach einem FF-Update) wieder nicht mehr funzt.

Siehe Beitrag Nr. 9, damit musst du rechnen.

Zitat von Sören Hentzschel

Die Option in about:config bezieht sich ausschließlich auf Websites.

Ok, danke für die Info! Ich kannte diese Funktion vorher überhaupt nicht und hatte dann in der MDN nachgeschaut und dort von besagter Aktivierung gelesen. Aber 'experimentell' ist sie doch trotzdem, oder? Zumindest wird es nicht empfohlen, sie produktiv einzusetzen...

Experimentell in dem Sinne, dass CSS Color Module Level 5 noch keine finale Spezifikation hat und noch den Status Editor's Draft besitzt. Das Feature wird in jedem Fall kommen. Man darf sich eben nur nicht beklagen, wenn sich an der finalen Syntax oder Verhalten noch etwas ändert.

CSS Color Module Level 5

Ich sehe die Funktion allerdings hauptsächlich für professionelle Grafiker als nützlich an, wo ich mit Farbwerten (Transparenz) rechnen muss und unterschiedliche Farbräume benutzt werden. Dass, was der TE erreichen wollte, nämlich ein dunkleres Grau, lässt sich auch zu Fuß mit 'color' und der simplen Farbangabe (Name oder rgb()) erreichen.

Bei neuen Webstandards geht es meistens darum, Dinge einfacher erreichen zu können, die man auch anders erreichen kann. Fast alles lässt sich auch anders lösen - mit entsprechend mehr bis sehr viel mehr Aufwand. Nehmen wir im Layout-Bereich die Flexbox oder Grids. Das waren wahre Revolutionen für die Webentwicklung. Aber natürlich könnte man auch wie vor 20 Jahren einfach alles in Tabellen packen und/oder alles absolut positionieren, was heute kein Webentwickler machen würde, der noch halbwegs bei Verstand ist, was aber auch irgendwie zum Ziel führen würde. Zum Definieren von Farben würde auch eine einzige Schreibweise genügen, aber da sind wir mittlerweile bestimmt schon bei einem Dutzend angelangt. Da gibt es so viele Möglichkeiten, dass ich nicht einmal sagen könnte, wie viele es sind, ohne das wirklich zu zählen. Den professionellen Grafiker sehe ich hier ehrlich gesagt nicht als Zielgruppe, da der letztlich nicht verantwortlich für die Programmierung einer Website ist. Hinter Design und Implementierung stehen zwei ganz eigene Berufsgruppen.

Zitat von FireBugs

Soll heißen: Wenn ich eine andere Theme mit einem anderen Farbhintergrund verwende (was ich mit meinen 5 Profilen mache) ändert sich die color-mix_Farbe mit.

Das verstehe ich nicht. Es werden 2 absolute Farbwerte in einem bestimmten Verhältnis zueinander gemischt und das Ergebnis ist immer ein bestimmter Farbwert im Farbraum. Da wird doch nichts überblendet, dafür müsst man ja den jeweiligen Hintergrund bei der Mischung mitberechnen. Ich habe das jetzt nicht ausprobiert, aber so sieht es für mich aus...

Edit: Ok, sehe gerade, dass sich das ganze auf die Tabs bezieht, welche mit einem Transparenzanteil angezeigt werden, ich hatte nur ständig auf die Sidebar-Änderungen geschaut (...aber das geht natürlich auch anders z.b. mit rgba()).

Zitat von Sören Hentzschel

Den professionellen Grafiker sehe ich hier ehrlich gesagt nicht als Zielgruppe, da der letztlich nicht verantwortlich für die Programmierung einer Website ist. Hinter Design und Implementierung stehen zwei ganz eigene Berufsgruppen.

Derjenige, der eine bestimmte grafische Vorlage implementiert, bekommt seine Farbwerte ja von einem (Grafik-)Designer und diese Farbwerte sind mit dieser neuen Funktion einfacher umzusetzen. Entweder musste 'früher' der Designer mehr rechnen (konvertieren), oder der CSS-Coder hatte mehr Arbeit. Egal, wenn beide in einem Projekt oder in Personalunion arbeiten, die Arbeit bedeutete eben Mehraufwand. Aber wie gesagt, in einem professionellen Projekt betrifft es eben beide Gruppen, da je nach Aufwand Zeit eingespart werden kann. Und um diesen professionellen Aspekt ging es mir.

Zitat von BrokenHeart

Das verstehe ich nicht. Es werden 2 absolute Farbwerte in einem bestimmten Verhältnis zueinander gemischt und das Ergebnis ist immer ein bestimmter Farbwert im Farbraum. Da wird doch nichts überblendet, dafür müsst man ja den jeweiligen Hintergrund bei der Mischung mitberechnen.

Du gehst nur von einer einzelnen fixen Stelle aus, für welche man den gewünschten Farbwert auch einmalig berechnen kann. Daraus ergibt sich natürlich kein nennenswerter Vorteil. Der Themenersteller schrieb aber bereits, dass es ihm um verschiedene Themes geht und dass sich der Farbwert in einer einheitlichen Weise aus dem veränderten Grundton ergeben soll. Da bietet sich dann natürlich eine Funktion an. Das macht den Code wesentlich einfacher wartbar.

Zitat von BrokenHeart

Entweder musste 'früher' der Designer mehr rechnen (konvertieren)

Grafikprogramme kennen solche Funktionen seit vielen Jahren.

Zitat von BrokenHeart

oder der CSS-Coder hatte mehr Arbeit.

Und genau für den ist die Funktion, nicht für den Designer. Wie ich bereits erklärte, geht es bei neuen Webstandards fast immer darum, Dinge zu vereinfachen, fast nie darum, ein Design umsetzbar zu machen, was vorher nicht irgendwie auch anders gegangen wäre, aber entsprechend umständlicher.

Zitat von BrokenHeart

Und um diesen professionellen Aspekt ging es mir.

Ich verstehe diese Unterscheidung nicht. Der Hobbyentwickler sollte genauso wie der professionelle Entwickler das Ziel haben, mit möglichst wenig Aufwand das beste Ergebnis zu erreichen. Die Funktion richtet sich definitiv nicht nur an professionell arbeitende Menschen. Das trifft auf überhaupt keine CSS-Eigenschaft zu.

Zitat von Sören Hentzschel

Du gehst nur von einer einzelnen fixen Stelle aus, für welche man den gewünschten Farbwert auch einmalig berechnen kann.

Das hatte ich ja schon vorher im letzten Beitrag editiert: ich hatte fälschlicherweise nur auf die Änderung der Sidebar geschaut, nicht auf die Verwendung bei den Tabs, wo ja auch mit der aktuellen Farbe gemischt wird. Und deswegen sprach ich auch von dem "dunkleren grau", welches der TE wollte und wo ich keinerlei Vorteile zu den alternativen Methoden gesehen habe.

Zitat von BrokenHeart

oder der CSS-Coder hatte mehr Arbeit.

Zitat von Sören Hentzschel

...aber entsprechend umständlicher.

Also stimmt doch die Aussage, dass der Programmierer ohne diese Funktionalität mehr Arbeit hatte.

Zitat von Sören Hentzschel

Der Hobbyentwickler sollte genauso wie der professionelle Entwickler das Ziel haben, mit möglichst wenig Aufwand das beste Ergebnis zu erreichen. Die Funktion richtet sich definitiv nicht nur an professionell arbeitende Menschen. Das trifft auf überhaupt keine CSS-Eigenschaft zu.

Ich hatte ja auch nicht geschrieben, dass sich die Funktion nur an Leute richtet, die damit Geld verdienen. Natürlich nutzt jeder lieber eine Funktion die flexibler und einfacher zu handhaben ist. Aber dort sind die Auswirkungen wesentlich größer, wenn sich bestimmte Arbeiten, mangels geeigneter Werkzeuge, dann eben multiplizieren können.

Hier habe ich einen sehr ausführlichen und praxisorientierten Artikel gefunden zum Thema 'color-mix()', der auch den Zeitaspekt und Einsparungsmöglichkeiten in Bezug auf die "Stakeholder" in einer Firma erwähnt.

Simplify Your Color Palette With CSS Color-Mix()

@FireBugs Bitte verwende 2002Andreas, wenn du 2002Andreas meinst. andreas ist eine anderer Benutzer.