Minimap réservée à Firefox (2021)

• La minimap du blog, visible uniquement pour les utilisateurs de Firefox sur desktop, est un exemple d’expérimentation de fonctionnalités CSS spécifiques au navigateur malgré la faible part de marché de Firefox, de 4 %
• L’élément clé est la fonction CSS element(), prise en charge uniquement par Firefox, et l’implémentation réelle utilise -moz-element() avec un préfixe vendeur
• Cette fonction permet d’afficher comme une image n’importe quel élément HTML tout en reflétant en temps réel la sélection de texte, le défilement et même les changements liés au chargement différé des images
• L’arrière-plan de la minimap est dessiné à partir du nœud DOM #main via une seule ligne de CSS utilisant background, tandis que le déplacement de la boîte correspondant au viewport actuel s’appuie aussi sur JavaScript
• En exploitant une fonctionnalité propre à Firefox, il est possible de réutiliser une partie de la page comme arrière-plan de minimap sans rendu séparé sur canvas

---

Minimap basée sur element() réservée à Firefox

• La minimap des articles de blog est une fonctionnalité visible pour les utilisateurs de Firefox sur desktop, et la part de marché de Firefox est mentionnée comme étant actuellement de 4 %
• Firefox est le seul navigateur à prendre en charge la fonction CSS element(), et son utilisation réelle nécessite un préfixe vendeur
• La fonction element() permet d’afficher comme une image n’importe quel élément HTML de la page
  • L’élément affiché n’est pas une capture statique, mais fonctionne comme une image en direct
  • Elle reflète aussi les changements comme la sélection de texte ou l’apparition d’images à chargement différé pendant le défilement

Méthode d’implémentation

• Le CSS qui définit un autre élément HTML comme image d’arrière-plan prend la forme suivante

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

