Minimapa exclusivo para Firefox (2021)

• El minimapa del blog, visible solo para usuarios de Firefox en escritorio, es un caso de prueba de una función CSS exclusiva del navegador, incluso con la baja cuota de mercado de Firefox de 4%
• La clave es la función CSS element(), compatible solo con Firefox; en la implementación real se usa -moz-element() con prefijo del proveedor
• Esta función permite mostrar cualquier elemento HTML como si fuera una imagen, mientras sigue reflejando en tiempo real la selección de texto, el desplazamiento y hasta los cambios de imágenes con carga diferida
• El fondo del minimapa se dibuja con una sola línea de CSS que usa el nodo DOM #main como background, y JavaScript se usa junto con esto para mover el cuadro del viewport actual
• Al aprovechar una función exclusiva de Firefox, es posible reutilizar parte de la página como fondo del minimapa sin un renderizado aparte en canvas

---

Minimapa basado en element() exclusivo de Firefox

• El minimapa de la entrada del blog es una función visible para usuarios de Firefox en escritorio, y se menciona que la cuota de mercado de Firefox es actualmente de 4%
• Firefox es el único navegador compatible con la función CSS element(), y en el uso real requiere prefijo del proveedor
• La función element() permite mostrar cualquier elemento HTML de la página como si fuera una imagen
  • El elemento mostrado no es una captura estática, sino que funciona como una imagen en vivo
  • También refleja cambios como la selección de texto o la aparición de imágenes con carga diferida durante el desplazamiento

Forma de implementación

• El CSS que define otro elemento HTML como imagen de fondo tiene esta forma

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

