Verbesserung userChrome.css (Saubere Programmierung)

  • Firefox-Version
    v101.0.1
    Betriebssystem
    Win10

    Hallo community,

    Ich habe eine kleine Bitte an alle CSS-Speziallisten:

    Obwohl ich mir die tollen Pinned-Tutorials von diesem Forum

    >> Anpassungen von Firefox-Oberfläche mittels userChrome.css und Webseiten mittels userContent.css

    >> und v.A. Anleitung zur Nutzung des Inspektors und der Stilbearbeitung aus den Entwicklerwerkzeugen

    durchgelesen habe, bin ich mit den Identifikatoren, Klassen, Pseudoklassen, usw. nicht so richtig "warm" geworden.

    ==================

    Problem:

    Ich habe eine ziemlich einfache userChrome.CSS, die ich gerne auf 5 (private) Rechner mit jeweils 5 Profilen ausrollen würde.

    Der Code sollte also möglichst Fehlerfrei sein.

    => Meine userChrome.CSS funktioniert zwar, da ich sie aber aus Forums-Schnipsel zusammen-kopiert habe, bin ich sehr unsicher,

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

    ==================

    Meine Bitte:

    Kann ein CSS-Speziallist meinen userChrome.CSS ansehen und verbessern, sodaß sauber fehlerfrei programmiert?

    userCrome.CSS:

    Spoiler anzeigen

    /* ======================================================================================================
    === ZUSÄTZLICH about:config >>> toolkit.legacyUserProfileCustomizations.stylesheets = TRUE ====
    ====================================================================================================== */


    @import "myCSS/SidebarHover.css";
    /* ====================================================================================================== */

    /* ======================================================================================================
    Lesezeichensymbolleiste ohne Text
    RE: Lesezeichen Symbolleiste mehrzeilig und ohne Text - Wie geht das?
    */
    #PlacesToolbarItems > toolbarbutton.bookmark-item > .toolbarbutton-text {
    display: none !important;
    }

    /* ======================================================================================================
    Icons(Favicons) in Lesezeichensymbolleiste näher zusammenrücken
    RE: Lesezeichen Symbolleiste mehrzeilig und ohne Text - Wie geht das?
    */
    #PlacesToolbarItems toolbarbutton.bookmark-item {
    padding-left: 2px !important; /* default=4px */
    padding-right: 2px !important; /* default=4px */
    }

    /* ======================================================================================================
    Inaktive Tabs und deren Rahmen immer erkennbar (Background immer erkennbar)
    https://ourtechroom.com/tech/get-back-…design-firefox/
    Tabs farbig - zentriert - hover - schmaler - abgerundet und einiges mehr
    */
    .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
    background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
    }

    .tab-background {
    margin-bottom: 2px !important;
    margin-top: 2px !important;
    }

    /* ======================================================================================================
    Inaktiver Tabtext kleiner (90%) */
    .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-label {
    font-size: 90% !important;
    }

    SidebarHover.css:

    Spoiler anzeigen

    /* ======================================================================================================
    Sidebar per hover (von links) ausklappen
    https://www.windowspower.de/firefox-83-sid…-hover-oeffnen/
    RE: Sidebar css code */

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

    #menu_bookmarksSidebar {
    display: -moz-box !important;
    }

    #bookmarks-view-children {
    margin-left: -12px !important;
    }

    #sidebar-box {
    display: block !important;
    position: fixed !important;
    top: 109px; /* Begin der Sidebar von oberem Monitorrand */
    bottom: 0px;
    width: 25px !important; /* Hoverbreichbreite: 0px falls nur 1 Monitor */
    overflow-x: hidden !important;
    -moz-appearance: none !important;
    border: 1px solid transparent !important;
    border-left: 0 !important;
    opacity: 0 !important;
    transition: width .5s ease-out .5s, opacity .5s ease-out .5s !important; /* Zurück EINklappen nach xx Sek */
    z-index: 2 !important;
    }

    #sidebar-box:hover {
    width: 370px !important; /* Sidebarbreite wenn ausgeklappt */
    opacity: 1 !important;
    transition: width .1s ease-out .1s, opacity .1s ease-out .1s !important; /* AUSklappen nach xx Sek */
    }

    #sidebar-header {
    width:100%;
    border: 0 !important;
    }

    #sidebar-splitter {
    display: none !important;
    }

    #sidebar {
    display: block !important;
    width: 100% !important;
    height: 95%;
    }
    }
    /* ====================================================================================================== */

    PS:

    Fast alle Code-Schnipsel von hier:

    2002Andreas
    10. Juni 2021 um 14:16

    haben bei mir mit FF_v101 KEINEN Effekt.

    Ich vermute, daß das am neuen Proton-GUI liegt.

    Sehr gern hätt eich die [Sidebar-Hoverfarbe] verändert, daß man eine deutliche Sidebar-Zeilenhintergrund-Farbe sieht, wenn man nur hovert (ohne klicken).

    Leider hab ich das auch nach langem, langem suchen nicht zusmmen gebracht :(

    beste Grüße

    Firebug

  • 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.

    haben bei mir mit FF_v101 KEINEN Effekt.

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

    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.

  • Hallo Andreas,

    Vielen Dank für Deine Antwort!

    Vorab: So neu bin ich nicht: Ich bin auch der User Firebug, komme aber gerade nicht in meinen (alten) Account rein, weil die Forums-SW wohl Probleme hat, an GMX-Accounts emails zu versenden. ("Passwort vergessen") Ich war schon mit dem Admin (Sören) in kontakt.

    > ...Meinst du das so?....

    Ja genau - der hellblaue Zeilenhintergrund hinter dem "https"-Text (in Deinem Bild).

    Mein Sidebarhintergrund ist dunkelgrau. Die Zeilen-Hervorhebung beim Hovern hat fast die selbe Farbe und ist sehr schlecht erkennbar.

    Vielen Dank für Deinen Code!

    Puh, daß ist aber viel Code für solch eine "kleine" Farbänderung. Ich werd's später (event. erst abends) probieren.

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

    Puh, genau kann ich mich auch nicht mehr erinnern. Ich habe einige getestet. Primär um einen senkrechten SEPARATOR zwischen den Tabs zu bekommen. Nun hab ich das aber anders geköst - siehe obige userChrome.CSS

    Ich hatte folgende Codeschnipsel (einzeln) getestet. = zu meiner (kurzen) userChrome.CSS dazu gefügt. - Die hatten bei mir aber alle keinen Effekt. Teilweise auch mit anderen Werten, damit man einen deutlichen Effekt sehen würde.

    Aber mühe Dich nicht ab - so wichtig is mir das nicht.

    Zitat

    Ich würde den Code so lassen.

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

    Oh, danke! Daß ist mir das Wichtigste, zumal der Code möglichst robust und zuverlässig sein soll.

    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...

    Sind in obiger userChrome.css die IDs, Klassen, Pseudoklassen, usw... "sauber gesetzt", sodaß man zB die [Reihenfolge der Absätze] ändern könnte, ohne daß die Funktion verloren geht? Oder könnte man die IDs, Klassen, Pseudoklassen,.... besser programmieren?

    beste Grüße

    Firebug

  • 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

    Mit <3lichem Gruß

    Mira

  • 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:

    CSS
    /*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:

    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.

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

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

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

    Wenn du es nur ganz einfach möchtest:

  • Hallo Mira_Belle, Andreas,

    Danke für Eure Antworten.

    Ah ok, daß der Import ganz oben stehen muß hab ich wohl im Tutorial überlesen.

    andreas:

    Thanx für die Darstellung der Tab_Textlänge. Ok, der Unterschied ist so klein, daß ich ihn vermutl. übersehen hab ;-).

    Und zum CSS-Code:

    Perfekt - danke - juhuu klappt!

    Da ich mittlerweile Eher der Typ ["keep it simple", aber dafür robust gegen zukünftige Updates] bin,

    hab ich Deinen obenstehenden Code zur userChrome.css dazu gefügt:

    Spoiler anzeigen

    /* Sidebar: Zeilenhintergrund-Farbe beim Hovern besser hervor heben
    https://developer.mozilla.org/de/docs/Web/CSS/color_value
    https://developer.mozilla.org/en-US/docs/Web…value/color-mix
    */
    @-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: color-mix(in srgb, grey 60%, black) !important; /* color-mix anstatt "grey", damit dunkleres grau */
    }
                     
    .sidebar-placesTreechildren::-moz-tree-cell-text(container, hover),
    treechildren::-moz-tree-cell-text(hover) {
    font-weight: bold !important;
    color: white !important;
    }
    }

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

    Sonst ist er inaktiv.

    ====================================

    So long: Danke für die Hilfe! Jetzt kann ich meine userChrome.css getrost freezen und auf die Profile ausrollen.

    beste Grüße

    Firebug

  • @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... :/

  • Ü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.

    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.

  • BrokenHeart:

    Nein ich bin nicht sicher ob es richtig funktioniert - denke aber schon:

    Nein nix verändert: layout.css.color-mix.enabled = unverändert = false. Trotzdem klappt es: Das grau wird dunkler. das wollte ich erzielen.

    Auch wenn ich denn Parameter auf true setze, ändert sich nichts (ohne Profil-reboot getestet).

    Das color-mix hab ich mir von hier abgeschaut (und war die einzige Möglichkeit die ich gefunden habe, um diese blöden inaktiven Tabs wieder besser sichtbar zu machen):

    How to get back to the old tab design in Firefox?
    How to get back to the old tab design in Firefox?
    ourtechroom.com

    Funktioniert aber.

    Und was mir gefällt ist, daß es eine RELATIVE Farbangabe ist - und nicht eine harte/absolute Farbe. d.h. wenn sich die Tab-Background-Farbe ändert, ändert sich das sichtbarkeit mit.

    Oh mann, aber wenn ich schon höre "experimentelle CSS-Funktion" klingt das sehr danach, daß das zukünftig wieder irgendwann (nach einem FF-Update) wieder nicht mehr funzt. Und genau das wollte ich eigentl. verhindert! Mein kleines CSS soll nur das aller nötigste enthalten und robust sein.

    ===================

    Edit: Ah - im Nachgang hab ich noch Sören's Text gelesen - gott sei dank. Danke Sören für die Aufklärung.

    Zitat

    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.

  • 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...

  • 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.

  • andreas:

    > ...Siehe Beitrag Nr. 9, damit musst du rechnen....

    Ja thanx. Hab ich registriert. Ich hoffe eben, daß es sich möglichst nicht ändert.

    BrokenHeart: Wie oben geschrieben gefällt mir, daß es eine relative Farbdeinition ist (und nicht eine absolute/harte Farbvorgabe):

    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. Somit kann ich meine userChrome.css in allen 5 Profilen verwenden und die "color-mix_Farbe" wird immer zum Theme-Hintergrund dazu passen.

    Ich habe die color-mix an 2 stellen verwendet: a) bei Hintergrundfarbe der inaktiven Tabs UND b) eben beim Zeilenhintergrund von der Sidebar beim hovern. Dort wollte ich nur ein dunkleres grau erzielen...


    Hier nun mein finaler Code, den ich auf meine 5 Profile (auf ca. 4 Privatrechnern) ausrolle :

    C:\ProgramData\Firefox\Profiles\SURF\chrome\userChrome.css:

    Spoiler anzeigen

    /* ======================================================================================================
    === ZUSÄTZLICH about:config >>> toolkit.legacyUserProfileCustomizations.stylesheets = TRUE ====
    === Die Importzeile MUSS immmer ganz oben stehen ===
    ====================================================================================================== */


    @import "myCSS/SidebarHover.css";

    /* ======================================================================================================
    Sidebar: Zeilenhintergrund-Farbe beim Hovern besser hervorheben
    https://developer.mozilla.org/de/docs/Web/CSS/color_value
    https://developer.mozilla.org/en-US/docs/Web…value/color-mix
    */
    @-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: color-mix(in srgb, grey 60%, black) !important; /* color-mix anstatt "grey", damit dunkleres grau */
    }
                     
    .sidebar-placesTreechildren::-moz-tree-cell-text(container, hover),
    treechildren::-moz-tree-cell-text(hover) {
    font-weight: bold !important;
    color: white !important;
    }
    }

    /* ====================================================================================================== */
    /* ======================================================================================================
    Lesezeichensymbolleiste ohne Text
    RE: Lesezeichen Symbolleiste mehrzeilig und ohne Text - Wie geht das?
    */
    #PlacesToolbarItems > toolbarbutton.bookmark-item > .toolbarbutton-text {
    display: none !important;
    }

    /* ======================================================================================================
    Icons(Favicons) in Lesezeichensymbolleiste näher zusammenrücken
    RE: Lesezeichen Symbolleiste mehrzeilig und ohne Text - Wie geht das?
    */
    #PlacesToolbarItems toolbarbutton.bookmark-item {
    padding-left: 2px !important; /* default=4px */
    padding-right: 2px !important; /* default=4px */
    }

    /* ======================================================================================================
    Inaktive Tabs und deren Rahmen immer erkennbar (Background immer erkennbar)
    https://ourtechroom.com/tech/get-back-…design-firefox/
    Tabs farbig - zentriert - hover - schmaler - abgerundet und einiges mehr
    */
    .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
    background-color: color-mix(in srgb, currentColor 25%, transparent) !important;
    }

    .tab-background {
    margin-bottom: 2px !important;
    margin-top: 2px !important;
    }

    /* ======================================================================================================
    Inaktiver Tabtext kleiner (90%) */
    .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-label {
    font-size: 90% !important;
    }

    C:\ProgramData\Firefox\Profiles\SURF\chrome\myCSS\SidebarHover.css:

    SidebarHover.css

    /* ====================================================================================================
    === ZUSÄTZLICH about:config >>> toolkit.legacyUserProfileCustomizations.stylesheets = TRUE ====
    ====================================================================================================== */
    /* ======================================================================================================
    Sidebar per hover (von links) ausklappen
    https://www.windowspower.de/firefox-83-sid…-hover-oeffnen/
    RE: Sidebar css code */

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

    #menu_bookmarksSidebar {
    display: -moz-box !important;
    }

    #bookmarks-view-children {
    margin-left: -12px !important;
    }

    #sidebar-box {
    display: block !important;
    position: fixed !important;
    top: 109px; /* Begin der Sidebar von oberem Monitorrand */
    bottom: 0px;
    width: 25px !important; /* Hoverbreichbreite: 0px falls nur 1 Monitor */
    overflow-x: hidden !important;
    -moz-appearance: none !important;
    border: 1px solid transparent !important;
    border-left: 0 !important;
    opacity: 0 !important;
    transition: width .5s ease-out .5s, opacity .5s ease-out .5s !important; /* Zurück EINklappen nach 0,5 Sek */
    z-index: 2 !important;
    }

    #sidebar-box:hover {
    width: 370px !important; /* Sidebarbreite wenn ausgeklappt */
    opacity: 1 !important;
    transition: width .1s ease-out .1s, opacity .1s ease-out .1s !important; /* AUSklappen nach 0,1 Sek */
    }

    #sidebar-header {
    width:100%;
    border: 0 !important;
    }

    #sidebar-splitter {
    display: none !important;
    }

    #sidebar {
    display: block !important;
    width: 100% !important;
    height: 95%;
    }
    }
    /* ====================================================================================================== */

    PS: Leider bin ich zu dämlich obigen Code in eine "Codefenster" rein zu kopieren: Die Forums-Software löscht dann alle zeilenumbrüche... !?

    5 Mal editiert, zuletzt von FireBug (14. Juni 2022 um 10:57) aus folgendem Grund: Ein Beitrag von FireBugs mit diesem Beitrag zusammengefügt.

  • 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. ;)

  • 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()).

    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.

    3 Mal editiert, zuletzt von BrokenHeart (14. Juni 2022 um 11:20)

  • 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.

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

    Grafikprogramme kennen solche Funktionen seit vielen Jahren.

    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.

    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.

  • 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.

    oder der CSS-Coder hatte mehr Arbeit.

    ...aber entsprechend umständlicher.

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

    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.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress