Propriedades prefixadas em CSS ainda aparecem em muitos projetos, principalmente quando lidamos com compatibilidade entre navegadores. Entender quando e como usar evita bugs visuais e comportamento inconsistente.
O Problema
Diferentes navegadores implementam recursos CSS em momentos distintos. Antes de uma propriedade se tornar padrão oficial, cada engine pode disponibilizar sua própria versão com prefixos específicos.
Exemplos comuns de prefixos:
- -webkit- → Chrome, Safari
- -moz- → Firefox
- -ms- → Internet Explorer
- -o- → Opera (antigo)
O problema surge quando usamos apenas a versão padrão e o navegador ainda não oferece suporte completo — ou quando usamos apenas a versão prefixada e esquecemos da versão final.
A Solução
A boa prática é declarar primeiro as versões prefixadas e por último a versão oficial da propriedade. Isso garante compatibilidade progressiva.
.exemplo { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } |
Nesse caso:
- Navegadores antigos usam os prefixos
- Navegadores modernos usam a propriedade padrão
- A última declaração (sem prefixo) sobrescreve as anteriores quando suportada
Outro exemplo prático
.box { -webkit-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } |
Isso evita falhas de renderização em ambientes híbridos (principalmente sistemas legados).
Quando ainda usar prefixos?
Hoje em dia, o uso diminuiu bastante, mas ainda faz sentido quando:
- Você precisa suportar navegadores antigos
- Está lidando com propriedades experimentais
- Trabalha com sistemas corporativos legados
Em projetos modernos, ferramentas como Autoprefixer resolvem isso automaticamente no build.
Conclusão
Prefixos CSS existem para lidar com a evolução dos navegadores. Mesmo sendo menos usados hoje, conhecer essa prática evita bugs e garante compatibilidade em cenários reais de produção.
Se for trabalhar com frontend profissional, não ignore isso — principalmente em sistemas que precisam funcionar em múltiplos ambientes.