Minimapa exclusivo para Firefox (2021)

• O minimapa do blog visível apenas para usuários do Firefox no desktop é um exemplo de experimento com recursos de CSS específicos do navegador, mesmo com a baixa participação de mercado do Firefox de 4%
• O ponto central é a função CSS element(), suportada apenas pelo Firefox, e na implementação real é usado -moz-element() com prefixo de fornecedor
• Essa função permite exibir qualquer elemento HTML como se fosse uma imagem, ao mesmo tempo refletindo em tempo real seleção de texto, rolagem e até mudanças em imagens com carregamento tardio
• O fundo do minimapa é desenhado a partir do nó DOM #main como background por uma única linha de CSS, enquanto a movimentação da caixa do viewport atual usa JavaScript em conjunto
• Ao aproveitar um recurso exclusivo do Firefox, é possível reutilizar parte da página como fundo do minimapa sem renderização separada em canvas

---

Minimapa baseado em element() exclusivo do Firefox

• O minimapa de posts do blog é um recurso visível para usuários do Firefox no desktop, e a participação de mercado do Firefox é mencionada como 4% atualmente
• O Firefox é o único navegador que oferece suporte à função CSS element(), e o uso real exige prefixo de fornecedor
• A função element() pode exibir qualquer elemento HTML da página como se fosse uma imagem
  • O elemento exibido não é uma captura de tela estática, mas se comporta como uma imagem ao vivo
  • Mudanças como seleção de texto ou o aparecimento de imagens com carregamento tardio durante a rolagem também são refletidas

Forma de implementação

• O CSS que define outro elemento HTML como imagem de fundo tem a seguinte forma

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

