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

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

    CSS
    #idShowPicture {
    list-style-image:url('../../../../icons/mosaic.png')!important;
    -moz-image-region:rect(144px 112px 160px 96px)!important
    }
  • Zur hilfreichsten Antwort springen
  • 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)

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

  • wie ich -moz-image-region ersetzen muss

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

    Speravir
    2. März 2023 um 23:56
  • wie ich -moz-image-region ersetzen muss

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

    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?

  • Kannst du mir das an dem obigen Beispiel zeigen?

    Z.B. so:

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


    Oder auch so:

    CSS
    #context-viewimage {
       background: url("file:///C:/Users/Andi/Icons%20Firefox/4.jpg") no-repeat !important;
       background-position: 9px 11px !important;
       padding-left: 35px !important;
    }

    Mit freundlichem Gruß
    Andreas
    Mein Laptop Neu Meine Add-ons

    Einmal editiert, zuletzt von 2002Andreas (7. März 2023 um 22:14) aus folgendem Grund: Ein Beitrag von 2002Andreas mit diesem Beitrag zusammengefügt.

  • Z.B. so:

    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.

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

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

    Einmal editiert, zuletzt von bege (8. März 2023 um 00:13)

  • Nur erspart mir das eine Menge Arbeit, weil ich nicht selbst für jeden Menüeintrag den Code erstellen muss.

    Naja, anpassen musst du jetzt so oder so, auf die eine oder die andere Weise.

    Und in Thunderbird funktioniert es auch noch.

    Ab voraussichtliich Anfang Juli nicht mehr. ;)

    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.

    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.

  • Könntest du mir für obiges Beispiel den Code angeben, wenn ich das Image Sprite behalten will?

    Das war jetzt ein schwieriges Stück Arbeit, nur für #contextview-image:

    content: -moz-label-content ist eine Standarddeklaration, aber an anderer Stelle (dort, wo jetzt content:"" steht).

    Wenn Du noch zwei, drei weitere Beispiele geben würdest, könnte man dir auch zeigen, wie man die Deklarationen zusammenfassen kann. Das sind nämlich alle außer der background-position. Wenn ich jetzt nicht völlig falsch lag, dann musst Du von -moz-image-region rect immer zuerst den letzten Wert nehmen und das Negative davon nehmen (- davor setzen) und als zweites dasselbe mit dem ersten Wert vollführen.

    • Hilfreichste Antwort

    zusammenfassen kann

    Z.B. so:

  • bege 11. März 2023 um 21:28

    Hat einen Beitrag als hilfreichste Antwort ausgewählt.
  • zusammenfassen kann

    Z.B. so:

    Großartig, vielen Dank.


    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.

    Einmal editiert, zuletzt von bege (11. März 2023 um 21:32) aus folgendem Grund: Ein Beitrag von bege mit diesem Beitrag zusammengefügt.

  • Eine ID ist immer dann angebracht, wenn man CSS-Code nur auf einen Teil der Elemente anwenden will, genauer auf jedes einzelne Element unterschiedlich. :is(menu, menuitem) wirkt auf alle Menüeinträge. Dazwischen liegen die Elemente, die durch eine gemeinsame Klasse verbunden sind.

    Ü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

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

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

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

    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.