• -moz-element(#main) sert à dessiner le nœud DOM #main comme image d’arrière-plan de la minimap
• JavaScript est aussi utilisé pour déplacer la boîte représentant le viewport actuel dans la minimap, mais le cœur du mécanisme qui dessine un autre nœud DOM tient en une seule ligne de CSS
• Dans Firefox, -moz-element permet d’afficher une partie de la page sous forme de minimap

[GN⁺]

Commentaires sur Hacker News

• Il y a 10 ans, j’ai créé une petite bibliothèque JS, un peu gadget, qui pliait des éléments DOM comme du papier : https://oridomi.com. J’espérais qu’au lieu de dupliquer péniblement les nœuds à chaque pliage, on finirait par pouvoir utiliser element()
  Dix ans plus tard, cette fonctionnalité CSS de niche n’a toujours pas été adoptée par les autres navigateurs, et la spécification des filtres personnalisés CSS de la même époque, que je pensais utiliser bientôt, n’a toujours pas trouvé de traction

  • Si je me souviens bien, les fabricants de navigateurs ont jugé que la spécification des filtres personnalisés CSS était trop difficile à implémenter de manière sûre
    D’un côté, je comprends qu’on abandonne une fonctionnalité si on ne peut pas la rendre sûre, mais de l’autre, je voulais vraiment les filtres personnalisés CSS et je repense encore souvent à ce qu’on aurait pu faire avec
    https://lists.webkit.org/pipermail/webkit-dev/2014-January/0...

• Quand j’utilise un éditeur avec une minimap, la première chose que je fais, c’est de la désactiver
  En programmation, c’est quasiment la fonctionnalité la moins utile, et sur les sites web ça me semble tout aussi peu utile. Le contenu est trop petit pour repérer facilement où l’on va, et que la page soit courte ou longue, le gain ne justifie ni la perte d’espace à l’écran ni la distraction ; pour naviguer dans une page, un bon index avec des titres explicites ou une fonction de recherche est bien meilleur
  Les minimaps peuvent être intéressantes pour de grandes images ou des cartes, donc pour des objets intrinsèquement visuels ; une fois zoomé, il est utile de voir où l’on se situe dans l’ensemble. C’est une fonctionnalité futuriste sympa, mais cette implémentation ne me paraît pas très convaincante

  • Moi, je la laisse activée. Quand on fait défiler avec un dispositif de pointage comme une souris ou un trackpad, elle agit comme une barre de défilement plus grande
    Les systèmes d’exploitation actuels essaient de cacher les barres de défilement ou de les rendre aussi petites que possible, et la minimap résout ce problème tout en montrant un peu la forme visuelle du contenu du fichier. On ne peut pas lire le texte, mais sur un fichier sur lequel on a longtemps travaillé, on sait exactement ce qu’on regarde
  • J’ai l’usage exactement inverse. Comme je travaille souvent sur de longs fichiers, j’utilise beaucoup la minimap comme une barre de défilement bien meilleure
    Je la regarde rarement directement, mais comme elle reste dans mon champ de vision, je la balaie souvent inconsciemment. Ce genre de fonctionnalité n’est clairement pas fait pour tout le monde, mais parce qu’on ne l’aime pas, la considérer comme inutile serait une erreur
  • Le but n’est pas de lire les petits caractères, mais de voir la forme du code
    Par exemple, VSCode met bien en évidence les erreurs en rouge dans la minimap, ce qui permet d’aller facilement à leur emplacement
  • Les minimaps peuvent aussi être utiles pour améliorer la fonction d’aperçu d’une barre de défilement classique
    Une barre de défilement donne une idée de la longueur de la page et aide à décider s’il faut continuer la lecture, mais une minimap aide à distinguer « un court article suivi de plusieurs pages de commentaires qu’on peut ignorer » de « un article déjà beaucoup trop long à lire »
  • J’aime assez les minimaps. Elles ne doivent pas être obligatoires, et je comprends parfaitement pourquoi on voudrait les désactiver. Elles prennent beaucoup de place et peuvent être assez gênantes pour ceux qui affichent souvent plusieurs vues du même fichier
    Cela dit, je pense au code de manière visuelle et spatiale et j’ai tendance à ne pas diviser les fichiers avant d’y être obligé, donc voir la « forme » du fichier m’aide à me déplacer rapidement. C’est particulièrement vrai quand le fichier est découpé en sections bien nettes
    Je suis aussi d’accord pour les grandes images ou les cartes. La plupart des éditeurs d’images ont ce genre de vue de fenêtre, et c’est très utile quand on travaille dans le détail

• Je vois l’utilité, mais c’est assez wild. Quand on sélectionne du texte, cela se met à jour en temps réel, et ça ressemble presque à un viewport séparé vers un contenu quasiment identique
  Je réfléchis encore aux cas d’usage et aux implications, mais on pourrait aussi le faire fonctionner sur des éléments cachés avec des astuces offscreen ou overflow:hidden. Cependant, à ma connaissance, il n’existe toujours pas de moyen de transformer cet élément en image sans bibliothèque, sans doute pour des raisons de confidentialité
  La page MDN est assez courte, donc j’ai beaucoup de questions. On doit pouvoir appliquer directement des filtres et des distorsions CSS à l’élément, mais le fait que cela soit traité comme un arrière-plan ouvre-t-il de nouvelles possibilités ? Ça existe depuis longtemps et pourtant c’est la première fois que j’en entends parler ; je ne savais pas que ce genre de fonctionnalité était candidat en CSS. Si on cible uniquement Firefox et qu’on ne se soucie pas de Chrome, je me demande quels usages cela peut avoir au-delà de la simple duplication de viewport

  • Il pourrait y avoir pas mal de cas d’usage sympas : miroirs, loupes, maintien visible d’une partie de page hors écran, etc.
    Par exemple, on pourrait s’en servir pour l’édition, et il y a sûrement beaucoup d’autres cas d’usage auxquels je n’ai pas pensé. Ce ne sont pas des fonctionnalités fondamentalement indispensables, mais elles ont chacune leur côté sympa

• Je tombe tous les jours sur des sites qui ne fonctionnent que dans Chrome. Il est temps de contre-attaquer :)

  • Je n’utilise que Firefox et je navigue sur le web de façon assez ordinaire, et ça m’arrive rarement. Bien moins d’une fois par mois, sans doute plutôt une fois tous les trois mois
  • C’est peut-être un phénomène régional ? Chez moi, c’est très rare. En revanche, certains sites de Google que j’utilise régulièrement fonctionnent moins bien dans Firefox que dans Chrome
  • Sur Firefox, à la fois sur Mac et Linux, j’ai déjà eu un problème où certaines cases à cocher ne s’affichaient tout simplement pas
    Le mois dernier, en faisant l’enregistrement pour un vol international d’American Airlines, les cases à cocher nécessaires n’apparaissaient pas dans Firefox, ce qui m’empêchait de terminer la procédure ; je n’ai pu continuer qu’après avoir découvert qu’elles s’affichaient dans Chrome
  • Oui, tomber sur ce genre de site m’agace. Surtout qu’en 2023, il n’y a aucune excuse
    J’ai déjà vu des pages plus obscures du site de Vanguard se casser avec des erreurs dans la console, alors qu’en passant sur Chrome tout fonctionnait
  • Oui. Ça me rappelle des rumeurs, ou peut-être des faits, sur le sabotage open source visant à gêner Firefox
    Je vois souvent des pages qui fonctionnaient bien dans Firefox et qui ne marchent plus maintenant, et il m’arrive d’ouvrir un autre navigateur. J’espère vraiment que ce n’est pas ça. Par défaut, j’utilise Firefox.