• -moz-element(#main) é responsável por desenhar o nó DOM #main como a imagem de fundo do minimapa
• JavaScript também é usado para mover a caixa do viewport atual dentro do minimapa, mas o núcleo que desenha outro nó DOM está em uma única linha de CSS
• No Firefox, é possível usar -moz-element para exibir parte da página como um minimapa

[GN⁺]

Opiniões no Hacker News

• Há 10 anos, criei uma biblioteca JS meio de brinquedo para dobrar elementos do DOM como papel, https://oridomi.com, e esperava poder usar element() em vez de duplicar nós de forma tediosa a cada dobra
  Mesmo 10 anos depois, esse recurso de nicho do CSS não foi adotado por outros navegadores, e eu também achava que a especificação de filtros personalizados de CSS da mesma época logo seria usada, mas ela ainda não ganhou tração

  • Pelo que sei, os fabricantes de navegadores olharam para a especificação de filtros personalizados de CSS e concluíram que era difícil demais implementá-la com segurança
    Por um lado, entendo abandonar um recurso porque não dá para torná-lo seguro; por outro, eu realmente queria filtros personalizados de CSS e ainda penso com frequência nas coisas que poderia ter feito com eles
    https://lists.webkit.org/pipermail/webkit-dev/2014-January/0...

• Quando uso um editor com minimapa, a primeira coisa que faço é desligá-lo
  Em programação, é provavelmente um dos recursos mais inúteis, e em sites parece igualmente inútil. O conteúdo é pequeno demais para entender para onde se está indo e, seja uma página curta ou longa, não há benefício que compense a perda de espaço na tela ou a distração; um índice bem feito com títulos descritivos, ou uma busca, é muito melhor para navegar pela página
  Onde minimapas podem ser legais é em objetos inerentemente visuais, como imagens grandes ou mapas, porque é útil ver em que ponto do todo você está quando dá zoom. É um recurso futurista interessante, mas esta implementação não parece lá muito boa

  • Eu deixo ligado. Ao rolar com um dispositivo apontador, como mouse ou trackpad, ele funciona como uma barra de rolagem maior
    Hoje em dia os sistemas operacionais tentam esconder as barras de rolagem ou deixá-las o menor possível, e o minimapa resolve esse problema ao mesmo tempo em que mostra um pouco da forma visual do conteúdo do arquivo. Não dá para ler o texto, mas, se for um arquivo em que você trabalha há muito tempo, você sabe exatamente o que está olhando
  • Uso exatamente do jeito oposto. Como lido com arquivos longos com frequência, uso muito o minimapa como uma barra de rolagem muito melhor
    Raramente olho diretamente para ele, mas como fica no meu campo de visão, acabo passando os olhos inconscientemente muitas vezes. Esse recurso obviamente não é para todo mundo, mas é um erro considerá-lo inútil só porque você não gosta dele
  • A ideia não é ler letras pequenas, e sim ver a forma do código
    Por exemplo, o VSCode marca erros em vermelho de forma bem visível no minimapa, o que facilita ir até aquele ponto
  • Minimapas também podem ser bons para melhorar o recurso de pré-visualização das barras de rolagem clássicas
    A barra de rolagem informa o tamanho da página e ajuda a decidir se vale continuar lendo, mas o minimapa ajuda a diferenciar “um texto curto seguido por várias páginas de comentários que você pode ignorar” de “um texto longo demais para ler desde o início”
  • Gosto bastante de minimapas. Eles não deveriam ser obrigatórios, e entendo totalmente por que alguém gostaria de desativá-los. Ocupam bastante espaço e podem incomodar bastante quem costuma dividir arquivos para vê-los lado a lado
    Dito isso, penso em código de forma visual e espacial e costumo não dividir arquivos até precisar, então ver a “forma” do arquivo ajuda a navegar rapidamente. Especialmente quando o arquivo é dividido em seções claras
    Também concordo sobre imagens grandes ou mapas. A maioria dos editores de imagem tem esse tipo de recurso de viewport, e ele é bem útil ao trabalhar em detalhes

• Dá para ver o uso, mas é bem wild. Quando você seleciona texto, ele é atualizado em tempo real e parece quase uma viewport separada apontando para o mesmo conteúdo
  Estou pensando nos casos de uso e nas implicações; daria para fazer isso funcionar também com elementos ocultos por truques de offscreen ou overflow:hidden. Mas, até onde sei, ainda não há uma forma de converter esse elemento em imagem sem uma biblioteca, provavelmente por questões de privacidade
  A página da MDN é bem curta, então tenho muitas perguntas. Deve ser possível aplicar filtros CSS e distorções diretamente ao elemento, mas será que o fato de isso ser tratado como um plano de fundo abre novas possibilidades? Isso existe há muito tempo e mesmo assim eu nunca tinha ouvido falar, e não imaginava que algo assim estivesse entre os candidatos do CSS. Se o alvo for apenas Firefox e não houver preocupação com Chrome, fico curioso para saber quantos usos haveria além de duplicar a viewport

  • Pode haver alguns usos legais para isso, como espelhos, lupas, manter visível uma parte da página que está fora da tela etc.
    Por exemplo, pode servir para edição, e provavelmente há muitos casos de uso que estou deixando passar. Não são recursos fundamentalmente indispensáveis, mas cada um tem seu charme

• Todo dia encontro sites que só funcionam no Chrome. Está na hora de contra-atacar :)

  • Uso só Firefox e navego pela web de forma bem comum, e isso quase nunca acontece. Muito menos que uma vez por mês; talvez uma vez a cada três meses
  • Será algo regional? Para mim, acontece muito raramente. Ainda assim, alguns sites do Google que uso regularmente funcionam pior no Firefox do que no Chrome
  • No Firefox, tanto no Mac quanto no Linux, tive um problema em que algumas caixas de seleção simplesmente não apareciam
    No mês passado, ao fazer check-in de um voo internacional da American Airlines, não consegui concluir o processo no Firefox porque as caixas de seleção necessárias não eram exibidas; só consegui prosseguir depois de descobrir que elas apareciam no Chrome
  • Fico irritado quando encontro um site assim. Especialmente porque em 2023 não há desculpa
    Já vi páginas mais obscure do site da Vanguard quebrarem com erros no console, e ao trocar para o Chrome elas funcionavam
  • Sim. Isso me faz lembrar rumores ou fatos antigos sobre sabotagem open source que atrapalhava o Firefox
    Vejo muitos casos em que páginas que funcionavam bem no Firefox agora não funcionam mais, e às vezes preciso abrir outro navegador. Espero muito que não seja esse o caso. Por padrão, uso Firefox

