Close

26/05/2015

Autoprefixer: deixe de usar prefixos no CSS

Sabemos que com o uso de novas propriedades estamos suscetíveis ao suporte ou não por parte dos navegadores, por isso acabávamos sujando nosso código pela necessidade do uso de prefixos específicos para cada navegador, até que tais recursos estivessem devidamente especificados e funcionando sem problemas nos browsers:

a {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

Se formos considerar todas as propriedades e checar quando cada uma delas necessita de prefixos, teremos um trabalho enorme!

Por isso utilizamos Autoprefixer, uma ferramenta que verifica a base do Can I Use para saber se as versões mais recentes dos navegadores precisam ou não dos prefixos. Caso seja necessário, o CSS gerado inclui o código extra, mas o arquivo de desenvolvimento permanece limpo:

a {
    display: flex;
}

O código acima seria compilado em:

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

Autoprefixer na prática

A configuração padrão do Autoprefixer define que utilizará as duas últimas versões de cada browser para inserir, ou não, os prefixos necessários. Caso você tenha colocado um prefixo no código e ele já não seja mais necessário, a ferramenta simplesmente gera o código sem este prefixo… Muito inteligente!

Caso queira utilizá-lo em seu workflow atual, há suporte para diversas ferramentas como Grunt e Gulp; para saber saber como instalar em cada uma delas, visite a página do projeto no Github.

Se você pretende ou já está utilizando nosso Framework FED para Grunt, não se preocupe pois o processo de uso já está automatizado da seguinte maneira:

  1. Você edita e salva seu código SASS;
  2. A watch task do Grunt identifica que o arquivo foi alterado;
  3. Os arquivos SCSS são concatenados e geram um arquivo único CSS;
  4. O Autoprefixer detecta essa alteração, insere ou retira os prefixos necessários e gera o CSS minificado, sempre baseado na base de dados do Can I use.

O resultado disso é um código para desenvolvimento mais limpo, sem precisar de mixins ou funções externas (como no caso do Compass), para a escrita pura de CSS.