CSS Autoprefixer
O CSS Autoprefixer adiciona os prefixos de navegador necessários ao seu código CSS sem depender de terminal ou comandos de build. Ele analisa cada propriedade com base nos dados de compatibilidade do Can I Use e remove seletores desnecessários. Todo o processamento é feito localmente no seu navegador com atualização em tempo real.
Como usar o CSS autoprefixer online
Garantir compatibilidade cross-browser no seu código é simples e não exige a instalação de pacotes no projeto.
- Cole ou digite o código original no campo de entrada do CSS Autoprefixer.
- O código formatado com os vendor prefixes CSS atualiza automaticamente na saída assim que você para de digitar.
- Clique no botão de cópia para transferir o resultado final para a sua área de transferência.
Caso ocorra um erro de sintaxe no código inserido, a ferramenta mantém a última saída válida visível até que o trecho seja corrigido.
Definição do público-alvo com o Browserslist
Por padrão, a ferramenta aplica a consulta > 0.5%, last 2 versions, cobrindo uma ampla gama de navegadores modernos. Se o seu projeto precisa atender a um conjunto diferente de navegadores, digite a consulta desejada no campo Browser Target.
Exemplos de sintaxe válidos para o campo:
last 2 versions: inclui as duas últimas versões de cada navegador principal.> 1%: inclui navegadores com mais de 1% de participação de mercado global.Safari >= 9: cobre a versão 9 do Safari e todas as edições posteriores.defaults: aplica a seleção padrão recomendada pelo Autoprefixer.
Ferramenta online ou CSS autoprefixer VS Code
Muitos desenvolvedores utilizam a extensão css autoprefixer vscode em seus editores durante o fluxo de desenvolvimento. Contudo, para ajustes rápidos em projetos simples, computadores de terceiros ou quando não há um ambiente Node.js configurado, a versão autoprefixer css online resolve a necessidade sem exigir instalações.
Ambas as opções utilizam o mesmo motor PostCSS e a mesma base de dados do Can I Use, garantindo resultados idênticos no código final.
Regras de prefixação e a CSS vendor prefixes list
Diferente de tabelas estáticas encontradas em consultas como vendor prefixes css w3schools, este utilitário automatiza a adição e a remoção de prefixos com base em dados de uso atualizados.
A ferramenta aplica os prefixos padrão dos principais motores de renderização:
-webkit-(Chrome, Safari, Edge baseado em Chromium e iOS)-moz-(Firefox)-ms-(Internet Explorer e Edge antigo)-o-(Opera antigo)
Propriedades que exigem compatibilidade específica, como user-select e backdrop-filter, recebem seus respectivos prefixos. Propriedades já padronizadas em todos os navegadores alvo permanecem sem prefixo para evitar código desnecessário.
Perguntas frequentes
O que são vendor prefixes CSS e para que servem?
Vendor prefixes CSS são marcas adicionadas pelos navegadores a propriedades em fase de testes ou padronização. Eles permitem que os navegadores reconheçam funcionalidades novas antes que a especificação oficial seja concluída. Quando uma propriedade é padronizada, o prefixo deixa de ser necessário.
O Autoprefixer ainda é necessário para projetos modernos?
Sim, para um conjunto específico de propriedades. Embora a maior parte do CSS moderno não precise de prefixos, recursos como user-select e backdrop-filter ainda necessitam de prefixos em determinados navegadores. O Autoprefixer adiciona apenas o que é realmente preciso para o público-alvo escolhido.
Quais são os prefixos dos navegadores Chrome, Firefox, Safari e Edge?
O prefixo -webkit- é usado pelo Chrome, Safari, iOS e versões atuais do Edge. O Firefox utiliza -moz-. O Internet Explorer e edições antigas do Edge utilizavam -ms-, enquanto versões legadas do Opera usavam -o-.
Como usar o Autoprefixer online sem instalar o Node.js?
Basta colar o código CSS na área de texto desta página. O processamento é executado diretamente no seu navegador, gerando a resposta com prefixos em tempo real sem exigir terminal, npm ou arquivos de configuração.
O que é uma consulta do Browserslist?
Uma consulta do Browserslist é um texto curto que especifica quais navegadores e versões seu projeto precisa suportar. O Autoprefixer lê essa instrução para definir exatamente quais prefixos inserir ou remover.
Qual a diferença entre usar o Autoprefixer online e a extensão do VS Code?
Ambas usam o mesmo motor de processamento do Autoprefixer. A extensão css autoprefixer vscode integra o processo ao editor de código, enquanto a ferramenta web permite processar trechos de código instantaneamente de qualquer dispositivo sem instalar dependências.
O Autoprefixer remove prefixos antigos e obsoletos?
Sim, a ferramenta remove prefixos desnecessários do código de entrada caso as propriedades já estejam padronizadas nos navegadores selecionados. Isso impede o acúmulo de código obsoleto no arquivo final.
