Eigene Icons einbinden - Vor-/Nachteile verschiedener Wege

  • Firefox-Version
    9002
    Betriebssystem
    Win10

    Ich hab beim durchforsten meiner CSS-Files 2 verschiedene Arten gefunden, einem Ordner ein bestimmtes Icon zuzuordnen:

    Kurze Version (V1):

    CSS
    /* Lidl */
    #PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label=Lidl] {
                list-style-image: url('../icons/lidl.jpg') !important;
                -moz-image-region: rect(0px, 16px, 16px, 0px) !important;
    }

    alternative Version (V2):

    CSS
    toolbarbutton.bookmark-item[label^="Lidl"] > image{ 
        visibility: hidden;
    }
    toolbarbutton.bookmark-item[label^="Lidl"]{ 
        background: url('../icons/lidl.jpg') no-repeat !important; 
        background-size: 16px !important; 
        background-position-x: 4px !important; 
        background-position-y: 2px !important;

    Gibts es Vor- bzw Nachtteile beim EInsatz der verschiedenen Versionen?

    Ich kann keinen optisch keinen Unterschied beim Einsatz von V1 oder V2 erkennen 8|

    W11 Home 64bit - FF120.x

    • Hilfreichste Antwort

    -moz-image-region wird ausschließlich verwendet, wo XUL zum Einsatz kommt. Von der Länge zu sprechen ("kurze Version") ist eher irreführend, weil du die background-Eigenschaft ebenfalls zusammenfassen kannst. De facto nutzt du hier ein Shorthand, überschreibst dann aber doch einzelne Eigenschaften statt entweder alles in den Shorthand zu nehmen oder alles einzeln zu definieren. Der Begriff ist nicht offiziell, aber ich würde das Kuddelmuddel nennen. ;)

    Wenn du wirklich alles einzeln auflisten willst, sollte es so aussehen:

    CSS
    toolbarbutton.bookmark-item[label^="Lidl"] { 
        background-image: url('../icons/lidl.jpg') !important; 
        background-repeat: no-repeat !important;
        background-size: 16px !important; 
        background-position-x: 4px !important; 
        background-position-y: 2px !important;
    }

    Die Verwendung von background-position-x sowie background-position-y ist auch sehr ungewöhnlich. Ich kenne das zwar, habe das im realen Einsatz aber tatsächlich noch nie gesehen. Das fasst man eigentlich als background-position zusammen:

    CSS
    toolbarbutton.bookmark-item[label^="Lidl"] { 
        background-image: url('../icons/lidl.jpg') !important; 
        background-repeat: no-repeat !important;
        background-size: 16px !important; 
        background-position: 4px 2px !important; 
    }

    Aber wenn du es kurz wie in Variante 1 haben willst:

    CSS
    toolbarbutton.bookmark-item[label^="Lidl"] { 
        background: url('../icons/lidl.jpg') no-repeat 4px 2px / 16px;
    }
  • Die verschiedenen Versionen haben sich in den letzten Jahren hier angesammelt, seit ich mit Hilfe des Forums meinen FF aufhübsche ( jaja, ich weis, hübsch ist Einstein=relativ :D ). Damals gabs noch ganzviel XUL :)

    Mir ist dann eben aufgefallen, daß ich mindestens 2 Verschieden Wege benutze.

    Und nu habbich noch eine 3. Variante (V3) gefunden:

    Das gefällt mir so nicht - ich habs gerne vereinheitlicht und richtig, sodaß ich im Bedarfsfall an einem Beispiel Hilfe erfragen und dann auf alle anderen anwenden/umsetzen kann.

    Es muß nicht kurz sein, ich hätte am liebsten eine Version, die ich für ALLE Icons, sei es für Ordner, Links oder Files, sei es in der Lesezeichen-Symbolleiste (PersonalToolbar) oder in den dort vorhandenen Ordnern anwenden/nutzen kann - sofern das möglich ist.

    W11 Home 64bit - FF120.x

  • Das ist im Prinzip genau das Gleiche, bloß mit display: none statt visiblity: hidden. Ersteres "entfernt" Elemente, als würde es sie nicht geben, zweiteres macht sie unsichtbar, reserviert aber den Platz, als wäre das Element noch sichtbar. Für den background-Teil gilt wieder das Gleiche, was ich bereits geschrieben habe. Ob appearance notwendig ist, hängt halt davon ab, was für ein Element angesprochen wird und ob dafür Styling-Regeln existieren, die du zurücksetzen möchtest.

  • Es ist wahrscheinlich ein Schreibfehler in Beitrag #1 aber [label=Lidl] (V1) und [label^=Lidl] ist nicht das gleiche. Ersteres wendet den Code nur an, wenn das Attribut den Wert Lidl hat, in V2 wird der Code angewendet, wenn Lidl der Anfang des Attributwertes ist, z. B. auf Lidlmarkt.

    Ü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

  • milupo:

    Ich habe einfach die Lösungen übernommen, die mir hier im Forum mal angeboten wurden - allerdings nicht immer kommentiert woher/von wem die Lösung kam.

    Selber hab ich das nicht entwickelt - mir fehlt einfach der Hintergrund...

    Aber mit Deinem Hinweis kann ich jetzt schonmal einiges "vereinheitlichen".

    W11 Home 64bit - FF120.x

  • Ich wollte nur mal darauf hinweisen, es hat ja nur indirekt mit dem Thema dieses Threads zu tun.

    Ü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

  • harff182 25. Juli 2021 um 23:29

    Hat einen Beitrag als hilfreichste Antwort ausgewählt.
  • Ich hab mal diesen Code-Schnipsel von Sören Hentzschel als Grundlage genommen:

    CSS
    toolbarbutton.bookmark-item[label^="Lidl"] { 
        background-image: url('../icons/lidl.jpg') !important; 
        background-repeat: no-repeat !important;
        background-size: 16px !important; 
        background-position: 4px 2px !important; 
    }

    Jetzt sehen sich in allen CSS die Icon-Zuweisungen seehr ähnlich, je nach Verwendungszweck.

    || guuts nächtle :sleeping:

    W11 Home 64bit - FF120.x