-moz-image-region ersetzen, Bilddatei mit vielen Symbolen

Zitat von Sören Hentzschel

Weil hier und auch im GitHub-Issue clip-path erwähnt wurde: Der Zusammenhang zu -moz-image-region ist vor allem, dass auf dessen MDN-Seite erwähnt wird, dass die Syntax ähnlich zu clip ist, was wiederum zu Gunsten von clip-path nicht länger verwendet werden soll. Der naheliegende Ersatz für -moz-image-region, weil viel unkomplizierter, ist in vielen Fällen aber ganz einfach die Umsetzung als background. So hat es Mozilla beispielsweise hier gemacht:

https://hg.mozilla.org/mozilla-central/rev/d8e1a8bee539

Die andere Option, Einzelgrafiken aus solchen Mehrfachgrafiken zu machen, wie Aris es getan hat, geht natürlich auch, ist aber auch nicht zwingend notwendig und hat nach seinen eigenen Angaben die Dateigröße um 40 Prozent vergrößert, was ich für einen ziemlich starken Anstieg halte, falls das wirklich nur darauf zurückzuführen ist (womit die Gesamtgröße natürlich immer noch überschaubar ist und das kein Problem oder dergleichen darstellt, also alles gut). Die Austauschbarkeit ist bei Einzelgrafiken sicherlich einfacher. Die Wartbarkeit höher als die Dateigröße zu gewichten, ist auch vollkommen legitim.

Ich habe noch nicht verstanden, wie ich -moz-image-region ersetzen muss, wenn ich eine Datei mit vielen Symbolen nicht in einzelne Dateien aufspalten will. Wie muss dann der neue Code für dieses Beispiel aussehen?

#idShowPicture {
list-style-image:url('../../../../icons/mosaic.png')!important;
-moz-image-region:rect(144px 112px 160px 96px)!important
}

Zitat von Sören Hentzschel

Ein konkretes Beispiel würde es einfacher machen. Den Selektor finde ich im Quellcode von Firefox nicht und die Grafik bitte auch anhängen.

Zweiter Versuch:

(Grafik in neuem Tab öffenen)

#context-viewimage {
list-style-image:url('../../../../icons/mosaic.png')!important;
-moz-image-region:rect(144px 112px 160px 96px)!important
}

Zitat von 2002Andreas

Zitat von bege

wie ich -moz-image-region ersetzen muss

Dazu gibt es schon einen Thread incl. Beispielen und Erklärungen:

Beitrag

RE: -moz-image-region entfällt

[…]

[…]

Um keine Missverständnisse aufkommen zu lassen: list-style-image kann sehr wohl weiterhin genutzt werden, nur ab Firefox 112 nicht mehr mit sogenannten Sprite-Grafiken, das sind diese Grafiken, die aus mehreren Teilbildern bestehen (für die Suchmaschine: „CSS sprites“; im SelfHTML-Wiki: Sprites-Tutorial).

Aris hat für seine Sammlung CustomCSSforFx genau die Lösung gewählt, die Sprites in ihre Teilgrafiken zu zerlegen und letztere jetzt einzeln anzusprechen.

[…]

Ohne es mir im Detail…

Speravir

2. März 2023 um 23:56

Dankeschön. Ich habe beide Threads gelesen und verstehen immer noch nicht, wie ich den obigen Code mit background-image und background-position ersetzten kann. Kannst du mir das an dem obigen Beispiel zeigen?

Zitat von 2002Andreas

Z.B. so:

CSS

#context-viewimage::before {
    background: url("file:///C:/Users/Andi/Icons%20Firefox/4.jpg")!important;
    margin-right: 8px !important; 
    margin-left: -6px !important;
    content: '' !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    background-repeat: no-repeat !important;
    background-position: 0px 0px !important;
    }

Alles anzeigen

D.h., du musst jetzt ein einzelnes Icon dafür nehmen.

Das habe ich kapiert. Aber diese Aussage von Soeren

Zitat

Die andere Option, Einzelgrafiken aus solchen Mehrfachgrafiken zu machen, wie Aris es getan hat, geht natürlich auch, ist aber auch nicht zwingend notwendig

aus RE: Entwicklung Firefox verstehe ich so, dass ich weiterhin die große Datei verwenden kann.

Zitat von Sören Hentzschel

