Alles anzeigenNaja, anpassen musst du jetzt so oder so, auf die eine oder die andere Weise.
Ab voraussichtliich Anfang Juli nicht mehr.
Bei dem Beispiel kann ich leider nicht direkt helfen. Da geht es um ein Kontextmenü und ich nutze macOS. Auf macOS werden die nativen Kontextmenüs des Betriebssystems genutzt, die können nicht via CSS angepasst werden. Aber um das mal etwas zu skizzieren:
Mit einer Einzelgrafik kannst du einfach list-style-image überschreiben und die Zeile mit -moz-image-region entfernen. Fertig. Du musst dir null Gedanken über irgendwelche Koordinaten machen.
Für ein Image Sprite musst du zusätzlich dazu, list-style-image und -moz-image-region zu entfernen, background-image definieren, background-size mit der Größe des Bildes und background-position mit den Start-Koordinaten, die anders angegeben werden als bei -moz-image-region. Möglicherweise brauchst du noch background-repeat. Im einfachsten Fall musst du noch width und height mit den Abmessungen der einzelnen Grafik angeben. Nur kann es je nach Element sein, dass du dieses damit verkleinerst, was unerwünscht wäre. Dann müsste man einen Teil des Codes in ein Pseudoelement (::before oder ::after) geben, welches man dann vermutlich absolut positionieren würde, was wiederum über ein halbes Dutzend weiterer Zeilen CSS bringt.
Der Vorteil von Image Sprites ist eigentlich nur, dass man Dateigröße und die Anzahl benötigter Anfragen einsparen kann. Ein Gewinn der Dateigröße existiert aber halt auch nur, wenn man wirklich zumindest annähernd alle Icons verwendet. Und die Anzahl an Anfragen spielt heute im Web keine große Rolle mehr und im Kontext der Browseroberfläche sowieso nicht.
Wenn man sowieso nur zwei Grafiken kombiniert (beispielsweise normal und :hover), kann ein Image Sprite eine elegante Lösung sein, auch weil der Aufwand überschaubar bleibt. Im :hover-Beispiel vermeidet man damit außerdem ein Flackern, wenn die :hover-Grafik noch nicht im Cache ist, wofür man sonst einen Workaround bräuchte, der wiederum mehr Zeilen CSS benötigt. Aber in diesem Fall glaube ich wirklich, dass man sich mit den Einzelgrafiken einen größeren Gefallen tut, weil die Bilddatei erstens so viel Unbenutztes beinhaltet und damit unnötig Ressourcen beansprucht, zweitens weil die Anpassung sehr viel einfacher ist und man nicht für jede Grafik einzeln die Position abmessen muss.
Vielen Dank. 👍 Na, dann kann ich mich ja an die Arbeit machen.