Eleve Sua UI: Dominando a API CSS Custom Highlight para Estilizar a Seleção de Texto

Neste exemplo, definimos um nome de highlight personalizado chamado code-highlight. Em seguida, aplicamos este highlight a elementos code. A cor de fundo é definida como azul claro (#ADD8E6), a cor do texto é definida como azul escuro (#00008B) e a espessura da fonte é definida como negrito. Agora, sempre que o texto for selecionado dentro de um elemento code, ele será estilizado com esses estilos personalizados.

Uso Avançado: Direcionando Intervalos de Texto Específicos

A API CSS Custom Highlight também pode ser usada para direcionar intervalos de texto específicos dentro de um elemento. Isso permite um controle ainda mais granular sobre o estilo de seleção de texto.

Exemplo: Destacando Termos de Pesquisa

Imagine que você deseja destacar os termos de pesquisa dentro de um documento. Isso geralmente requer JavaScript em conjunto com a API CSS Highlight.

1. Use JavaScript para Identificar Termos de Pesquisa: Use JavaScript para encontrar todas as ocorrências do termo de pesquisa dentro do documento.
2. Crie Intervalos de Highlight: Use a API Range em JavaScript para criar intervalos para cada ocorrência do termo de pesquisa.
3. Aplique o Highlight: Use o método CSS.highlights.set() para aplicar o highlight aos intervalos criados.

            
// Código JavaScript para destacar termos de pesquisa
function highlightSearchTerms(searchTerm) {
  // Primeiro, defina o highlight personalizado em CSS
  const highlightName = 'search-highlight';
  const ranges = [];

  // Encontre todos os nós de texto
  function findTextNodes(el) {
      let n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
      while(n=walk.nextNode()) a.push(n);
      return a;
  }

  const textNodes = findTextNodes(document.body);

  textNodes.forEach(node => {
    let nodeValue = node.nodeValue;
    let index = nodeValue.indexOf(searchTerm);

    while (index !== -1) {
      const range = document.createRange();
      range.setStart(node, index);
      range.setEnd(node, index + searchTerm.length);
      ranges.push(range);
      index = nodeValue.indexOf(searchTerm, index + searchTerm.length);
    }
  });

  // Aplique os highlights usando CSS.highlights.set()
  if (CSS.highlights && CSS.highlights.set) {
    CSS.highlights.set(highlightName, ranges);
  } else {
    console.warn('A API CSS Custom Highlight não é totalmente suportada neste navegador. Fornecendo fallback');
    // Forneça um fallback para navegadores com suporte limitado (por exemplo, Safari mais antigo)
    ranges.forEach(range => {
      const span = document.createElement('span');
      span.style.backgroundColor = '#FFA07A'; // Salmão Claro
      span.style.color = '#000000'; // Preto
      span.className = 'search-highlight-fallback'; // Adicione uma classe para estilo de fallback
      range.surroundContents(span);
    });
  }
}

// Código CSS para estilizar o highlight de pesquisa
::highlight(search-highlight) {
  background-color: #FFA07A; /* Salmão Claro */
  color: #000000; /* Preto */
}

/* Estilo de fallback para navegadores que não suportam totalmente a API */
.search-highlight-fallback {
 background-color: #FFA07A;
 color: #000000;
}

// Exemplo de uso: destaque o termo "example"
highlightSearchTerms("example");

            

              
                Copy
              
            
          

Este snippet de código demonstra como destacar termos de pesquisa dentro de um documento usando JavaScript e a API CSS Custom Highlight. O código JavaScript identifica os termos de pesquisa, cria intervalos para cada ocorrência e aplica o search-highlight a esses intervalos. O código CSS então estiliza o texto destacado com um fundo salmão claro e texto preto.

Nota Importante: Esta abordagem requer JavaScript e depende da API CSS.highlights. Como o suporte não é universal, um mecanismo de fallback (como envolver o texto com um `span` e estilizar esse `span`) é demonstrado.

Considerações de Acessibilidade

Ao usar a API CSS Custom Highlight, é crucial considerar a acessibilidade para garantir que seu site seja utilizável por todos, incluindo usuários com deficiências.

Dicas para Estilo de Seleção de Texto Acessível:

• Garanta Contraste Suficiente: Mantenha contraste suficiente entre a cor de fundo e texto do texto selecionado para torná-lo legível para usuários com deficiências visuais. As diretrizes WCAG recomendam uma taxa de contraste de pelo menos 4,5:1 para texto normal.
• Evite Depender Apenas da Cor: Não dependa apenas da cor para indicar a seleção de texto. Use pistas visuais adicionais, como sublinhado ou negrito, para tornar a seleção mais aparente.
• Forneça Estilo Alternativo para Modo de Alto Contraste: Usuários que habilitam o modo de alto contraste em seu sistema operacional podem substituir seus estilos personalizados. Forneça estilo alternativo que funcione bem no modo de alto contraste para garantir a legibilidade. Você pode usar consultas de mídia como @media (forced-colors: active) para detectar quando o modo de alto contraste está habilitado.
• Teste com Tecnologias Assistivas: Teste seu site com tecnologias assistivas, como leitores de tela, para garantir que o texto selecionado seja anunciado e compreendido corretamente.

Exemplo: Garantindo Contraste Suficiente

            
::highlight {
  background-color: #000080; /* Azul Marinho */
  color: #FFFFFF; /* Branco */
}

            

              
                Copy
              
            
          

Neste exemplo, escolhemos uma cor de fundo azul marinho e uma cor de texto branco, o que oferece contraste suficiente para usuários com deficiências visuais. Sempre use um verificador de contraste de cores para verificar se suas escolhas de cores atendem aos padrões de acessibilidade. Ferramentas como o Verificador de Contraste da WebAIM podem ser úteis.

Exemplos Práticos e Casos de Uso

A API CSS Custom Highlight oferece uma ampla gama de possibilidades para aprimorar a experiência do usuário. Aqui estão alguns exemplos práticos e casos de uso:

• Destaque de Código: Conforme demonstrado anteriormente, você pode usar a API para destacar snippets de código com estilos personalizados, tornando-os mais atraentes visualmente e mais fáceis de ler.
• Destaque de Termos de Pesquisa: Destaque os termos de pesquisa dentro de um documento para ajudar os usuários a localizar rapidamente as informações que estão procurando.
• Destaque de Erro: Destaque erros ou avisos em formulários ou outras interfaces de usuário para chamar a atenção do usuário para eles.
• Destaque de Citação: Destaque o texto citado em artigos ou artigos acadêmicos para distingui-lo visualmente do conteúdo principal.
• Destaque de Conversa: Em aplicativos de bate-papo, destaque as próprias mensagens do usuário ou mensagens de usuários específicos para torná-las mais fáceis de seguir.
• Gamificação: Destaque palavras ou frases específicas em um jogo para fornecer pistas ou dicas ao jogador.
• Resumo de Texto: Destaque frases ou frases-chave em um documento para fornecer um resumo rápido do conteúdo. Isso geralmente envolve algoritmos complexos para determinar a importância.

Práticas Recomendadas e Dicas

Para aproveitar ao máximo a API CSS Custom Highlight, siga estas práticas recomendadas e dicas:

• Use Nomes de Destaque Descritivos: Escolha nomes de destaque descritivos que indiquem claramente o propósito do destaque. Isso tornará seu código mais legível e fácil de manter. Por exemplo, use code-highlight em vez de highlight-1.
• Mantenha os Estilos Consistentes: Mantenha um estilo consistente em todos os seus destaques para criar uma experiência de usuário coesa. Use um sistema de design ou guia de estilo para garantir a consistência.
• Evite o Uso Excessivo de Destaques: Não use destaques em excesso, pois isso pode ser perturbador e opressor para os usuários. Use-os com moderação e estrategicamente para chamar a atenção para as informações mais importantes.
• Teste em Diferentes Dispositivos e Navegadores: Teste seu site em diferentes dispositivos e navegadores para garantir que seus destaques personalizados sejam exibidos corretamente. Preste atenção especial a dispositivos móveis e navegadores mais antigos.
• Considere o Desempenho: Embora a API CSS Custom Highlight seja geralmente eficiente, fique atento ao número de destaques que você está usando, especialmente em documentos grandes. Muitos destaques podem afetar o desempenho. Se você estiver usando JavaScript para gerenciar destaques, otimize seu código para minimizar o número de manipulações DOM.
• Use Aprimoramento Progressivo: Como o suporte do navegador não é universal, use técnicas de aprimoramento progressivo. Implemente um mecanismo de fallback usando o estilo CSS padrão para garantir que a experiência permaneça utilizável para aqueles em navegadores mais antigos. Considere usar a detecção de recursos (por exemplo, verificar a existência de `CSS.highlights`) para determinar se deve usar a API ou o fallback.

Conclusão

A API CSS Custom Highlight é uma ferramenta poderosa para aprimorar a experiência do usuário e criar seleções de texto mais atraentes visualmente e informativas. Ao dominar esta API, você pode levar seu design de UI para o próximo nível e fornecer aos usuários uma experiência de navegação mais envolvente e acessível. Embora o suporte do navegador ainda esteja evoluindo, entender e experimentar esta API agora o posicionará para criar experiências web de ponta à medida que a adoção cresce. Lembre-se de priorizar a acessibilidade e fornecer fallbacks para navegadores mais antigos para garantir uma experiência positiva para todos os usuários.

Recursos

• MDN Web Docs: CSS Custom Highlight API
• Can I Use: CSS Custom Highlight API
• WebAIM Contrast Checker