Nenhum produto encontrado nessa seleção.
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;
} 
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.
