O que é !important #10: HTML-in-Canvas, mapas hexadecimais, otimização de tinta eletrônica e muito mais

Os desenvolvedores têm experimentado o HTML-in-Canvas, um recurso hexagonal de análise de mapas mundiais, um sistema operacional baseado na Web para dispositivos e-ink, substituindo img srcs usando content e muito mais. Isto é O que é !important #10 .

Experimentos de HTML no Canvas

HTML-in-Canvas, uma nova API que nos permite renderizar HTML semântico real em um <canvas> com efeitos visuais, é o assunto da cidade no momento, então vamos começar com isso. Amit Sheen nos mostrou como funciona a API HTML-in-Canvas e também criou algumas demos no HiC Showroom , como este (requer Chrome 146 com o chrome://flags/#canvas-draw-element sinalizador ativado):

Construindo um recurso de análise de mapa mundial hexagonal

Ben Schwarz (nome incrível, mas sem parentesco) falou sobre construir um recurso hexagonal de análise de mapa mundial . Embora seja mais uma retrospectiva do que um passo a passo do desenvolvedor, é uma leitura realmente interessante sobre análises, restrições de design, inspiração, engenharia e, claro, SVG e CSS.

Rekindle — um sistema operacional baseado na web para dispositivos e-ink

Rekindle é basicamente um sistema operacional baseado na web para dispositivos e-ink como Kindle, Kobo e Boox, que geralmente são de baixa potência e com poucos recursos. O Rekindle inclui um número absurdo de recursos e aplicativos e foi projetado em preto e branco, sem animações e, sem dúvida, com muito mais otimizações de tinta eletrônica.

A conclusão não é um tutorial (infelizmente) ou mesmo algum comentário (como na retrospectiva do mapa mundial acima), é que temos um monte de consultas de mídia que seriam tão úteis para dispositivos e-ink se não fosse pelo fato de que eles são fornecidos com navegadores proprietários de baixa potência que não os reconhecem. Consultas de mídia nível 5 pode consultar a capacidade de foco, a precisão dos ponteiros, frequência de atualização de exibição, profundidade de cor, profundidade de bits monocromática, tamanho do índice de cores, faixa dinâmica e muito mais, provavelmente.

Pensamentos? É provável que a otimização da tinta eletrônica surja nos próximos anos ou a baixa demanda por essas consultas de mídia é a razão pela qual um serviço dedicado como o Rekindle precisa existir? É importante notar que os navegadores e muitas das consultas de mídia estão em desenvolvimento ativo, então não sei. Observe este espaço, talvez?

De qualquer forma, adoraria ver um mergulho profundo dos desenvolvedores no Rekindle!

Substituindo img srcs usando content

Jon descobriu que CSS pode ser usado para substituir fontes de imagens, como esta:

<img src="image.png" alt="Alt text">

img {
  content: url(new-image.png) / "New alt text";
}

ATÉ! Quem diria que você poderia alterar o “src” de um #HTML usando #CSS:

img {conteúdo: url(qualquer coisa.png) }

SEM PSEUDOS!

Parece funcionar também em todos os navegadores atuais. Como eu perdi isso?

— Jon ( @scrwd.mastodon.social.ap.brid.gy ) 20 de abril de 2026 às 13h09

É realmente interessante aprender isso sobre a propriedade content , que é Baseline há 11 anos. Experimentei um pouco mais e descobri que esse truque também funciona com a função img {
content: url(new-image.png) / "New alt text";
} :

img {
  content: image-set(
    url("image.png") 1x,
    url("image-2x.png") 2x
  );
}

Portanto, se você estiver trabalhando em um site com contents que não responde e não há como alterar a marcação, escreva a lógica em CSS.

Implementando imagens responsivas com image-set()

Dito isto, se você tem acesso ao HTML, você vai querer servir imagens responsivas usando o img {
content: image-set(
url("image.png") 1x,
url("image-2x.png") 2x
);
} e <img> Atributos HTML. Mat Marquis demonstrou como a nova combinação image-set() substitui pontos de interrupção responsivos para imagens que são carregadas lentamente .

Se você estiver interessado, Amit Sheen também falou sobre construir layouts (não necessariamente imagens) sem pontos de interrupção .

Novos recursos e atualizações da plataforma web

• Firefox 150
  • srcset e todas as outras pseudoclasses baseadas em mídia (sem suporte ao Chrome)
  • sizes (sem suporte para Safari)
  • image-set() (sem suporte para Safari)
  • :muted com suporte de imagem (sem suporte para Chrome/Safari)
  • revert-rule com a sintaxe para duas ou mais cores (sem suporte para Chrome/Safari)
  • sizes=auto (sem suporte para Chrome/Safari)
• Safári TP 242
  • light-dark()
  • Avançado color-mix() (sem suporte para Firefox)

Se você deseja mais conteúdo, aqui estão Wes Bos e Scott Tolinski da Syntax.fm discutindo 10 novas APIs CSS e HTML :

Até a próxima!

O que é! Importante #10: HTML-in-Canvas, mapas hexadecimais, otimização de tinta eletrônica e muito mais originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.