CSS de Entrada

CSS com Prefixos

O que é um CSS Prefixer?

Fornecedores de navegadores adicionam recursos CSS experimentais usando prefixos como -webkit-, -moz-, -ms- e -o-. Sem esses prefixos, seu CSS moderno não funcionará em navegadores mais antigos. Este CSS prefixer adiciona automaticamente todos os prefixos de fornecedor necessários para garantir que seu CSS (Cascading Style Sheets) funcione em diferentes navegadores e versões.

De acordo com a MDN Web Docs, prefixos de fornecedor são essenciais para compatibilidade entre navegadores. Nossa ferramenta segue o banco de dados Can I Use para determinar quais propriedades precisam de prefixos, garantindo que seus estilos funcionem no Chrome, Firefox, Safari, Edge e versões anteriores.

Tudo roda localmente no seu navegador. Sem uploads, sem servidores – basta colar seu CSS e obter a saída prefixada instantaneamente.

Como Usar o CSS Prefixer

Siga estes passos para adicionar prefixos de fornecedor ao seu CSS. Cada passo usa os botões e painéis reais desta página.

Colar, Enviar ou Carregar Exemplo

Cole CSS no painel esquerdo CSS de Entrada, ou clique em Enviar para carregar um arquivo .css. Clique em Exemplo para ver estilos de exemplo com propriedades que precisam de prefixos. Exemplo:

.subscriber-card {
  display: flex;
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

Visualizar Saída Prefixada

O painel direito CSS com Prefixos mostra a saída com prefixos -webkit-, -moz-, -ms- e -o- onde necessário. Propriedades como flex, transform e transition recebem todas as versões prefixadas necessárias.

Copiar ou Baixar

Clique em Copiar para copiar para a área de transferência, ou Baixar para salvar como .css. Use Limpar para recomeçar. Todo o processamento roda no seu navegador.

Quando Usar Esta Ferramenta

Compatibilidade entre Navegadores

Construindo um site que precisa funcionar em navegadores antigos? Adicione prefixos de fornecedor para garantir que recursos CSS modernos como Flexbox e Grid funcionem em todos os lugares. Essencial para projetos corporativos com suporte a navegadores legados.

Prototipagem Rápida

Testando animações CSS ou transforms em diferentes navegadores? Prefixe seu código primeiro para evitar problemas específicos de cada navegador. Economiza tempo quando você está iterando rapidamente nos designs.

Projetos Legados

Mantendo projetos antigos que ainda suportam IE11 ou versões mais antigas do Chrome? Adicione prefixos a novos recursos CSS antes de fazer o deploy. Previne quebra do suporte a navegadores existentes.

Aprendendo CSS

Quer entender quais propriedades CSS precisam de prefixos de fornecedor? Use esta ferramenta para ver quais recursos requerem prefixação. Educativo para desenvolvedores aprendendo sobre compatibilidade de navegadores.

Perguntas Frequentes

O que são prefixos de fornecedor?

Prefixos de fornecedor são prefixos CSS específicos de navegadores como -webkit-, -moz-, -ms- e -o-. Os navegadores os usam para implementar recursos CSS experimentais ou não padronizados antes de se tornarem padrões oficiais.

Ainda preciso de prefixos em navegadores modernos?

Para recursos de ponta, sim. Embora navegadores modernos suportem a maioria do CSS padrão, algumas propriedades mais novas e versões de navegadores mais antigos ainda requerem prefixos. Consulte o Can I Use para suporte específico de propriedades.

Quais propriedades precisam de prefixo?

As mais comuns incluem transform, transition, animation, propriedades flex, border-radius (navegadores antigos), box-shadow e muitas outras. Nossa ferramenta detecta automaticamente com base nos padrões MDN.

Isso vai aumentar o tamanho do meu arquivo CSS?

Sim, adicionar prefixos de fornecedor aumenta o tamanho do arquivo. Porém, a contrapartida é a compatibilidade com navegadores. Para produção, use junto com minificação e considere usar o Autoprefixer no seu processo de build.

Meus dados CSS estão seguros?

Absolutamente. Todo o processamento acontece no seu navegador usando JavaScript. Seu CSS nunca sai do seu computador – sem uploads para servidor, sem armazenamento de dados, completamente privado.

Ferramentas CSS Relacionadas

Prefixação é apenas uma parte do desenvolvimento CSS. Aqui estão outras ferramentas que podem ajudar: