CSS de entrada

CSS com prefixos

Exemplos de prefixação CSS

Os prefixos de vendor garantem suporte cross-browser. Exemplo:

Flexbox e transforms

Entrada (sem prefixos):

Entrada

Saída com prefixos:

Saída

Use Exemplo acima para carregar mais dados de exemplo.

O que é um prefixador CSS?

Os navegadores às vezes implementam recursos CSS com prefixos de vendor antes de serem padronizados: -webkit- (Chrome, Safari), -moz- (Firefox), -ms- (IE/Edge legado). Um prefixador CSS adiciona esses prefixos automaticamente para que seus estilos funcionem em todos os navegadores. As especificações W3C CSS definem a linguagem; Can I Use rastreia o suporte de navegador.

Esta ferramenta analisa seu CSS e adiciona prefixos de vendor onde necessário. É executada completamente no seu navegador. Nada é enviado a nenhum servidor. Navegadores modernos precisam de menos prefixos que antes, mas algumas propriedades (ex.: user-select, display: flex no Safari antigo) ainda se beneficiam. Para formatar, use o Formatador CSS. Para minificar, o Minificador CSS.

Como usar esta ferramenta

Colar ou enviar CSS

Copie seu CSS e cole no editor à esquerda. Também pode clicar em Enviar para carregar um arquivo .css. O botão Exemplo carrega dados de exemplo. CSS inválido mostrará um erro.

Ver a saída com prefixos

O painel direito mostra CSS com prefixos de vendor adicionados. Propriedades como display: flex, user-select e transform recebem os prefixos apropriados para navegadores antigos.

Copiar ou baixar

Use Copiar ou Baixar. Para SCSS ou Less, compile primeiro com SCSS para CSS ou Less para CSS, depois prefixe. Para validar, o Validador CSS.

Quando a prefixação CSS ajuda

Ao suportar navegadores antigos (Safari, Chrome antigo, IE legado) ou usar recursos CSS novos que não estão totalmente padronizados, a prefixação garante compatibilidade. Ferramentas de build como Autoprefixer ou PostCSS costumam lidar com isso em produção, mas esta ferramenta é útil para arquivos pontuais, verificações rápidas ou quando não há etapa de build.

CSS de e-mail, estilos embutidos ou CSS hospedado em CDN podem precisar de prefixação manual. Passar sua folha de estilos por aqui fornece saída pronta para navegador. Para converter para estilos inline (ex.: e-mail), use CSS para inline após prefixar.

Perguntas frequentes

Ainda preciso de prefixos em 2024?

Muitas propriedades já têm suporte sem prefixo. Para Safari antigo, iOS ou navegadores legado, algumas propriedades (ex.: -webkit-backdrop-filter) ainda precisam de prefixos. Verifique Can I Use para seus navegadores alvo.

Meus dados são privados?

Sim. A prefixação é executada completamente no seu navegador. Nenhum dado é enviado a nenhum servidor.

Por que usar isso em vez do Autoprefixer?

O Autoprefixer roda em uma pipeline de build. Esta ferramenta roda no navegador—sem Node.js ou etapa de build. Use para verificações rápidas, arquivos pontuais ou quando não pode executar um build.

Suporta todas as propriedades?

A ferramenta adiciona prefixos para propriedades comuns. Para cobertura completa, use Autoprefixer com seu build. Para a maioria dos casos, esta ferramenta cobre o essencial.

E o @keyframes?

Nomes de keyframe podem precisar de prefixos em alguns contextos. A ferramenta trata casos comuns. Para animações complexas, verifique nos seus navegadores alvo.

Ferramentas relacionadas

Para a especificação CSS: W3C CSS. MDN CSS é a referência. Can I Use para suporte de navegador. Autoprefixer para pipelines de build.

Prefixador CSS