Estilizando Destaques no CSS Um Guia Completo do search-text à Acessibilidade

Com o lançamento recente do Chrome 144, o ::search-text entrou para a família dos pseudo-elementos de destaque do CSS. Esses seletores têm como alvo textos destacados por diversos motivos — resultados de busca na página, fragmentos de texto na URL, seleção do usuário e mais. Se você já ficou confuso sobre qual pseudo-elemento faz o quê, saiba que não está sozinho! Este guia vai comparar todos eles de forma clara e fornecer estratégias práticas de estilização que você pode usar hoje. As informações originais são baseadas neste artigo abrangente do CSS-Tricks.

Tabela Comparativa: Pseudo-elementos de Destaque

Aqui está uma análise clara do que cada pseudo-elemento seleciona e suas principais observações.

Pseudo-seletor	Seleciona…	Observações
::search-text	Resultados da busca na página (Ctrl/Cmd+F)	::search-text:current seleciona o resultado ativo atual
::target-text	Texto destacado via Fragmentos de Texto na URL	Muito usado por mecanismos de busca ou links externos
::selection	Texto selecionado pelo usuário com o ponteiro
::highlight()	Destaques personalizados definidos pela Custom Highlight API do JavaScript
::spelling-error	Palavras com erro ortográfico (principalmente em conteúdo editável)
::grammar-error	Erros gramaticais (principalmente em conteúdo editável)

O elemento HTML <mark> tem uma função similar, mas não é um pseudo-elemento. Preste atenção especial na diferença entre ::search-text e ::target-text, pois são frequentemente confundidos, mas têm origens em interações diferentes do usuário.

Criando Destaques Acessíveis com Sintaxe de Cor Relativa

As cores padrão de destaque (ex.: amarelo para ::search-text) podem não ter contraste suficiente com o fundo da sua página, prejudicando a legibilidade. A Sintaxe de Cor Relativa do CSS permite gerar programaticamente uma cor inversa com base no fundo, garantindo alta visibilidade e acessibilidade.

body {
  --background: #38003c;
  background: var(--background);
}

::selection,
::target-text,
::search-text {
  /* Define a cor do texto para combinar com o fundo */
  color: var(--background);
  /* Inverte a cor de fundo subtraindo cada canal RGB de 255 */
  background: rgb(from var(--background) calc(255 - r) calc(255 - g) calc(255 - b));
}

Esse código inverte completamente a cor --background para o fundo do destaque, fazendo com que ele se sobressaia em qualquer cenário. Lembre-se, isso não é uma solução mágica para contraste — sempre teste, pois cores como #808080 se invertem para elas mesmas. 😅

Distinguindo Visualmente Diferentes Destaques

Para lidar com casos onde os destaques podem se sobrepor, é uma boa prática estilizá-los de forma ligeiramente diferente. O exemplo abaixo modifica a lógica de inversão para cada tipo.

::selection {
  /* Mantém o canal R, inverte G e B */
  background: rgb(from var(--background) r calc(255 - g) calc(255 - b) / 70%);
}
::target-text {
  /* Mantém o canal G, inverte R e B */
  background: rgb(from var(--background) calc(255 - r) g calc(255 - b) / 70%);
}
::search-text {
  /* Mantém o canal B, inverte R e G */
  background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 70%);
}
::search-text:current {
  /* Resultado atual da busca na página, totalmente opaco */
  background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 100%);
}

Conclusão e Melhores Práticas para Implementação

O objetivo principal de estilizar destaques é ajudar os usuários a localizar e distinguir informações rapidamente. Às vezes, isso significa fazer elementos funcionais se destacarem de forma ousada, em vez de integrá-los perfeitamente à paleta de cores do seu design.

1. Sempre Teste o Contraste: A Sintaxe de Cor Relativa é uma ferramenta, não uma garantia. Use as verificações de acessibilidade do DevTools do navegador ou analisadores de contraste de cores dedicados para validar os resultados, especialmente para casos extremos.
2. Respeite as Convenções da Plataforma: Elementos como ::spelling-error (sublinhado vermelho) e ::grammar-error (sublinhado verde) têm fortes affordances nativas. Substituí-los deve ser feito com um benefício claro para o usuário em mente.
3. Olhe para o Futuro: Quando a função contrast-color() do CSS Color Module Level 5 for lançada, ela simplificará a escolha de uma cor de primeiro plano ideal contra qualquer fundo.

Entender e estilizar corretamente os pseudo-elementos de destaque, começando pelo novo ::search-text, está se tornando uma habilidade essencial para o desenvolvedor web moderno. Use esse conhecimento como uma oportunidade para melhorar significativamente a experiência do usuário e a acessibilidade nos seus sites! 🚀