• O fato de element() ser totalmente compatível no Firefox desde 2011 com -moz-, enquanto outros navegadores aparentemente nem têm suporte parcial, é surpreendente https://caniuse.com/css-element-function
  Se houvesse suporte entre navegadores, consigo imaginar vários casos de uso poderosos além de minimapas. Se alguém tiver contato com as equipes do Chrome ou do WebKit, fico curioso sobre o motivo. Gostaria de saber se é falta de interesse, se é difícil implementar com bom desempenho ou se há alguma questão de segurança complicada

  • Navegadores baseados em Chromium têm -webkit-box-reflect, que faz parte do que element() faz https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box...
    Especificamente, ele cuida do reflexo de elementos. Pessoalmente, acho que o maior caso de uso de -moz-element também é justamente esse reflexo

• O minimapa também é bonitinho, mas o protetor de tela que liga depois de deixar a aba idle por 3 minutos é mais divertido
  Gosto de ver que ainda existe esse espírito brincalhão na web

• Isso parece um recurso que seria muito abusado por sites que deliberadamente quebram funções básicas do navegador, como salvar imagem com o botão direito ou selecionar texto
  Se a página inteira for renderizada como uma imagem de fundo, não dá mais para inspecionar, salvar ou traduzir o conteúdo. Esse é só o primeiro exemplo que me veio à cabeça, e imagino que existam todo tipo de maneiras maliciosas de incomodar leitores com essa função

  • Concordo que parece algo que pode ser abusado, mas o exemplo dado não se aplica. As funções mencionadas já podem ser bloqueadas com pouquíssimo CSS ou JS, então não há necessidade de complicar usando um canvas de element
    A razão pela qual a maioria dos sites não faz isso não é falta de capacidade, mas sim porque de fato não tem intenção de fazê-lo; e sites ruins sofrem a punição econômica de ver as pessoas irem para concorrentes
    No entanto, em áreas que não são de livre mercado, como portais de intranet corporativa ou sites ruins de governos locais, esse princípio não funciona tão bem, então coisas hostis ao usuário aparecem com mais frequência. Em geral, é um erro achar que restringir deliberadamente operadores de sites melhora a qualidade dos sites; na prática, o contrário é que é verdade

• É impressionante como o minimapa funciona bem em textos longos. Clicando aleatoriamente, acabei chegando a https://www.stefanjudis.com/notes/should-responsive-images-w..., e o minimapa apareceu imediatamente e até era atualizado de forma síncrona com ações como seleção de texto, o que pareceu meio mágico
  É um pouco decepcionante não poder manipular o minimapa para rolar a página, como no Sublime Text, mas imagino que isso seria mais difícil de implementar do ponto de vista de quem cria o site. Ainda assim, é muito legal poder fazer algo assim na web, e fico curioso sobre quanto trabalho seria necessário para dar suporte a esse recurso complexo de CSS no Chrome ou no Safari

  • Estranhamente, aparece bem no original, mas não aparece neste artigo. Talvez seja por causa de alguma extensão?

• Tenho usado Firefox no último ano por causa de uma incompatibilidade estranha entre minha GPU e a decodificação de vídeo do Chrome
  Havia perda de frames e a qualidade do YouTube caía. No Firefox, fora o fato de não haver um tradutor web realmente bom, não senti grandes problemas. -moz-element parece bom, e seria ótimo vê-lo em outros navegadores

  • Uso Firefox continuamente desde que o Opera praticamente acabou, mas nos últimos 3 a 6 meses tentei muito usar o Vivaldi
    O principal motivo é que ele oferece por padrão uma versão portátil que encontra perfis só olhando para a pasta, o que é ótimo para sincronização. Mas é lento demais. Mesmo desligando o e-mail e os feeds, que consomem CPU sem dó, não consegui deixá-lo rápido; quando voltei ao Firefox e organizei tudo, ele estava tão ágil que achei melhor lidar com o resto usando três perfis, normal, dev e media, além dos favoritos
    As opções de UI e a configurabilidade do Vivaldi são excelentes, mas com Tree Style Tabs, alguns add-ons e até hacks de CSS na UI, voltei a usar o Firefox como navegador principal e estou fingindo que nada aconteceu
    Só gostaria que o Firefox fizesse cache de shaders WebGL compilados. Nesse ponto, o Chrome é disparado melhor. Talvez dê para ajustar isso nas configurações, mas não verifiquei; no estado padrão, ao recarregar páginas com muitos shaders, o Chrome termina quase instantaneamente até no mobile, enquanto o Firefox pode demorar bastante dependendo dos shaders

• Acho que seria bom se agora começássemos a ver funciona melhor no Firefox em vez de “funciona melhor no Chrome/Edge”