Estilizando Texto com a API CSS Custom Highlight

A API CSS Custom Highlight resolve um problema fundamental: como destacar intervalos de texto programaticamente sem sobrecarregar o DOM com elementos wrapper. Seja construindo interfaces de pesquisa, editores de texto ou aplicações educacionais, esta API oferece uma abordagem mais limpa e performática do que os métodos tradicionais baseados em <mark> ou spans.

O que Torna a API CSS Custom Highlight Diferente

O destaque tradicional de texto requer modificar a estrutura do DOM. Usar elementos <mark> ou spans significa inserir nós, disparar recálculos de layout e gerenciar HTML complexo quando os destaques abrangem múltiplos elementos. A API CSS Custom Highlight elimina esses problemas trabalhando com ranges JavaScript e o pseudo-elemento ::highlight, mantendo seu DOM intacto.

A API consiste em três componentes principais:

• Objetos Range que definem os limites do texto
• Objetos Highlight que agrupam ranges
• Registro CSS.highlights que conecta destaques aos estilos

Criando e Estilizando Intervalos de Texto

Construindo Seu Primeiro Destaque

Comece criando um objeto Range para definir qual texto destacar:

const range = new Range();
const textNode = document.querySelector('p').firstChild;
range.setStart(textNode, 0);
range.setEnd(textNode, 20);

Em seguida, crie um objeto Highlight e registre-o:

const highlight = new Highlight(range);
CSS.highlights.set('my-highlight', highlight);

Finalmente, estilize-o com o pseudo-elemento ::highlight:

::highlight(my-highlight) {
  background-color: yellow;
  color: black;
}

Implementando Destaque de Resultados de Pesquisa

Aqui está um exemplo prático para destacar resultados de pesquisa em seu documento:

function highlightSearchResults(searchTerm) {
  // Limpar destaques existentes
  CSS.highlights.delete('search-results');
  
  const walker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT
  );
  
  const ranges = [];
  let node;
  
  while (node = walker.nextNode()) {
    const text = node.textContent;
    const regex = new RegExp(searchTerm, 'gi');
    let match;
    
    while (match = regex.exec(text)) {
      const range = new Range();
      range.setStart(node, match.index);
      range.setEnd(node, match.index + searchTerm.length);
      ranges.push(range);
    }
  }
  
  if (ranges.length > 0) {
    const searchHighlight = new Highlight(...ranges);
    CSS.highlights.set('search-results', searchHighlight);
  }
}

Padrões Avançados: Destaques Multi-Range

O verdadeiro poder emerge ao trabalhar com múltiplos intervalos de texto não contíguos. Um único objeto Highlight pode conter múltiplos objetos Range:

// Destacar múltiplos parágrafos separados
const range1 = new Range();
range1.selectNodeContents(document.querySelector('#intro'));

const range2 = new Range();
range2.selectNodeContents(document.querySelector('#conclusion'));

const highlight = new Highlight(range1, range2);
CSS.highlights.set('important-sections', highlight);

Você também pode gerenciar múltiplos grupos de destaque simultaneamente:

// Diferentes tipos de destaque com estilos distintos
CSS.highlights.set('errors', new Highlight(...errorRanges));
CSS.highlights.set('warnings', new Highlight(...warningRanges));
CSS.highlights.set('info', new Highlight(...infoRanges));

::highlight(errors) {
  background-color: #fee;
  text-decoration: wavy underline red;
}

::highlight(warnings) {
  background-color: #ffa;
}

::highlight(info) {
  background-color: #e6f3ff;
}

Benefícios de Performance e Suporte dos Navegadores

A API CSS Custom Highlight se destaca em cenários críticos de performance. Diferentemente da manipulação do DOM, os destaques não disparam recálculos de layout ou criam sobrecarga de memória com elementos adicionais. O motor de renderização do navegador lida com destaques na camada de pintura, tornando as atualizações notavelmente rápidas.

A partir de 2025, Chrome, Edge e Safari suportam a API, com o suporte do Firefox em desenvolvimento. Para navegadores mais antigos, implemente um fallback com detecção de recurso:

if ('CSS' in window && 'highlights' in CSS) {
  // Usar API Custom Highlight
  const highlight = new Highlight(range);
  CSS.highlights.set('fallback-safe', highlight);
} else {
  // Fallback para abordagem tradicional
  const span = document.createElement('span');
  span.className = 'highlight';
  range.surroundContents(span);
}

Dicas Práticas de Implementação

Ao implementar destaque de texto em produção:

1. Limpe destaques não utilizados para prevenir vazamentos de memória:

   CSS.highlights.delete('old-highlight');

2. Gerencie conteúdo dinâmico atualizando ranges quando o DOM muda:

   highlight.add(newRange);
   highlight.delete(oldRange);

3. Use nomes significativos para destaques que descrevam seu propósito (ex: ‘search-results’, ‘spell-check’, ‘user-annotations’)

Conclusão

A API CSS Custom Highlight transforma como abordamos o destaque de texto na web. Ao separar a lógica de destaque da estrutura do DOM, ela oferece melhor performance, código mais limpo e mais flexibilidade do que métodos tradicionais. Comece a experimentar com intervalos de texto destacados em seu próximo projeto—seus usuários (e seu DOM) agradecerão.

Perguntas Frequentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..