Compatibilidade de navegadores e caniuse.com
Verifique o suporte a recursos entre navegadores em caniuse.com, entenda os prefixos de fornecedor e use polyfills ou fallbacks quando necessário.
Compatibilidade de navegadores e caniuse.com é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Por que a compatibilidade é importante?
Navegadores diferentes implementam os padrões da web em velocidades diferentes. Uma propriedade CSS ou uma API JavaScript disponível no Chrome 130 pode não existir em uma versão mais antiga do Safari ou do Firefox. Testar e planejar a compatibilidade evita experiências com problemas para seus usuários.
caniuse.com — sua referência de compatibilidade
Acesse caniuse.com e digite qualquer propriedade CSS, API JavaScript ou atributo HTML. Você verá uma tabela de suporte com cores para todos os principais navegadores e suas versões recentes, além de estatísticas de uso e observações sobre suporte parcial.
Lendo a tabela do caniuse
Verde = compatível. Amarelo = suporte parcial. Vermelho = não compatível. Cinza = desconhecido. Verifique a porcentagem de uso global no topo — se 97% ou mais dos usuários tiverem suporte, normalmente você poderá usá-lo sem um fallback.
browser-compat-data e MDN
As páginas do MDN Web Docs incluem uma tabela de compatibilidade entre navegadores na parte inferior de cada página de referência de API. Ela usa os mesmos dados que o caniuse e é atualizada frequentemente pelos próprios fornecedores de navegadores.
A iniciativa Baseline
A iniciativa Baseline (web.dev/baseline) classifica os recursos como Disponíveis recentemente ou Amplamente disponíveis com base no suporte no Chrome, Edge, Firefox e Safari. Um recurso Amplamente disponível pode ser usado com segurança sem polyfills.
Preenchimentos de compatibilidade
Um preenchimento é um código JavaScript que implementa uma API mais recente em navegadores antigos. Fontes populares: polyfill.io (entrega apenas os preenchimentos necessários), core-js (preenchimentos abrangentes para JavaScript) e auxiliares do Babel.
// polyfill.io example:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at,Object.hasOwn"></script>@supports — Consultas de recursos em CSS
@supports permite escrever CSS que só se aplica quando uma propriedade é compatível. Fornece alternativas de CSS semelhantes às substituições responsivas oferecidas pelas consultas de mídia.
/* Fallback for all browsers */
.grid {
display: flex;
flex-wrap: wrap;
}
/* Enhancement for browsers that support grid */
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}Prefixos de fornecedores (legado)
Os recursos mais antigos de CSS precisavam de prefixos de fornecedores: -webkit-, -moz-, -ms-. Hoje, eles estão praticamente obsoletos — os navegadores modernos usam propriedades padrão sem prefixo. O Autoprefixer (plugin do PostCSS) adiciona esses prefixos automaticamente quando ainda são necessários.
Transpilação com Babel
O Babel compila JavaScript moderno (ES2022+) para ES5, que navegadores antigos conseguem executar. Vite e webpack integram o Babel por meio de plugins. Configure os navegadores-alvo em browserslist no package.json.
// package.json
"browserslist": [
"last 2 versions",
"not dead",
"> 0.5%"
]Testes em navegadores reais
A emulação de dispositivos do DevTools não substitui os testes em navegadores reais. Use BrowserStack, Sauce Labs ou o navegador Safari real (requer macOS ou iOS) para uma validação verdadeiramente entre navegadores.
O panorama dos navegadores de atualização contínua
Chrome, Edge, Firefox e Safari são atualizados automaticamente. A quantidade de navegadores desatualizados diminui a cada ano. Para a maioria dos produtos voltados ao consumidor, ter como alvo as duas últimas versões principais de cada navegador atende a mais de 95% dos usuários.
Verificação rápida
O que uma célula verde na tabela de suporte do caniuse.com indica?
Recapitulação: compatibilidade entre navegadores
Consulte o caniuse.com antes de usar APIs novas. Leia as tabelas de compatibilidade do MDN. Defina conjuntos razoáveis de navegadores com browserslist. Use @supports para consultas de recursos em CSS. Use apenas os preenchimentos de compatibilidade necessários. Converta JavaScript moderno com Babel. Faça testes em navegadores reais para recursos críticos.
Perguntas Frequentes
A aula “Compatibilidade de navegadores e caniuse.com” é grátis?
Sim — o texto completo de “Compatibilidade de navegadores e caniuse.com” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Compatibilidade de navegadores e caniuse.com”?
Verifique o suporte a recursos entre navegadores em caniuse.com, entenda os prefixos de fornecedor e use polyfills ou fallbacks quando necessário. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 4 de 4.
Quanto tempo leva a aula “Compatibilidade de navegadores e caniuse.com”?
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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Chrome DevTools: Elements, Console e Network
- VSCode: extensões, Emmet e atalhos
- Configuração do Prettier e do ESLint
- Compatibilidade de navegadores e caniuse.com