Prefixo CSS de navegadores

Se decorar várias propriedades CSS já é difícil, imagine ter que decorar prefixos CSS para cada um dos navegadores individualmente para cada uma das novas funcionalidades? Isso é que eu chamo de dor de cabeça!

Pensando nisso, nosso amigo do peito TJ Holowaychuk criou o Express Prefixr, uma ferramenta que vai salvar a sua vida na hora do desenvolvimento, vai por mim!

O Express Prefixr só precisa de uma das propriedades mais novas para terminar de gerar o restante dos prefixos CSS automaticamente para você, por exemplo, se você postar o código abaixo no campo "Insert your CSS here":

.conteudo {
	opacity: .5;
}

E pressionar "Prefix it", o resultado será:

.conteudo {
    -webkit-opacity: .5;
    -moz-opacity: .5;
    -ms-opacity: .5;
    -o-opacity: .5;
}

Prefixos css

Não sabe do que estou falando? Vamos conversar sobre prefixos CSS então!

Prefixos CSS

A tecnologia está em constante modificação, todos os dias surgem novos recursos, aparelhos, software e coisas do tipo. De fato, enquanto você está lendo este artigo, alguém está testando algo novo em nosso ramo, o desenvolvimento.

Acontece que não é inteligente lançar novas tecnologias substituindo as antigas que já funcionam há tempos. Por este motivo, quando surge uma nova funcionalidade no CSS que os navegadores ainda não suportam, eles tendem a incluí-las nas suas próximas versões, porém, até que tais recursos não estejam totalmente estáveis e prontos para a utilização sem medo, eles utilizam suas próprias propriedades de CSS, ou melhor, seus prefixos CSS.

Suponhamos que a propriedade opacity (que configura a opacidade de elementos HTML) tenha sido lançada este mês e a equipe de desenvolvedores da Mozilla (Firefox) já tenha testando e aprovado a nova funcionalidade para a próxima versão. Normalmente, essa nova versão virá com o recurso implantado, porém, você só vai conseguir utilizar esta propriedade utilizando o prefixo -moz- ou seja -moz-opacity. Posteriormente, quando o recurso já tiver sido totalmente aprovado e utilizado em larga escala, a Mozilla implanta a propriedade "opacity" por padrão (Lembrando que opacity funciona no Firefox faz tempo, é só um exemplo).

Agora imagine essa mesma ideia sendo colocada em prática por todos os navegadores? Sim! Você pensou corretamente, um prefixo para cada navegador (ou quase).

  • Android: -webkit-*
  • Chrome: -webkit-*
  • Firefox: -moz-*
  • Internet Explorer: -ms-*
  • iOS: -webkit-*
  • Opera: -o-*
  • Safari: -webkit-*

Na verdade, o Android, Google Chrome, iOS e Safari utilizam o mesmo prefixo – webkit-*, já os outros, Firefox, Internet Explorer e Opera, utilizam -moz-, -ms- e -o-, respectivamente.

O problema com tudo isso é simplesmente a bagunça, veja abaixo um código limpo:

.conteudo {
	opacity: .5;
}
.conteudo2 {
	box-shadow: 20px;
	-moz-transition: box-shadow 2s;
	-webkit-border-radius: 4px;
	animation: slide 1s alternate;
	background: linear-gradient(top, #e3e3e3 10%, white);
}
@-webkit-keyframes "slide" {
	0% { left: 0; }
	100% { left: 50px; }
}

Repare na bagunça que ele vira após a inclusão dos prefixos:

.conteudo {
    -webkit-opacity: .5;
    -moz-opacity: .5;
    -ms-opacity: .5;
    -o-opacity: .5;
}

.conteudo2 {
    -webkit-box-shadow: 20px;
    -moz-box-shadow: 20px;
    -ms-box-shadow: 20px;
    -o-box-shadow: 20px;
    -moz--webkit-transition: box-shadow 2s;
    -moz-transition: box-shadow 2s;
    -ms-transition: box-shadow 2s;
    -o-transition: box-shadow 2s;
    -webkit--webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-animation: slide 1s alternate;
    -moz-animation: slide 1s alternate;
    -ms-animation: slide 1s alternate;
    -o-animation: slide 1s alternate;
    background: linear-gradient(top, #e3e3e3 10%, white);
    background: -webkit-linear-gradient(top, #e3e3e3 10%, white);
    background: -moz-linear-gradient(top, #e3e3e3 10%, white);
    background: -ms-linear-gradient(top, #e3e3e3 10%, white);
    background: -o-linear-gradient(top, #e3e3e3 10%, white);
}

@-webkit-keyframes "slide" {
    0% {
        left: 0;
    }

    100% {
        left: 50px;
    }
}

Decorou tudo isso?

Nem eu! Por isso, Express Prefixr neles!

Concluindo

O Express Prefixr é uma ferramenta gratuita que vai salvar bastante tempo da sua vida, além de gerar os prefixos CSS automaticamente para você, o código já vem indentado. É simplesmente copiar, colar e esquecer! Mas lembre-se, nada substitui seu conhecimento, utilize esta ferramenta para seu conformo, não como substituto da sua inteligência.