Publicado em 7 de maio de 2025
Browserslist é uma das ferramentas mais conhecidas para configurar as versões mínimas de navegadores com suporte em bases de código front-end. Os desenvolvedores adicionam uma consulta browserslist ao arquivo package.json, e a Browserslist expõe uma lista de navegadores com suporte mínimo. O Browserslist pode ser usado com uma ampla variedade de ferramentas de linting, polyfilling e empacotamento conhecidas, incluindo:
- Autoprefixer (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
Destinos de referência
Ao decidir usar o valor de referência, considere sua base de usuários e decida qual conjunto de recursos de valor de referência você quer segmentar:
- A Baseline amplamente disponível inclui todos os recursos da Web que tinham suporte total do conjunto de navegadores principais da Baseline há 30 meses ou mais.
- Os conjuntos de recursos do ano de referência, por exemplo, Baseline 2020, incluem todos os recursos que foram recém disponibilizados no final do ano especificado.
Dependendo da sua base de usuários, talvez você possa segmentar a meta "Disponível para todos" ou talvez precise segmentar um ano de meta mais antigo. Consulte suas ferramentas de análise ou RUM para entender quais versões de navegadores seus usuários têm.
Instalar browserslist-config-baseline
Depois de decidir qual conjunto de recursos de referência você quer segmentar, é possível aplicar essa segmentação às suas ferramentas para desenvolvedores. A maneira mais simples de fazer isso para qualquer ferramenta que use a lista de navegadores é instalar o browserslist-config-baseline:
# npm
npm i browserslist-config-baseline@latest -D
# yarn
yarn add --latest browserslist-config-baseline -D
# bun
bun add browserslist-config-baseline@latest -d
Como segmentar a meta de referência Disponível em geral
Para segmentar a referência "Disponível para todos", atualize ou adicione uma configuração browserlist em package.json usando a palavra-chave extends:
{
...
"browserslist": [
"extends browserslist-config-baseline"
]
...
}
Quando browserslist carrega a lista de navegadores com suporte, browserslist-config-baseline gera dinamicamente as versões mínimas atuais do navegador que oferecem suporte a todos os recursos que estão disponíveis para todos. Também é possível adicionar extends browserslist-config-baseline a um arquivo .browserslistrc, e ele será processado da mesma forma.
Como segmentar anos de referência
Se você quiser segmentar um conjunto de recursos de ano de referência, adicione um / e o ano no formato YYYY ao final da consulta browserslist:
"browserslist": "extends browserslist-config-baseline/2020"
Como especificar navegadores downstream
O conjunto de navegadores principais de referência inclui Chrome, Edge, Firefox e Safari. Outros navegadores são baseados no mesmo código de código aberto do Chrome e do Edge (Chromium) e precisam oferecer suporte ao mesmo conjunto de recursos da versão do Chromium que eles implementam.
O browserslist-config-baseline usa baseline-browser-mapping para correlacionar as versões do navegador aos conjuntos de recursos compatíveis. Os mapeamentos para o UC Browser Mobile e o QQ Browser Mobile estão disponíveis em baseline-browser-mapping, e outros navegadores podem ser incluídos no futuro.
Para incluir esses navegadores na configuração de referência, adicione /with-downstream imediatamente após o nome do módulo na configuração browserslist:
"browserslist": "extends browserslist-config-baseline/with-downstream"
ou:
"browserslist": "extends browserslist-config-baseline/with-downstream/2020"
Exemplos de browserslist-config-baseline em ação
Nas ferramentas de empacotamento
Adicionar browserslist-config-baseline ao repositório pode ter um efeito imediato. O Babel é uma ferramenta de build conhecida para empacotar JavaScript. Se você usar os padrões do pacote @babel/preset-env, muitas APIs e métodos modernos do JavaScript serão substituídos pela sintaxe mais detalhada exigida por navegadores mais antigos:
No entanto, definir browserslist-config-baseline para segmentar a meta 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 isso usando o exemplo de código no repositório baseline-demos do Google Chrome Labs.
Em linters
Alguns linters já funcionam com Browserslist ou podem ser feitos para funcionar com Browserslist 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 browserslist-config-baseline:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['extends browserslist-config-baseline'],
},
],
},
};
O Stylelint agora sinaliza CSS que não faz parte da referência amplamente disponível:
O Stylelint também fornece um plug-in que permite definir regras de referência diretamente, mas se você já estiver usando o browserslist para processar a configuração, o browserslist-config-baseline é uma solução pronta.
Como contribuir para browserslist-config-baseline
Se você quiser solicitar um recurso para browserslist-config-baseline, crie um problema ou uma solicitação de envio no repositório do GitHub.
Se você quiser contribuir com mais dados do navegador downstream ou informar um problema de dados, crie um problema ou uma solicitação de pull no repositório baseline-browser-mapping.