Eigene Icons einbinden - Vor-/Nachteile verschiedener Wege

harff182

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

Sören Hentzschel

-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;
}

harff182

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

CSS

/* APOD */
.bookmark-item[label="APOD-E"] > image,
.bookmark-item[label="APOD-E"] > .menu-iconic-left {
    display: none!important;
}

.bookmark-item[label="APOD-E"] {
    -moz-appearance: none !important;
    background: url('../icons/apod.png') no-repeat !important; 
    padding-left: 41px !important;
    background-size: 16px !important; 
    background-position-x: 16px !important; 
    background-position-y: 0.5px !important;
}

Alles anzeigen

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.

Sören Hentzschel

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.

milupo

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.

harff182

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

milupo

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

harff182

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

harff182 25. Juli 2021 um 23:29