Detecção de recursos versus identificação do navegador
Use detecção de recursos em vez de analisar o agente do usuário.
Detecção de recursos versus identificação do navegador é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
Duas abordagens para compatibilidade
Para saber se o navegador atual oferece suporte a um recurso, você pode detectar o recurso diretamente ("IntersectionObserver" in window) ou identificar a cadeia do agente do usuário (navigator.userAgent.includes("Chrome")). Uma abordagem é confiável; a outra é uma fonte persistente de erros.
Por que a identificação falha
As cadeias do agente do usuário mentem. O Edge afirma ser Chrome (e Safari e Firefox). O Chrome no Android emite um UA diferente do Chrome no iOS. Os navegadores respeitam o “congelamento” da cadeia UA por motivos de privacidade. Qualquer lógica baseada em cadeias UA quebra a cada poucos meses.
Padrão de detecção de recursos
Verifique a API real de que o código precisa: if ("IntersectionObserver" in window) { ... }. Se a propriedade existir, o navegador oferece suporte a ela; caso contrário, siga o caminho alternativo. A verificação é direta, rápida e preparada para o futuro.
if ("IntersectionObserver" in window) {
const observer = new IntersectionObserver(handler);
} else {
loadPolyfill().then(() => { /* use IntersectionObserver */ });
}Detecte e depois use
Associe a detecção a uma alternativa real. Detectar um recurso ausente só é útil se você tiver algo a fazer quando ele não estiver disponível — carregue um preenchimento de compatibilidade, renderize uma alternativa estática ou oculte completamente o recurso.
Consultas de recursos do CSS
O CSS tem sua própria detecção de recursos: @supports (display: grid) { ... }. O bloco é aplicado somente quando o navegador entende o par propriedade/valor. Use-o para fornecer layouts de grade com alternativas baseadas em flutuação para navegadores muito antigos.
@supports (display: grid) {
.grid { display: grid; gap: 16px; }
}
@supports not (display: grid) {
.grid > * { float: left; width: 33%; }
}Dicas do cliente do agente do usuário
Os navegadores modernos expõem informações estruturadas por meio de navigator.userAgentData (somente Chromium). Ele retorna pares de marca e versão em vez de uma cadeia de texto livre. Ainda assim, prefira a detecção de recursos — as dicas do agente do usuário só são úteis quando a capacidade não pode ser deduzida por uma verificação de propriedade.
Quando a identificação é aceitável
O caso de uso válido e restrito para a detecção por UA é excluir navegadores com falhas conhecidas: por exemplo, um erro conhecido do Safari no iOS na versão X. Mesmo assim, prefira exclusões baseadas em recursos (CSS.supports("aspect-ratio: 1")). A detecção por UA deve ser o último recurso.
Bibliotecas no estilo do Modernizr
O Modernizr reúne muitas detecções de recursos e as expõe como classes no elemento <html> (html.flexbox, html.no-flexbox). Projetos modernos raramente precisam dele — a maioria das detecções cabe em uma única linha —, mas ele continua útil para migrações de sistemas legados.
Testando a alternativa
Depois de implementar a detecção, teste os dois caminhos. Abra o DevTools, force o recurso a ficar indefinido e verifique se a alternativa funciona. Alternativas não testadas se deterioram — quando chegar o momento de um usuário precisar delas, muitas vezes falham de maneiras que o desenvolvedor nunca imaginou.
Detecção em estruturas
React, Vue e outras estruturas não têm uma API especial de detecção — use JavaScript comum dentro de um efeito ou da inicialização de um componente. Aplicações renderizadas no servidor precisam detectar no cliente, pois "IntersectionObserver" in window é indefinido durante SSR.
Evite identificar capacidades pelo agente do usuário
Algumas equipes verificam o UA para adivinhar capacidades (“Isto é um iPhone? Então provavelmente tem toque”). Isso confunde duas coisas não relacionadas. Detecte o toque diretamente por meio de "ontouchstart" in window ou, melhor, prefira eventos de ponteiro que abstraiam a modalidade de entrada.
Verificação de conhecimento
Por que a detecção de recursos é preferida à identificação pelo agente do usuário para lidar com capacidades do navegador?
Resumo
Prefira a detecção de recursos ("API" in window) à identificação pelo agente do usuário. O CSS tem @supports para a mesma finalidade. Sempre associe a detecção a uma alternativa real e teste os dois caminhos. A identificação por UA deve ser reservada para excluir versões de navegadores com falhas conhecidas, nunca para adivinhar capacidades.
Perguntas Frequentes
A aula “Detecção de recursos versus identificação do navegador” é grátis?
Sim — o texto completo de “Detecção de recursos versus identificação do navegador” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Detecção de recursos versus identificação do navegador”?
Use detecção de recursos em vez de analisar o agente do usuário. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Detecção de recursos versus identificação do navegador”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- A filosofia PE: comece com HTML
- Detecção de recursos versus identificação do navegador
- Degradação progressiva versus aprimoramento progressivo
- Criando um acordeão com PE