Saudações! ?

Se você descobriu esta página, você faz parte dos poucos usuários do Firefox para desktop por aí (a participação de mercado é de apenas 4% agora) e se perguntou como os minimapas dos meus posts do blog são feitos.

Se você não está usando o Firefox, é assim que o minimapa se parece.

O Firefox é o único navegador que suporta a função CSS element() (com um prefixo de fornecedor, mas ei ?‍♂️). A função permite que você exiba imagens de elementos HTML arbitrários em sua página! E a melhor parte é: é ao vivo! Tente selecionar algum texto ou rolar para ver as imagens carregadas preguiçosamente entrando em ação. É mágico!

O CSS para definir outro elemento HTML como imagem de fundo é o seguinte:

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

Também há algum JavaScript para mover a caixa de visualização atual do minimapa, mas a linha de CSS é responsável por pintar outro nó DOM. Use -moz-element e chame isso de um dia!

E com isso, continue arrasando (e usando o Firefox)!