🥇 Perder os prefixos do fornecedor CSS3

Eu amo CSS3. Ser capaz de pular direto para o código e projetar elementos e componentes de interface que escalam em diferentes resoluções de dispositivo é fantástico. Sem mencionar o aumento da velocidade e do desempenho com a redução de solicitações HTTP para imagens de fundo. Mas, como a maioria dos recursos do CSS3 são considerados experimentais, eles são interpretados de forma um pouco diferente pelos diferentes fornecedores de navegadores. Portanto, a maioria dos recursos requer esses pequenos prefixos desagradáveis para fazê-los funcionar em um navegador específico, como -webkit-linear-gradient (…).

Para ser franco, odeio prefixos de fornecedores; eles são quase um impedimento para a implementação. E é por isso que adoro -prefix-free, um plugin criado por Lea Verou para te tirar do inferno do prefixo do fornecedor CSS. Prefix free permite que você use apenas as propriedades não prefixadas em seu CSS, e o plugin cuida de todas as disputas do navegador para você. A implementação é extremamente simples (basta incluir prefixfree.js em qualquer lugar da sua página) e é compatível com todos os navegadores modernos que suportam CSS3, incluindo Safari móvel, Android e outros.

Então, se você odeia escrever CSS3 assim …




div{
    background: #000;
    background-image: -webkit-gradient(linear, 0% 15%, 0% 100%, from(#FFF), to(#000));
    background-image: -webkit-linear-gradient(top, #FFF, #000);
    background-image: -moz-linear-gradient(top, #FFF, #000);
    background-image: -ms-linear-gradient(top, #FFF, #000);
    background-image: -o-linear-gradient(top, #FFF, #000);
    background-image: linear-gradient(to bottom, #FFF, #000);
}
</code>
</pre>

…and want to write CSS3 like this…



div{
    background: #000;
    background-image: linear-gradient(to bottom, #FFF, #000);
}
</code>
</pre>

…check out Prefix free!

http://leaverou.github.com/prefixfree/

Original blog post: http://www.uifuel.com/lose-the-css3-vendor-prefixes/

Related Posts