Firefox-exklusive Minimap (2021)

• Die Blog-Minimap, die nur für Firefox-Desktop-Nutzer sichtbar ist, ist ein Beispiel für das Experimentieren mit browserspezifischen CSS-Funktionen trotz des geringen Firefox-Marktanteils von 4 %
• Der Kern ist die nur von Firefox unterstützte CSS-Funktion element(), in der tatsächlichen Implementierung wird jedoch das vendor-präfixierte -moz-element() verwendet
• Diese Funktion stellt ein beliebiges HTML-Element wie ein Bild dar und spiegelt dabei Textauswahl, Scrollen und sogar Änderungen durch Lazy-Loading-Bilder in Echtzeit wider
• Den Hintergrund der Minimap zeichnet eine einzige CSS-Zeile, die den DOM-Knoten #main als background rendert; für die Bewegung der aktuellen Viewport-Box wird zusätzlich JavaScript verwendet
• Mit einer Firefox-spezifischen Funktion lässt sich ein Teil der Seite ohne separates Canvas-Rendering als Minimap-Hintergrund wiederverwenden

---

Firefox-exklusive Minimap auf Basis von element()

• Die Minimap des Blogbeitrags ist eine Funktion, die nur Firefox-Desktop-Nutzern angezeigt wird; der Marktanteil von Firefox wird dabei mit 4 % angegeben
• Firefox ist der einzige Browser mit Unterstützung für die CSS-Funktion element(); für die tatsächliche Nutzung ist ein Vendor-Präfix erforderlich
• Die Funktion element() kann ein beliebiges HTML-Element innerhalb der Seite wie ein Bild darstellen
  • Das dargestellte Objekt ist kein statischer Screenshot, sondern verhält sich wie ein Live-Bild
  • Auch Änderungen wie Textauswahl oder das Erscheinen von Lazy-Loading-Bildern während des Scrollens werden übernommen

Implementierung

• Das CSS zum Definieren eines anderen HTML-Elements als Hintergrundbild hat die folgende Form

