Publicado em: 7 de maio de 2025. Última atualização: 17 de setembro de 2025
O Browserslist é uma das ferramentas mais usadas para configurar as versões mínimas de navegadores compatíveis em bases de código de front-end. Os desenvolvedores adicionam uma consulta browserslist ao arquivo package.json (ou outro ponto de configuração do Browserslist, como um arquivo .browserslistrc), e o Browserslist expõe uma lista dos navegadores mínimos compatíveis. O Browserslist pode ser usado com uma ampla variedade de ferramentas populares de linting, polyfill e empacotamento, incluindo:
- Autoprefixer (link em inglês)
- Babel usando
@babel/preset-env - PostCSS usando
postcss-preset-env - ESLint usando
eslint-plugin-compat - Stylelint usando
stylelint-no-unsupported-browser-features - webpack
Metas de referência
Ao decidir usar o Baseline, considere sua base de usuários e escolha qual conjunto de recursos segmentar:
- A Base amplamente disponível inclui todos os recursos da Web totalmente compatíveis com o conjunto principal de navegadores da Base há 30 meses ou mais.
- Os conjuntos de recursos do ano de base, por exemplo, Base 2020, incluem todos os recursos Recém-disponibilizados no fim do ano especificado.
Dependendo da sua base de usuários, talvez seja possível segmentar a opção "Baseline Widely available" ou um ano anterior. Consulte suas ferramentas de análise ou RUM para entender quais versões de navegadores seus usuários têm.
Como segmentar "Recém-disponível" ou "Disponível para todos"
O suporte para o Baseline é integrado à Browserslist por algumas consultas diferentes. Se quiser segmentar navegadores recém-disponibilizados de nível básico, especifique baseline newly available na configuração do Browserslist:
{
...
"browserslist": [
"baseline newly available"
]
...
}
Também é possível especificar baseline widely available como uma consulta:
{
...
"browserslist": [
"baseline widely available"
]
...
}
Como segmentar anos de referência
Se você quiser segmentar um conjunto de recursos do ano de base, especifique o ano em uma consulta, como baseline 2024 se quiser segmentar o conjunto de recursos de 2024:
"browserslist": "baseline 2024"
É possível especificar anos de baseline 2015 até o ano atual.
Como especificar navegadores downstream
O conjunto principal de navegadores da Baseline inclui Chrome, Edge, Firefox e Safari. Outros navegadores são baseados no mesmo código aberto do Chrome e do Edge (Chromium) e oferecem suporte ao mesmo conjunto de recursos da versão do Chromium que implementam. Para incluir esses navegadores na sua configuração de comparativo, adicione with downstream depois da consulta de comparativo. Por exemplo, para segmentar navegadores downstream como parte da linha de base amplamente disponível, especifique baseline widely available with downstream:
"browserslist": "baseline widely available with downstream"
baseline newly available with downstream é outra consulta válida, assim como adicionar with downstream às metas anuais:
"browserslist": "baseline 2024 with downstream"
Exemplos de consultas de referência em ação
Em ferramentas de empacotamento
Usar as consultas de linha de base oferecidas pelo Browserslist no seu projeto pode ter um efeito imediato. O Babel é uma ferramenta de build muito usada para empacotar JavaScript. Se você usar os padrões do pacote @babel/preset-env, muitas APIs e métodos JavaScript modernos serão substituídos pela sintaxe mais detalhada exigida por navegadores mais antigos:
No entanto, usar uma consulta de baseline 2020 para segmentar o conjunto de recursos de 2020 no mesmo projeto de exemplo diminui drasticamente o tamanho da saída desse JavaScript, porque são necessárias menos transformações de sintaxe:
Teste você mesmo usando o código de exemplo no repositório baseline-demos do Google Chrome Labs.
Em linters
Alguns linters já funcionam com o Browserslist ou podem ser configurados para funcionar com ele usando um módulo de compatibilidade. Por exemplo, o stylelint pode consumir uma configuração browserslist usando o módulo stylelint-browser-compat. Defina o arquivo stylelint.config.js para usar a consulta de comparativo de mercado de sua escolha:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['baseline widely available'],
},
],
},
};
O Stylelint agora vai sinalizar CSS que não faz parte da versão de referência amplamente disponível:
O Stylelint também oferece um plug-in que permite definir regras de valor de referência diretamente. No entanto, se você já usa o Browserslist para processar sua configuração, usar as consultas de valor de referência integradas que o Browserslist oferece é uma solução viável.