• -moz-element(#main) cumple la función de dibujar el nodo DOM #main como imagen de fondo del minimapa
• Para mover el cuadro del viewport actual dentro del minimapa también se usa JavaScript, pero la parte central de dibujar otro nodo DOM se resuelve con una sola línea de CSS
• En Firefox, -moz-element permite mostrar parte de la página como un minimapa

[GN⁺]

Comentarios en Hacker News

• Hace 10 años hice una librería JS medio de juguete para doblar elementos del DOM como si fueran papel, https://oridomi.com, y esperaba que se terminara usando element() en vez de duplicar nodos de forma aburrida cada vez que se doblaban
  10 años después, esta función de CSS tan de nicho todavía no ha sido adoptada por otros navegadores, y la especificación de CSS Custom Filters de esa misma época, que pensé que pronto se usaría, tampoco ha logrado ganar tracción

  • Según entiendo, los fabricantes de navegadores vieron la especificación de CSS Custom Filters y concluyeron que era demasiado difícil implementarla de forma segura
    Por un lado, entiendo abandonar una función si no se puede hacer segura, pero por otro lado realmente quería CSS Custom Filters y todavía pienso seguido en cosas que se habrían podido hacer con eso
    https://lists.webkit.org/pipermail/webkit-dev/2014-January/0...

• Cuando uso un editor con minimapa, lo primero que hago es desactivarlo
  En programación es casi la función menos útil de todas, y en sitios web se ve igual de poco útil. El contenido es demasiado pequeño como para saber con facilidad adónde va uno, y tanto en páginas cortas como largas no aporta lo suficiente como para justificar la pérdida de espacio en pantalla o la distracción; para navegar una página, un índice bien hecho con títulos descriptivos o una función de búsqueda es muchísimo mejor
  Donde un minimapa sí puede estar bueno es en objetivos inherentemente visuales, como imágenes grandes o mapas, donde al hacer zoom sirve para ver en qué parte del conjunto estás. Es una función futurista interesante, pero esta implementación no se ve muy lograda

  • Yo lo dejo activado. Al desplazarte con un dispositivo apuntador como mouse o trackpad, funciona como una barra de desplazamiento más grande
    Los sistemas operativos modernos intentan ocultar las barras de desplazamiento o hacerlas lo más pequeñas posible, y el minimapa resuelve ese problema mientras además muestra un poco de la forma visual del contenido del archivo. No puedes leer el texto, pero si llevas mucho tiempo trabajando en el archivo, sabes exactamente qué estás viendo
  • Yo lo uso justo al revés. Como trato seguido con archivos largos, uso mucho el minimapa como una barra de desplazamiento mucho mejor
    Rara vez lo miro de frente, pero está dentro del campo visual y lo escaneo seguido de manera inconsciente. Este tipo de función claramente no es para todo el mundo, pero asumir que no sirve solo porque no te gusta es un error
  • No se trata de intentar leer letras pequeñas, sino de ver la forma del código
    Por ejemplo, VSCode resalta los errores en rojo de forma muy visible en el minimapa, así que moverse hasta esa ubicación se vuelve más fácil
  • El minimapa también puede ser bueno para mejorar la función de vista previa de la barra de desplazamiento clásica
    La barra de desplazamiento te deja ver qué tan larga es una página para decidir si seguir leyendo, pero el minimapa ayuda a distinguir entre “un texto corto con varias páginas de comentarios que se pueden ignorar después” y “un texto demasiado largo para leer desde el inicio”
  • Me gustan bastante los minimapas. No deberían ser obligatorios, y entiendo perfectamente por qué alguien querría apagarlos. Ocupan mucho espacio y pueden ser bastante molestos para quienes suelen dividir la vista del archivo con frecuencia
    Pero yo pienso el código de manera visual y espacial, y tampoco suelo dividir los archivos hasta que hace falta, así que me ayuda a ver la “forma” del archivo y moverme rápido. Sobre todo cuando el archivo está dividido en secciones claras
    También coincido con lo de las imágenes grandes o mapas. La mayoría de los editores de imágenes tienen una función de viewport así, y es bastante útil cuando estás trabajando en detalles

• Le veo utilidad, pero es bastante wild. Si seleccionas texto, se actualiza en tiempo real y parece como un viewport separado hacia contenido casi idéntico
  Estoy pensando en casos de uso e implicaciones, y se podría hacer que también funcione con elementos ocultos usando trucos de offscreen o overflow:hidden. Pero, hasta donde sé, todavía no hay una forma de convertir ese elemento en imagen sin una librería, probablemente por motivos de privacidad
  La página de MDN es bastante corta, así que me deja muchas preguntas. Se podrían aplicar filtros y distorsiones CSS directamente sobre el elemento, pero ¿el hecho de que esto se trate como un fondo abre nuevas posibilidades? Aunque existe desde hace mucho, es la primera vez que oigo hablar de esto, y no sabía que una función así estuviera candidateada para CSS. Si uno apunta solo a Firefox y no se preocupa por Chrome, me pregunto qué usos podría tener más allá de duplicar el viewport

  • Podría haber bastantes usos interesantes, como espejos, lupas o mantener siempre visible una parte de la página que está fuera de pantalla
    Por ejemplo, se podría usar para edición, y seguro hay muchos casos de uso que se me escapan. En el fondo no son funciones estrictamente necesarias, pero cada una tiene su propio encanto

• Todos los días me topo con sitios que solo funcionan en Chrome. Ya es hora de contraatacar :)

  • Yo uso solo Firefox y navego la web de forma bastante normal, y casi nunca me pasa eso. Muchísimo menos de una vez al mes; quizá una vez cada 3 meses
  • ¿Será algo regional? A mí me pasa muy rara vez. Aunque algunos sitios de Google que uso con regularidad sí funcionan peor en Firefox que en Chrome
  • En Firefox, tanto en Mac como en Linux, tuve un problema donde algunas casillas de verificación directamente no aparecían
    El mes pasado, al hacer el check-in de un vuelo internacional de American Airlines, en Firefox no se mostraban unas casillas obligatorias y no podía terminar el proceso; solo pude seguir cuando descubrí que en Chrome sí aparecían
  • Cuando me encuentro con sitios así, me enojo. Sobre todo porque en 2023 no hay excusa
    Me pasó con algunas páginas más oscuras del sitio de Vanguard: se rompían con errores en la consola, y al cambiar a Chrome sí funcionaban
  • Sí. Me recuerda rumores o hechos sobre sabotaje de código abierto para perjudicar a Firefox
    Veo muchos casos donde páginas que antes funcionaban bien en Firefox ahora ya no, y a veces tengo que abrir otro navegador. De verdad espero que no sea eso. Uso Firefox por defecto.