mini-map .screen-image .canvas {
  background: white -moz-element(#main) no-repeat scroll center center / contain;
}

• -moz-element(#main) übernimmt das Rendern des DOM-Knotens #main als Hintergrundbild der Minimap
• Für die Bewegung der aktuellen Viewport-Box innerhalb der Minimap wird zusätzlich JavaScript verwendet, der Kern des Renderns eines anderen DOM-Knotens ist jedoch eine einzige CSS-Zeile
• In Firefox kann mit -moz-element ein Teil der Seite wie eine Minimap dargestellt werden

[GN⁺]

Hacker-News-Kommentare

• Vor 10 Jahren habe ich die spielzeugartige JS-Bibliothek https://oridomi.com gebaut, mit der man DOM-Elemente wie Papier falten kann, und gehofft, dass man statt des langweiligen Klonens von Nodes bei jedem Faltvorgang element() verwenden würde
  10 Jahre später wurde diese Nischen-CSS-Funktion noch immer von keinen anderen Browsern übernommen, und auch die Spezifikation für CSS Custom Filters aus derselben Zeit schien damals bald nutzbar zu werden, hat aber bis heute keine traction bekommen

  • Soweit ich weiß, haben Browser-Hersteller die Spezifikation für CSS Custom Filters gesehen und entschieden, dass sie zu schwer sicher zu implementieren ist
    Einerseits verstehe ich, eine Funktion aufzugeben, wenn man sie nicht sicher machen kann, andererseits wollte ich CSS Custom Filters wirklich haben und denke immer noch oft an Dinge, die man damit hätte machen können
    https://lists.webkit.org/pipermail/webkit-dev/2014-January/0...

• Wenn ich einen Editor mit Minimap benutze, schalte ich sie als Erstes aus
  Beim Programmieren ist sie fast die nutzloseste Funktion überhaupt, und auf Websites wirkt sie ähnlich nutzlos. Der Inhalt ist zu klein, um leicht zu erkennen, wohin man geht, und weder bei kurzen noch bei langen Seiten ist der Nutzen groß genug, um den Verlust an Bildschirmfläche oder die Ablenkung zu rechtfertigen; ein ordentliches Inhaltsverzeichnis mit aussagekräftigen Titeln oder eine Suchfunktion ist für die Seitennavigation viel besser
  Cool sein kann eine Minimap bei großen Bildern oder Karten, also bei Dingen, die von Natur aus visuell sind, weil es nützlich ist, beim Hineinzoomen zu sehen, wo man sich im Ganzen befindet. Es ist zwar eine coole Zukunftsfunktion, aber diese Umsetzung wirkt nicht besonders gelungen

  • Ich lasse sie an. Beim Scrollen mit einer Zeigervorrichtung wie Maus oder Trackpad funktioniert sie wie eine größere Scrollbar
    Moderne Betriebssysteme versuchen, Scrollbars zu verstecken oder so klein wie möglich zu machen, und die Minimap löst dieses Problem, während sie gleichzeitig ein wenig von der visuellen Form des Dateiinhalts zeigt. Man kann den Text nicht lesen, aber wenn man lange an einer Datei gearbeitet hat, weiß man ziemlich genau, worauf man schaut
  • Ich nutze sie genau umgekehrt. Da ich oft mit langen Dateien arbeite, verwende ich die Minimap häufig als deutlich bessere Scrollbar
    Ich schaue selten direkt hin, aber sie ist im Blickfeld und ich überfliege sie unbewusst oft. Solche Funktionen sind offensichtlich nicht für jeden geeignet, aber nur weil sie einem nicht gefallen, sind sie nicht nutzlos
  • Es geht nicht darum, kleine Schrift zu lesen, sondern die Form des Codes zu sehen
    VSCode markiert zum Beispiel Fehler in der Minimap auffällig rot, sodass man leicht zu dieser Stelle springen kann
  • Eine Minimap kann auch gut die Vorschaufunktion klassischer Scrollbars verbessern
    Scrollbars zeigen die Länge einer Seite und helfen so zu entscheiden, ob man weiterlesen will, aber eine Minimap hilft dabei, zwischen „einem kurzen Text mit mehreren Seiten ignorierbarer Kommentare dahinter“ und „einem von vornherein zu langen Text“ zu unterscheiden
  • Ich mag Minimap ziemlich gern. Sie sollte nicht verpflichtend sein, und ich verstehe völlig, warum man sie ausschalten möchte. Sie nimmt viel Platz ein und kann für Leute, die Dateien oft aufgeteilt anzeigen, ziemlich störend sein
    Ich denke aber eher visuell und räumlich über Code nach und teile Dateien meist erst dann auf, wenn es nötig ist, deshalb hilft mir die „Form“ einer Datei beim schnellen Navigieren. Besonders dann, wenn die Datei in klare Abschnitte gegliedert ist
    Bei großen Bildern oder Karten stimme ich ebenfalls zu. Die meisten Bildeditoren haben eine solche Viewport-Funktion, und bei Detailarbeit ist sie ziemlich nützlich

• Ich sehe den Anwendungsfall, aber es ist ziemlich wild. Wenn man Text auswählt, aktualisiert es sich in Echtzeit, und es wirkt fast wie ein separater Viewport auf nahezu denselben Inhalt
  Ich denke noch über die Use Cases und Implikationen nach, aber es ließe sich auch auf mit offscreen oder overflow:hidden versteckte Elemente anwenden. Soweit ich weiß, gibt es allerdings noch keine Möglichkeit, ein solches Element ohne Bibliothek in ein Bild zu konvertieren, wahrscheinlich aus Datenschutzgründen
  Die MDN-Seite ist ziemlich kurz, deshalb habe ich viele Fragen. Man kann CSS-Filter und Verzerrungen zwar direkt auf Elemente anwenden, aber eröffnet die Tatsache, dass dies wie ein Hintergrund behandelt wird, neue Möglichkeiten? Ich habe zum ersten Mal davon gehört, obwohl es das offenbar schon lange gibt, und wusste nicht, dass so etwas überhaupt als CSS-Kandidat existiert. Wenn man nur Firefox anpeilt und Chrome ignoriert, frage ich mich, wie viele Anwendungen über das Duplizieren eines Viewports hinaus es dafür gibt

  • Es könnte einige coole Einsatzmöglichkeiten geben, etwa Spiegel, Lupen, Funktionen, die einen Teil der Seite außerhalb des Bildschirms dauerhaft sichtbar halten, und mehr
    Man könnte es zum Beispiel für Editierzwecke nutzen, und wahrscheinlich gibt es viele Anwendungsfälle, die ich übersehe. Es sind im Kern keine unbedingt nötigen Funktionen, aber jede davon ist auf ihre eigene Weise cool

• Ich begegne jeden Tag Websites, die nur in Chrome funktionieren. Zeit zum Gegenschlag :)

  • Ich nutze nur Firefox und surfe ganz normal im Web, und so etwas passiert fast nie. Viel seltener als einmal im Monat, eher vielleicht einmal in drei Monaten
  • Ist das vielleicht regional? Bei mir kommt das sehr selten vor. Einige Google-Websites, die ich regelmäßig nutze, funktionieren in Firefox allerdings schlechter als in Chrome
  • Unter Firefox hatte ich auf Mac und Linux das Problem, dass manche Checkboxen überhaupt nicht sichtbar waren
    Letzten Monat beim Check-in für einen internationalen Flug von American Airlines wurden in Firefox die nötigen Checkboxen nicht angezeigt, sodass ich den Check-in-Prozess nicht abschließen konnte; erst als ich bemerkte, dass sie in Chrome sichtbar waren, kam ich weiter
  • Wenn ich solchen Websites begegne, macht mich das wütend. Vor allem gibt es im Jahr 2023 keine Entschuldigung mehr dafür
    Auf den obskureren Seiten der Vanguard-Website ist mir begegnet, dass sie mit Konsolenfehlern kaputtgingen, während sie nach dem Wechsel zu Chrome funktionierten
  • Ja. Das erinnert mich an Gerüchte oder Tatsachen über Open-Source-Sabotage, die Firefox behindert
    Ich sehe oft Seiten, die früher in Firefox gut funktioniert haben und jetzt nicht mehr, und manchmal muss ich einen anderen Browser öffnen. Ich hoffe wirklich, dass das nicht der Fall ist. Standardmäßig nutze ich Firefox.

• Es überrascht, dass element() in Firefox seit 2011 zusammen mit -moz- vollständig unterstützt wird, während andere Browser offenbar nicht einmal eine Teilunterstützung haben https://caniuse.com/css-element-function
  Wenn es Cross-Browser-Unterstützung gäbe, fielen mir dafür nicht nur Minimap, sondern noch einige andere starke Anwendungsfälle ein. Falls jemand Kontakt zum Chrome- oder WebKit-Team hat, würde mich der Grund interessieren. Liegt es an mangelndem Interesse, ist es schwer, das mit guter Performance zu implementieren, oder gibt es heikle Sicherheitsprobleme?

  • In Chromium-basierten Browsern gibt es -webkit-box-reflect, das einen Teil dessen erledigt, was element() macht https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box...
    Konkret verarbeitet es die Spiegelung von Elementen. Meiner Meinung nach ist genau diese Spiegelung auch der wichtigste Anwendungsfall für -moz-element

• Die Minimap ist zwar niedlich, aber der Bildschirmschoner, der sich einschaltet, wenn man einen Tab drei Minuten lang im Leerlauf lässt, ist noch interessanter
  Ich finde es schön, dass es im Web noch immer solche Verspieltheit gibt

• Das wirkt wie eine Funktion, die Websites, die absichtlich grundlegende Browserfunktionen kaputtmachen wie Rechtsklick-Bildspeicherung oder Textauswahl, massiv missbrauchen könnten
  Wenn man die ganze Seite als Hintergrundbild rendert, kann man den Inhalt nicht mehr untersuchen, speichern oder übersetzen. Das ist nur das erste Beispiel, das mir einfällt, und es scheint alle möglichen böswilligen Wege zu geben, Leser mit dieser Funktion zu schikanieren

  • Ich stimme zu, dass es missbraucht werden könnte, aber das genannte Beispiel passt nicht. Die angesprochenen Funktionen lassen sich schon mit sehr wenig CSS oder JS blockieren, dafür braucht man nicht den komplizierten Umweg über ein element-Canvas
    Der Grund, warum die meisten Websites so etwas nicht tun, ist nicht Unfähigkeit, sondern dass sie es tatsächlich nicht wollen, und bei miserablen Websites wandern Leute als ökonomische Strafe zur Konkurrenz ab
    Nur in Bereichen, die kein freier Markt sind, wie Firmen-Intranetportalen oder schlechten Websites von Kommunalverwaltungen, funktioniert dieses Prinzip nicht gut, deshalb tauchen dort nutzerfeindliche Dinge häufiger auf. Zu glauben, man müsse Website-Betreiber absichtlich einschränken, damit Websites besser werden, ist im Allgemeinen ein Irrtum; tatsächlich ist eher das Gegenteil richtig

• Beeindruckend, wie gut die Minimap bei langen Texten funktioniert. Ich habe zufällig auf https://www.stefanjudis.com/notes/should-responsive-images-w... geklickt, und die Minimap erschien sofort und wurde sogar bei Aktionen wie Textauswahl synchron aktualisiert, was sich fast ein bisschen magisch anfühlt
  Ein wenig schade ist, dass man nicht wie in Sublime Text über die Minimap scrollen kann, aber aus Sicht des Website-Autors dürfte das schwieriger umzusetzen sein. Trotzdem ist es sehr cool, dass so etwas im Web möglich ist, und ich frage mich, wie viel Arbeit nötig wäre, um diese komplexe CSS-Funktion auch in Chrome oder Safari zu unterstützen

  • Merkwürdigerweise ist es im Original gut sichtbar, in diesem Artikel aber nicht. Vielleicht liegt es an einer Erweiterung?

• Wegen einer seltsamen Inkompatibilität zwischen GPU und der Videodekodierung in Chrome nutze ich seit dem letzten Jahr Firefox
  Es gab Frame-Drops und die YouTube-Qualität wurde reduziert. Abgesehen davon, dass es in Firefox keinen wirklich guten Web-Übersetzer gibt, hatte ich keine größeren Probleme. -moz-element sieht gut aus und wäre auch in anderen Browsern wünschenswert

  • Ich benutze Firefox weiter, seit Opera praktisch vorbei ist, habe aber in den letzten 3 bis 6 Monaten wirklich versucht, intensiv Vivaldi zu nutzen
    Der Hauptgrund ist, dass es standardmäßig eine portable Version bietet, die das Profil allein anhand des Ordners findet, was für Synchronisation sehr praktisch ist. Aber es ist zu langsam. Selbst wenn man Mail und Feeds abschaltet, die stark auf die CPU gehen, wird es nicht schnell, und als ich zu Firefox zurückkehrte und aufgeräumt hatte, wirkte es so schlank, dass ich dachte, drei Profile normal, dev und media plus Lesezeichen für den Rest seien die bessere Lösung
    Die UI-Optionen und Konfigurierbarkeit von Vivaldi sind großartig, aber mit Tree Style Tabs, einigen Add-ons und sogar UI-CSS-Hacks bin ich wieder bei Firefox als Hauptbrowser gelandet und tue so, als wäre nichts gewesen
    Allerdings wünschte ich, Firefox würde kompilierte WebGL-Shader cachen. In diesem Punkt ist Chrome haushoch überlegen. Vielleicht kann man das per Einstellung anpassen, ich habe es aber nicht geprüft, und im Auslieferungszustand ist es so, dass Chrome beim Neuladen shaderlastiger Seiten selbst auf Mobilgeräten fast sofort fertig ist, während Firefox je nach Shader lange brauchen kann

• Es wäre eigentlich ganz schön, wenn wir statt „funktioniert am besten in Chrome/Edge“ nun anfangen würden, funktioniert am besten in Firefox zu sehen