• Il est surprenant que element() soit entièrement pris en charge dans Firefox avec le préfixe -moz- depuis 2011, alors qu’aucun autre navigateur ne semble même le prendre partiellement en charge https://caniuse.com/css-element-function
  S’il y avait eu une prise en charge inter-navigateurs, on pourrait imaginer, au-delà de la minimap, plusieurs cas d’usage puissants. S’il y a ici quelqu’un en lien avec l’équipe Chrome ou WebKit, j’aimerais bien savoir pourquoi. Est-ce un manque d’intérêt, une implémentation difficile à rendre performante, ou des problèmes de sécurité délicats ?

  • Les navigateurs basés sur Chromium ont -webkit-box-reflect, qui couvre une partie de ce que fait element() https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box...
    Plus précisément, il gère le reflet d’un élément. Personnellement, je pense que le principal cas d’usage de -moz-element, c’est justement ce reflet

• La minimap est mignonne, mais le screensaver qui s’active quand on laisse un onglet inactif pendant 3 minutes est encore plus amusant
  J’aime qu’il reste encore ce genre de fantaisie sur le Web

• Ça ressemble à une fonctionnalité que des sites qui cassent volontairement des fonctions de base du navigateur comme l’enregistrement d’images par clic droit ou la sélection de texte pourraient gravement détourner
  Si toute la page est rendue comme image de fond, on ne peut plus inspecter, enregistrer ou traduire le contenu. Ce n’est qu’un premier exemple qui me vient à l’esprit, et j’ai l’impression qu’il y aurait toutes sortes de façons malveillantes d’embêter les lecteurs avec cette fonction

  • Je suis d’accord sur le fait que cela semble pouvoir être détourné, mais l’exemple donné n’est pas le bon. Les fonctions mentionnées peuvent déjà être bloquées avec très peu de CSS ou de JS, donc pas besoin de passer par la complexité d’un canvas element
    Si la plupart des sites ne le font pas, ce n’est pas par incapacité, mais parce qu’ils n’en ont tout simplement pas l’intention, et les sites médiocres subissent une sanction économique quand les gens partent chez la concurrence
    En revanche, dans les domaines qui n’obéissent pas au libre marché, comme les portails intranet d’entreprise ou les mauvais sites d’administrations locales, ce principe fonctionne mal, donc on y voit plus souvent des choses hostiles à l’utilisateur. Penser qu’il faut contraindre délibérément les exploitants de sites pour améliorer la qualité du Web est, en général, une erreur ; en réalité, c’est plutôt l’inverse

• Je suis impressionné par la qualité du fonctionnement de la minimap sur de longs articles. J’ai cliqué un peu au hasard et je suis tombé sur https://www.stefanjudis.com/notes/should-responsive-images-w... ; la minimap apparaît immédiatement et se met à jour de façon synchrone même lors d’actions comme la sélection de texte, ce qui donne un petit côté magique
  C’est un peu dommage qu’on ne puisse pas la manipuler pour faire défiler la page comme dans Sublime Text, mais du point de vue de l’auteur du site, cela doit être plus difficile à implémenter. Malgré tout, c’est vraiment génial de pouvoir faire ça sur le Web, et je me demande combien de travail il faudrait pour que cette fonctionnalité CSS complexe soit prise en charge dans Chrome ou Safari

  • Étrangement, ça se voit bien dans l’article original, mais pas dans ce post-ci. C’est peut-être à cause d’une extension ?

• À cause d’une étrange incompatibilité entre le GPU et le décodage vidéo de Chrome, j’utilise Firefox depuis un an
  J’avais des pertes d’images et la qualité YouTube baissait. À part le fait qu’il n’existe pas vraiment de bon traducteur Web sur Firefox, je n’y vois pas de gros problème. -moz-element a l’air bien, et j’aimerais qu’il arrive aussi dans les autres navigateurs

  • J’utilise Firefox depuis qu’Opera est en pratique terminé, mais ces 3 à 6 derniers mois, j’ai vraiment essayé sérieusement d’utiliser Vivaldi
    La raison principale, c’est qu’il fournit par défaut une version portable qui retrouve le profil simplement à partir du dossier, ce qui est très pratique pour la synchronisation. Mais c’est beaucoup trop lent. Même en désactivant le mail et les flux RSS qui dévorent le CPU, je n’ai pas réussi à le rendre rapide, et en revenant sur Firefox pour faire un peu de ménage, je l’ai trouvé tellement plus réactif que je me suis dit qu’il valait mieux gérer le reste avec 3 profils — normal, dev, media — et des marque-pages
    Les options d’interface et la configurabilité de Vivaldi sont excellentes, mais avec Tree Style Tabs, quelques extensions et même des hacks CSS sur l’UI, j’ai fini par remettre Firefox comme navigateur principal, comme si de rien n’était
    Cela dit, j’aimerais que Firefox mette en cache les shaders WebGL compilés. Sur ce point précis, Chrome l’écrase. C’est peut-être réglable dans les paramètres, mais je n’ai pas vérifié ; en l’état, quand on recharge une page avec beaucoup de shaders, Chrome finit presque instantanément, même sur mobile, tandis que Firefox peut prendre longtemps selon les shaders

• Ce ne serait pas plus mal qu’on commence à voir « fonctionne mieux dans Firefox » à la place de « fonctionne mieux dans Chrome/Edge »