Das ist richtig. Das macht es von der Anpassung her aber auch wesentlich komplizierter, weil du mehr CSS benötigst und ganz andere Positionsangaben benötigst. Die Grafik zurechtzuschneiden und einzubinden, ist da definitiv einfacher. Ich wollte mit meiner Aussage auch nur darauf hinaus, dass es technisch kein Muss ist, Einzelgrafiken zu erstellen. Der bessere Weg ist das nicht unbedingt, vor allem wenn das Image Sprite wie in diesem Fall aus mehreren hundert (!) Icons besteht, von denen sehr wahrscheinlich nur wenige überhaupt benutzt werden. Die Anwendungsfälle, bei denen Mozilla auf background-image umgestellt hat, waren bei weitem nicht so komplex.

Ich nutze für die Symbole immer noch den CSS-Code der Uralt-Erweiterung CuteMenus, die tatsächlich viel mehr Code und Grafiken enthält, als benötigt werden. Nur erspart mir das eine Menge Arbeit, weil ich nicht selbst für jeden Menüeintrag den Code erstellen muss. Und in Thunderbird funktioniert es auch noch. Wenn ich das Image Sprite aufteile, habe ich auch eine Menge Arbeit, um den Code anzupassen.

Könntest du mir für obiges Beispiel den Code angeben, wenn ich das Image Sprite behalten will? Dann kann ich sehen, welche Änderung weniger Arbeit macht.

Zitat von Sören Hentzschel

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

Alles anzeigen

Vielen Dank. 👍 Na, dann kann ich mich ja an die Arbeit machen.

Zitat von 2002Andreas

Zitat von Speravir

zusammenfassen kann

Z.B. so:

CSS

:is(menu,menuitem):before {
  color: transparent !important;
  content: -moz-label-content;
  height:16px;
  width:16px;
  margin-right: 6px;
  margin-left: -8px;
}

#context-bookmarklink:before {
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/mosaic.png");
  background-position: -430px -144px;
}

#context-viewimage:before {
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/mosaic.png");
  background-position: -96px -144px;
}

#context-copylink:before {
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/mosaic.png");
  background-position: -80px -144px;
}

#context-saveimage:before {
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/mosaic.png");
  background-position: -130px -144px;
}

Alles anzeigen

Großartig, vielen Dank.

Zitat von Speravir

Zitat von 2002Andreas

Z.B. so:

Genau. Wobei hier vermutlich statt menu,menuitem besser mit den IDs der Kontextemenüeinträge zu hantieren wäre.

Auch dir vielen Dank für die Vorarbeit. Wenn ich den CSS-Code der alten CuteMenus-Erweiterung nutze, wäre das ansprechen jeder ID wegen der vielen IDs nicht umsetzbar. Ich werde mir das mit etwas Muße mal anschauen und dann sehen, welcher Weg der einfachste ist.

Zitat von 2002Andreas

Den Code habe ich mal etwas angepasst, und bemerke keinerlei Probleme mit der :is Version.

CSS

menupopup menuitem.menuitem-iconic {
  margin-left: -6px;
}

menupopup :is(menu,menuitem):not(menuitem.menuitem-iconic):before {
  color: transparent !important;
  content: -moz-label-content;
  height:16px;
  width:16px;
  margin-right: 6px;
  margin-left: -4px;
}
#context-openlinkintab:before,
#context-inspect-a11y:before,
#context-inspect:before,
#context-bookmarklink:before {
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/mosaic.png");
  background-position: -430px -144px;
}

#context-viewimage:before {
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/mosaic.png");
  background-position: -96px -144px;
}

#context-copylink:before {
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/mosaic.png");
  background-position: -80px -144px;
}

#context-saveimage:before {
  background-image: url("file:///C:/Users/Andi/Icons%20Firefox/mosaic.png");
  background-position: -130px -144px;
}

Alles anzeigen

Evtl. kann Sören ja genaueres dazu sagen, ob das per :is keine gute Lösung in diesem Fall ist.

Das macht mich auf einen Unterschied zu meinem bisherigen Code aufmerksam. aborix hatte mir ein Skript geschrieben, mit dem allen Menüeinträgen wieder die Class .menu-iconic oder .menuitem-iconic zugewiesen wurde. Dadurch habe ich nur list-style-image und -moz-image-region im CSS-Code benötigt, kein background und  :before oder sonst etwas.

Jetzt bleibt also nur entweder das komplett umzubauen, oder eben doch die mosaic.png in einzelne Dateien aufzuspalten.