Os realces coloridos que aparecem quando você pesquisa ou seleciona texto em uma página web não precisam mais ser os padrões do navegador! Com o suporte oficial do ::search-text no Chrome 144 e outros pseudo-elementos como ::selection e ::target-text, agora você tem controle total via CSS. Este guia diferencia claramente o que cada elemento seleciona e introduz técnicas de estilização práticas, pensando em acessibilidade e usabilidade. Confira mais detalhes no material de referência.
Tabela Comparativa dos Pseudo-elementos de Destaque
Uma tabela rápida ajuda a esclarecer a função de cada pseudo-elemento.
| Pseudo-seletor | Seleciona… | Observações |
|---|---|---|
::search-text | Resultados da busca na página (Ctrl+F) | ::search-text:current seleciona o alvo atual |
::target-text | Destaques de fragmentos de texto via URL | Muito usado em links de mecanismos de busca |
::selection | Texto selecionado com o ponteiro | |
::highlight() | Destaques personalizados via JavaScript API | |
::spelling-error | Erros de ortografia (sublinhado) | Principalmente em conteúdo editável |
::grammar-error | Erros gramaticais (sublinhado) | Principalmente em conteúdo editável |
Na Prática: Estilização Flexível com Sintaxe de Cor Relativa
Se o amarelo padrão do destaque não tem contraste suficiente com o fundo da sua página, use a Sintaxe de Cor Relativa (Relative Color Syntax) para criar realces que reagem à cor de fundo. O segredo é inverter os valores dos canais RGB para garantir um contraste forte.
body {
--background: #38003c;
background: var(--background);
}
::selection,
::target-text,
::search-text {
/* Faz a cor do texto 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));
}
/* Distingue visualmente cada tipo de destaque (mantendo um canal RGB) */
::selection {
background: rgb(from var(--background) r calc(255 - g) calc(255 - b) / 70%);
}
::target-text {
background: rgb(from var(--background) calc(255 - r) g calc(255 - b) / 70%);
}
::search-text {
background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 70%);
}
::search-text:current {
background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 100%);
}
Nesse código, r, g, b representam os valores dos canais RGB da cor --background. A fórmula calc(255 - r) inverte a cor, e a opacidade (/ 70%) permite que sobreposições permaneçam distinguíveis.
Insights Principais e Considerações
A necessidade dessa estilização não é só estética — é para garantir acessibilidade (contraste de cor) e usabilidade (ênfase). Destaques como ::search-text e ::target-text representam informações que o usuário buscou ativamente, então precisam ser visualmente proeminentes.
Um alerta importante: uma cor totalmente invertida nem sempre garante bom contraste. Por exemplo, o cinza (#808080) se inverte para o mesmo cinza. Então, enquanto aguardamos futuras funcionalidades do CSS como color-contrast(), é crucial testar sempre com ferramentas de verificação de contraste de cores.
Às vezes, os destaques precisam 'chocar' funcionalmente, em vez de se harmonizar com a paleta de design. Seu trabalho principal é capturar a atenção do usuário e transmitir informações precisas. Começando com o novo ::search-text, dominar esses seletores fornecidos pelo navegador é um passo para projetar experiências de usuário melhores. Vamos lá!