• Sorprende que element() haya estado totalmente soportado en Firefox desde 2011 junto con -moz-, mientras que otros navegadores parecen no tener ni siquiera soporte parcial https://caniuse.com/css-element-function
  Si hubiera soporte entre navegadores, se me ocurren varios casos de uso potentes además del minimapa. Si alguien tiene contacto con el equipo de Chrome o WebKit, me gustaría saber por qué: si es falta de interés, si es difícil implementarlo con buen rendimiento, o si hay problemas de seguridad complicados

  • Los navegadores basados en Chromium tienen -webkit-box-reflect, que cubre parte de lo que hace element() https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box...
    En concreto, maneja el reflejo de elementos. Personalmente, creo que el mayor caso de uso de -moz-element es justamente ese reflejo

• El minimapa también está lindo, pero el protector de pantalla que se activa cuando dejas una pestaña inactiva durante 3 minutos me parece más divertido
  Me gusta que la web todavía conserve este tipo de espíritu juguetón

• Esto parece una función que los sitios que rompen deliberadamente funciones básicas del navegador como guardar imágenes con clic derecho o seleccionar texto podrían abusar muchísimo
  Si renderizan la página completa como una imagen de fondo, ya no se podría inspeccionar, guardar ni traducir el contenido. Ese es solo el primer ejemplo que se me ocurrió; seguro hay toda clase de maneras maliciosas de molestar a los lectores con esta función

  • Estoy de acuerdo en que parece algo que podría usarse mal, pero el ejemplo que das no aplica. Esas funciones ya se pueden bloquear con muy poco CSS o JS, así que no hace falta complicarse con un canvas de element
    La razón por la que la mayoría de los sitios no hacen eso no es que no puedan, sino que realmente no quieren hacerlo, y los sitios malos reciben un castigo económico cuando la gente se va con la competencia
    Eso sí, en ámbitos donde no hay libre mercado, como portales de intranet corporativa o pésimos sitios de gobiernos locales, ese principio no funciona tan bien, así que ahí aparecen más cosas hostiles para el usuario. En general, es un error pensar que la calidad de los sitios mejora si se restringe deliberadamente a quienes los operan; en realidad pasa lo contrario

• Impresiona lo bien que funciona el minimapa en textos largos. Hice clic al azar y terminé en https://www.stefanjudis.com/notes/should-responsive-images-w..., y el minimapa apareció de inmediato y se actualiza en sincronía incluso con acciones como seleccionar texto, así que se siente medio mágico
  Es un poco una pena que no se pueda manipular el minimapa para hacer scroll como en Sublime Text, pero supongo que sería más difícil de implementar para quien hace el sitio. Aun así, poder hacer algo así en la web es muy genial, y me da curiosidad cuánto trabajo haría falta para que Chrome o Safari soporten esta función compleja de CSS

  • Curiosamente, en el artículo original sí se ve bien, pero en esta publicación no me aparece. ¿Tal vez sea por alguna extensión?

• He estado usando Firefox durante el último año por una incompatibilidad extraña entre la GPU y la decodificación de video en Chrome
  Tenía caída de frames y bajaba la calidad de YouTube. En Firefox no he sentido grandes problemas, salvo que no hay un traductor web realmente bueno. -moz-element se ve muy bien y ojalá llegue a otros navegadores

  • He seguido usando Firefox desde que Opera prácticamente murió, pero en los últimos 3 a 6 meses intenté muy en serio pasarme a Vivaldi
    La razón principal es que ofrece por defecto una versión portátil que encuentra el perfil solo viendo la carpeta, y eso viene muy bien para sincronizar. Pero es demasiado lento. Ni desactivando Mail y Feeds, que consumen CPU a lo loco, logré que fuera rápido, y cuando volví a Firefox y ordené todo, se sintió tan ágil que pensé que era mejor quedarme con 3 perfiles —normal, dev, media— y resolver el resto con marcadores
    Las opciones de interfaz y la capacidad de configuración de Vivaldi son excelentes, pero sumando Tree Style Tabs, algunos addons y hasta hacks de CSS para la interfaz, terminé otra vez con Firefox como navegador principal, haciendo como si nada hubiera pasado
    Eso sí, ojalá Firefox hiciera caché de los shaders WebGL compilados. En eso Chrome le gana por mucho. Tal vez se pueda ajustar con alguna configuración, pero no lo he revisado, y con la configuración predeterminada, al recargar páginas con muchos shaders, Chrome termina casi al instante incluso en móvil, mientras que Firefox puede tardar bastante según los shaders

• Estaría bien que empezáramos a ver "funciona mejor en Firefox" en lugar de “funciona mejor en Chrome/Edge”