Diga adeus aos prefixos de fornecedores

Imagine que o senhor está deitado em uma praia. As ondas deslizam para cima e para baixo em uma costa arenosa enquanto o sol quente bate em sua pele. O senhor toma uma bebida fresca e refrescante e suspira enquanto as gaivotas grasnam ao longe.

Uma brisa suave roça levemente seus dedos enquanto eles deslizam pelo teclado. Tap tap tap tap. O senhor está escrevendo CSS. Não qualquer CSS, mas puro CSS, o mais puro que o senhor possa imaginar. Não há prefixos de fornecedores nem inconsistências de navegadores, nem bibliotecas externas nem compiladores. Seu código simplesmente funciona.

Neste artigo, mostrarei aos senhores como esse sonho pode se tornar realidade com uma ferramenta chamada Autoprefixer. Apresentarei aos senhores os problemas que ela resolve e como configurá-la.

Este artigo é a segunda parte de minha série sobre flexbox. Se o senhor gostou, não deixe de se inscrever no curso completo em Curso gratuito para iniciantes em flexbox.

Escrever Vanilla Flexbox é péssimo

Com o flexbox, há duas coisas que atrapalham a utopia da codificação: versões antigas da sintaxe e prefixos de fornecedores.

Versões antigas do Flexbox

O processo de criação de um novo recurso como o flexbox em HTML e CSS é complexo e demorado. Pode parecer que o flexbox é relativamente novo, mas o primeiro rascunho foi feito em 2009. Desde então, o flexbox passou por duas grandes mudanças, o que nos deixou com três versões da sintaxe.

• A versão de 2009 usava display: box e tinha propriedades que começavam com box.
• A sintaxe usada em 2012 display: flexbox.
• A versão atual usa display: flex e propriedades que começam com flex. É o extremamente improvável que a sintaxe mude novamente.

Essas implementações são muito semelhantes, mas a sintaxe é diferente e as versões mais antigas não oferecem suporte a todos os recursos mais recentes. Infelizmente, o Android 4.1 e o 4.3 suportam apenas a sintaxe de 2009, e o IE10 suporta apenas a sintaxe de 2012, portanto, se o senhor quiser obter o máximo de suporte do navegador, ainda precisará usá-los.

Prefixos do fornecedor

O senhor já viu propriedades CSS que começam com -webkit-, -moz-, -ms- ou -o-? Essas coisas são chamadas de prefixos de fornecedores. Minha explicação favorita sobre os prefixos de fornecedores vem de Peter-Paul Koch, da QuirksMode:

Originalmente, o objetivo dos prefixos de fornecedores era permitir que os fabricantes de navegadores começassem a oferecer suporte a declarações CSS experimentais.

Digamos que um grupo de trabalho do W3C esteja discutindo uma declaração de grade (que, aliás, não seria uma ideia tão ruim). Além disso, digamos que algumas pessoas criem uma especificação preliminar, mas outras discordem de alguns detalhes. Como sabemos, esse processo pode levar séculos.

Além disso, digamos que a Microsoft, como um experimento, decida implementar a grade proposta. Nesse momento, a Microsoft não pode ter certeza de que a especificação não será alterada. Portanto, em vez de adicionar a grade ao seu CSS, ela adiciona -ms-grid.

O prefixo do fornecedor meio que diz “esta é a interpretação da Microsoft de uma proposta em andamento”. Assim, se a definição final de grid for diferente, a Microsoft poderá adicionar uma nova propriedade CSS grid sem quebrar as páginas que dependem de -ms-grid.

Juntando os dois

Vamos ver um exemplo de código flexbox do lição anterior:

.fourth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Quando o senhor adiciona prefixos de fornecedores e versões antigas da sintaxe para dar suporte a navegadores mais antigos, fica assim:

.fourth-face {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.fourth-face .column {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

Caramba! Há muitos problemas com esse código.

1. Estamos nos repetindo. Em geral, os desenvolvedores não devem duplicar o código sempre que possível.
2. É muito trabalhoso lembrar de todos esses prefixos de fornecedores. Eles também nem sempre coincidem com os nomes das propriedades regulares.
3. É muito fácil esquecer o prefixo de um fornecedor. Se isso acontecer, o senhor provavelmente não perceberá o problema, a menos que esteja desenvolvendo nesse navegador.
4. É mais difícil de manter. Quando o senhor faz uma alteração, precisa fazê-la em vários lugares.

Autoprefixer to the Rescue!

O Autoprefixer é uma ferramenta que adiciona automaticamente prefixos de fornecedores ao seu CSS. Ele também traduz propriedades para versões mais antigas e até mesmo remove e prefixos desnecessários. O senhor pode até mesmo configurá-lo para que atinja navegadores específicos. O melhor de tudo é que ele funciona como mágica – uma vez ativado, o senhor pode esquecer que ele está lá.

CodePen

A maneira mais fácil de experimentar o AutoPrefixer é com CodePen. O CodePen é um editor de código on-line que permite que o senhor comece a programar diretamente. Para experimentá-lo, acesse o CodePen e clique no botão “New Pen”.

Em seguida, clique no ícone de configuração ao lado de CSS.

Ative o Autoprefixer clicando no botão de opção ao lado do rótulo “Autoprefixer”. Recomendo também que o senhor ative a opção Normalize.

A partir daqui, o senhor pode digitar CSS sem prefixo na área CSS e o Autoprefixer fará todo o trabalho para o senhor!

CodeKit

O CodePen é ótimo para pequenos projetos, mas a maior parte do desenvolvimento da Web é feita localmente. A configuração de um computador para desenvolvimento pode ser extremamente complicado. Felizmente, é fácil com o CodeKit.

O CodeKit é um programa que observa e incorpora um ton de ferramentas populares, como Autoprefixer, Sass e CoffeeScript, em seu projeto. Custa US$ 32, mas se o senhor ainda não estiver pronto para ferramentas como o Gulp, vale a pena.

Nota: Prepros é uma alternativa ao CodeKit para OS X e Windows. As instruções para configurá-lo devem ser muito semelhantes às instruções do CodeKit.

Para começar, abra o CodeKit e arraste uma pasta para a janela principal.

Infelizmente, o CodeKit não permite que o senhor execute o Autoprefixer em arquivos CSS simples e antigos. No entanto, é possível convertê-los em arquivos Sass renomeando as extensões para .scss. O senhor ainda pode escrever CSS nesses arquivos como faria normalmente. O CodeKit copia automaticamente todos os seus arquivos CSS compilados em um arquivo css portanto, recomendo manter seus arquivos CSS de origem em um diretório scss .

Clique no botão de configurações e, em seguida, em “Languages” (Idiomas), clique em “Special Language Tools” (Ferramentas de idiomas especiais).

Nessa página, marque a caixa ao lado de “Run Autoprefixer”. Para oferecer suporte a todos os navegadores que podem exibir o flexbox, altere a “Autoprefixer Browser String” para o seguinte:

last 2 versions, Explorer >= 10, Android >= 4.1, Safari >= 7, iOS >= 7

É isso aí! Agora, toda vez que o senhor fizer uma alteração em um dos seus arquivos, o CodeKit o compilará automaticamente usando o Autoprefixer.

Gulp, Grunt e outros frameworks

Gulp e Grunt são ferramentas que facilitam a configuração de um sistema de compilação para seus projetos. Com elas, o senhor pode configurar sistemas de compilação avançados que compilam seus arquivos, executam análises estáticas em seu código e até mesmo hospedam servidores locais.

A configuração dessas ferramentas é um pouco aprofundada demais para esta lição. No entanto, se o senhor estiver curioso, recomendo fortemente que se aprofunde em uma delas. O gulp-autoprefixer e grunt-autoprefixer ambos os pacotes incluem exemplos em seus arquivos Leiame. Se quiser ver meu gulpfile pessoal, confira este Gist.

Muitas estruturas de aplicativos da Web oferecem suporte ao Autoprefixer, incluindo Ruby on Rails, ASP.NET, Expresso e CakePHP. É bem provável que haja uma maneira de incorporar o Autoprefixer em sua estrutura favorita.

E se o senhor não puder usar o Autoprefixer?

Se não for possível usar o Autoprefixer em seu projeto, o senhor tem algumas opções.

A primeira é usar uma biblioteca chamada -livre de prefixos. Essa biblioteca faz a mesma coisa que o Autoprefixer, mas no navegador. A desvantagem é que leva mais tempo e poder de processamento para prefixar o CSS, o que pode tornar seu site um pouco lento, especialmente em navegadores móveis.

A outra opção é uma ferramenta chamada Por favor. O Pleeease permite que o usuário cole o CSS. Em seguida, ele usa o Autoprefixer para imprimir estilos prefixados que podem ser copiados para suas folhas de estilo.

Conclusão

É isso aí! O senhor aprendeu a configurar seu ambiente para obter o máximo em CSS usando ferramentas como CodePen, CodeKit, Gulp e Grunt. Tem alguma dúvida?

Na próxima lição, daremos uma olhada na criação de layouts de 12 colunas com flexbox. Para ter certeza de que receberá a lição, inscreva-se no curso Curso gratuito para iniciantes em flexbox.