Baseline: Uma Nova Forma de Pensar Sobre Suporte a Navegadores

Durante anos, desenvolvedores frontend lutaram com uma questão ultrapassada: “Quais versões de navegadores suportamos?” Esse enquadramento fazia sentido quando o Internet Explorer dominava e os navegadores atualizavam anualmente. Hoje, Chrome e Firefox lançam novas versões a cada poucas semanas. Safari atualiza regularmente. O modelo mental antigo não se aplica mais.

Web Platform Baseline oferece uma abordagem melhor. Em vez de rastrear versões de navegadores, você rastreia disponibilidade de recursos. Este artigo explica como o Baseline funciona, por que é importante para compatibilidade moderna de navegadores e como aplicá-lo em seus projetos.

O Que É Web Platform Baseline?

Baseline é uma iniciativa multi-fornecedor apoiada por Google, Microsoft, Apple e Mozilla através do W3C WebDX Community Group. Você encontrará indicadores Baseline no MDN, web.dev e Can I Use.

Baseline responde a uma pergunta simples: Posso usar este recurso com segurança entre navegadores?

Ele define um conjunto de navegadores principais:

• Chrome (desktop e Android)
• Edge
• Firefox (desktop e Android)
• Safari (macOS e iOS)

Quando um recurso funciona em todos esses navegadores, ele ganha o status Baseline.

Os Três Estados de Disponibilidade

Os recursos Baseline se enquadram em três categorias:

Disponibilidade limitada: O recurso existe em alguns navegadores, mas não em todos. Use com cautela ou com polyfills.

Recentemente disponível: O recurso funciona em todas as versões estáveis de cada navegador principal. É interoperável, mas recente.

Amplamente disponível: O recurso está em todos os navegadores principais há pelo menos 30 meses. A maioria dos usuários tem acesso.

O limite de 30 meses para “Amplamente disponível” não é arbitrário. Ele leva em conta usuários que não atualizam imediatamente, dispositivos mais antigos e navegadores derivados que herdam dos principais motores. Após 30 meses, um recurso normalmente alcançou quase todos.

Por Que Esta Mudança de Modelo Mental Importa

Políticas tradicionais baseadas em versões criam problemas. O que significa “últimas duas versões do Firefox” quando o Firefox lança seis versões principais durante um único projeto? O alvo continua se movendo.

O pensamento em disponibilidade de recursos resolve isso. Em vez de perguntar “Quais versões de navegadores suportamos?” você pergunta “Este recurso é Baseline?”

Esta mudança oferece três benefícios práticos:

Decisões mais claras. Verifique o MDN para o indicador Baseline. Se mostrar “Amplamente disponível”, use o recurso com confiança. Sem cálculos mentais sobre números de versão.

Melhor comunicação com stakeholders. “Usamos recursos disponíveis em todos os navegadores há mais de 30 meses” é mais fácil de explicar do que “últimas duas versões do Chrome, Firefox e Safari, mais Firefox ESR, mais qualquer coisa acima de 0,5% de uso global.”

Consistência aprimorada. As equipes fazem menos julgamentos subjetivos. A política se aplica uniformemente entre projetos.

Como Aplicar Baseline na Prática

Adotar Baseline segue um padrão direto:

Para funcionalidade principal, confie em recursos Amplamente disponíveis. Estes formam sua base. Usuários sem navegadores modernos ainda obtêm uma experiência funcional.

Para melhorias progressivas, use recursos Recentemente disponíveis com detecção de recursos. Envolva-os em blocos @supports ou verificações JavaScript. Usuários com navegadores mais antigos obtêm a experiência base, enquanto outros obtêm a versão aprimorada.

/* Fallback amplamente disponível */
.container {
  max-width: 100%;
}

/* Melhoria recentemente disponível */
@supports (container-type: inline-size) {
  .container {
    container-type: inline-size;
  }
}

O CSS acima é um exemplo claro de melhoria progressiva. Todo navegador entende max-width: 100%. Navegadores que também suportam container queries obtêm o layout mais capaz. Nada quebra para ninguém.

Integrando Baseline com Suas Ferramentas

Baseline é cada vez mais suportado em ferramentas de desenvolvimento. Browserslist agora suporta consultas Baseline diretamente (por exemplo, direcionando recursos “amplamente disponíveis” ou um ano Baseline específico), ajudando a manter suas ferramentas de build alinhadas com sua política de suporte. O pacote browserslist-config-baseline fornece uma configuração pronta se você preferir não escrever consultas você mesmo.

O suporte CSS do ESLint (@eslint/css) inclui uma regra use-baseline que pode sinalizar propriedades que ficam fora do seu limite Baseline escolhido. Embora não seja perfeito — pode ser excessivamente rigoroso sobre padrões de melhoria progressiva — sinaliza para onde o ecossistema está indo.

Espere integração mais estreita com ferramentas de build, linters e frameworks à medida que a adoção do Baseline cresce.

Baseline É um Padrão, Não uma Garantia

Baseline fornece um ponto de partida forte, mas não substitui o julgamento. Casos extremos existem. Um recurso pode ser Baseline, mas carregar um bug significativo em um navegador. Preocupações de acessibilidade podem exigir testes além dos dados de compatibilidade. Ambientes corporativos com navegadores bloqueados precisam de consideração separada.

Use Baseline como sua suposição padrão e, em seguida, verifique quando as apostas são altas.

Conclusão

Web Platform Baseline representa uma mudança fundamental: de matrizes de suporte baseadas em versões para pensamento em disponibilidade de recursos. Reduz a sobrecarga cognitiva, melhora a comunicação da equipe e se alinha com como os navegadores modernos realmente funcionam.

Comece verificando o status Baseline no MDN antes de buscar novos recursos. Adote “Amplamente disponível” como sua base. Adicione recursos “Recentemente disponíveis” através de melhoria progressiva. Deixe as ferramentas alcançarem para apoiar seu fluxo de trabalho.

A questão não é quais navegadores você suporta. É quais recursos você precisa.

Perguntas Frequentes

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.