Dica Rápida: Facilitando CSS em Linha do AMP com Jade ou PHP

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

O Projeto AMP provê uma forma relativamente simples de implementar vários tipos de otimização de páginas web. Leia nossa resenha completa sobre o que é o projeto e o que ele faz em Projeto AMP: Realmente Torna Mais Rápido Seus Sites?.

Resumindo a implementação do AMP:

Começaremos com um projeto base que carrega o JavaScript necessário
Usaremos alguns elementos HTML customizados
Seguiremos algumas boas práticas

Ao finalizar os três pontos acima, o resto da otimização é administrado por trás dos panos, para você. Além disso, páginas AMP devem passar num teste de validação e, para isso, deve-se seguir todas as boas práticas.

Uma das regras AMP pode ser um tanto complicada durante o desenvolvimento: todo CSS customizado deve ser carregado em linha na seção head, entre os elementos <style amp-custom>...</style>.

Se criarmos o CSS diretamente na seção head, encontraremos problemas e limitações. Caso precise alterar o CSS em várias páginas, será bem demorado e não poderá usar ferramentas como pré-processadores ou minificadores.

Por isso, se precisar criar mais de um modelo AMP, você deve buscar uma forma de autorar seu CSS em uma folha de estilo externa, mantendo seu fluxo de trabalho normal, mas ainda conseguir passar pela validação AMP, movendo todo seu CSS para a seção head.

Nessa dica rápida, aprenderemos duas maneiras de fazer isso.

Método 1: Com Jade

Jade é uma linguagem equivalente a um pré-processador HTML. Ela permite escrever HTML conciso e reduzido que compila em HTML normal, mas, em relação ao que precisamos, também permite importar arquivos CSS e imprimir seus conteúdos diretamente onde desejar.

Nesse método, escreveremos modelos AMP usando a sintaxe Jade e importaremos arquivos CSS externos na seção head de nossos modelos. Esse é um dos melhores métodos que podemos usar para criar páginas AMP se precisarmos de HTML estático. Eis como faremos.

Crie uma Folha de Estilo Externa.

A primeira coisa que faremos é preparar a folha de estilo externa que importaremos em nossos modelos AMP. Criaremos um diretório para guardar nosso projeto e, dentro dele, criaremos uma nova folha de estilo chamada "style.css".

Escreva algum CSS básico em sua folha de estilo, qualquer coisa, desde que o arquivo fique menor que 50kb, seguindo uma das regras de validação do AMP.

Se quiser algum CSS de teste para começar, adicione o código abaixo:

1	body { background: #3498db; color: #fff }

Código Base Jade para AMP com CSS Import

O próximo passo é adicionar o código base do AMP, mas com duas diferenças significativas. Uma, usaremos a sintaxe Jade ao invés de HTML puro; duas, importaremos nosso arquivo de folha de estilo externo, "style.css".

Crie um novo arquivo no diretório do seu projeto, chamado "index.jade" e adicione o código a seguir:

doctype
html(amp, lang="en")
  head
    meta(charset="utf-8")
    title AMP via Jade
    link(rel="canonical", href="/index.html")
    meta(name="viewport", content="width=device-width,minimum-scale=1,initial-scale=1")
    script(type="application/ld+json").
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    | 
    |<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    script(async, src="https://cdn.ampproject.org/v0.js")
    style(amp-custom)
      include style.css
  body
    h1 This is a Jade based AMP page.

O código acima é o mesmo que você encontra na documentação do AMP, porém, convertido para sintaxe Jade.

Você perceberá que temos, ao final do código:

1	style(amp-custom)
2	include style.css

A linha com style(amp-custom) retornará os elementos <style amp-custom>...</style> requeridos. Identada na linha seguinte, você verá include style.css. Isso usa a funcionalidade de inclusão da Jade, importando o conteúdo do seu arquivo "style.css" e o retornará dentro do elemento style.

Compilação da Jade com Prepros

Agora que temos todo código necessário para esse método, precisaremos compilar o modelo Jade. Podemos fazer isso através de um executador de tarefas como Gulp ou Grunt, ou através de um aplicativo.

Para projetos simples, onde queremos apenas que os arquivos sejam compilados, podemos usar o Prepros. Você precisará apenas da versão de testes/gratuita para esse método.

Após instalar e executar o Prepros, basta arrastar o diretório do projeto para o aplicativo e ele encontrará os arquivos Jade. Ele começará a observar o projeto por mudanças, assim, precisará apenas alterar seu arquivo Jade ou CSS e o Propos recompilará seu modelo.

Devemos ter um novo arquivo no diretório, index.html, e dentro dele você verá o código base HTML completo e compilado com o CSS customizado em linha:

<!DOCTYPE html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP via Jade</title>
    <link rel="canonical" href="/index.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script> 
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <style amp-custom>body { background: #3498db; color: #fff }
    </style>
  </head>
  <body>
    <h1>This is a Jade based AMP page.</h1>
  </body>
</html>

Pré-visualização do Site com MAMP

A próxima coisa que devemos fazer é pré-visualizar nosso site. Embora seja possível carregar um arquivo AMP direto de um arquivo em um navegador, a boa prática é usar um servidor local.

Prepos vem com pré-visualizador munido de servidor local que atualiza quando mudanças acontecem em seu projeto. Contudo, você não poderá usá-lo com AMP (infelizmente). Uma vez que o Prepos insere JavaScript customizado para habilitar o recarregamento automático e não se pode ter JavaScript customizado em páginas AMP. O validador perceberá isso e lançará um erro.

Por essa razão, recomendo criar um ambiente local usando MAMP para Mac ou Windows. Você seguirá o mesmo processo que fizemos aqui, a diferença é que o diretório do projeto a ser criado será dentro do diretório "htdocs" do MAMP, antes de arrastar para a interface do Prepros. Quando o MAMP está em execução, ele permitirá a pré-visualização em uma URL como http://localhost:8888/myproject.

Com essa abordagem você terá o melhor dos dois mundos: uma pré-visualização local sem erros de validação com o MAMP e compilação automatica da Jade com Prepros.

Método 2: Com PHP

Se você não precisa gerar modelos HTML estáticos, você tem a opção de usar PHP para retornar, dinamicamente, sua folha de estilo na seção head. Essa abordagem, claramente, requer menos coisas, mas apenas é apropriada se seu projeto (e sua hospedagem) permite e/ou requer PHP.

Incidentalmente, mesmo que não tenha usado PHP antes e apenas queira criar HTML puro ao invés da sintaxe Jade, pode-se usar essa técnica.

Comece criando um arquivo index com o código base padrão do AMP, mas, ao invés de nomear o arquivo "index.html" nomei-o de "index.php":

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Se já tiver trabalhando em um modelo AMP, você pode apenas renomeá-lo, alterando a extensão para ".php", criando, assim, um arquivo PHP. Por exemplo, "about.html" viraria "about.php". (Apenas garanta que os links internos da página também sejam alterados).

Agora, crie uma folha de estilo externa e nomeia de "style.css" no seu diretório raiz. Se tiver algum modelo que já use, corte qualquer CSS que tenha dentro do elemento <style amp-custom>...</style> e cole-o nessa folha de estilo externa.

Para incluir CSS externo na seção head do seu arquivo AMP, apenas cole essa linha de código PHP dentro do elemento <style amp-custom>...</style>:

1	<?php readfile( getcwd() . "/style.css"); ?>

Destrinchando

Se não estiver interessado em PHP, você pode deixá-lo como está, sabendo que esse trecho permitirá que o PHP busque a folha de estilo do servidor, leia o conteúdo e cole-o lá. Contudo, se quiser saber mais, destrinchemo-nos:

Primeiro, temos de criar os elementos de abertura de código PHP, <?php ... ?>. Isso permite que o servidor saiba que aquele trecho é código PHP, não simples HTML.

Então, usamos a função readfile(). Essa função procura o arquivo dentro dos parênteses, no servidor, lê o conteúdo e imprime o resultado em linha.

Entre os parênteses, temos a função getcwd(). Essa função retorna o caminho do diretório o qual o arquivo PHP em execução está localizado.

Por fim, temos os carecteres (texto normal) "/style.css" que especifica o nome da nossa folha de estilos, relativamente à localização do nosso arquivo PHP. E entre esses caracteres e a função getcwd() colocamos um ponto . concatenando (conectando) os dois, criando o caminho integral da folha de estilo. Por exemplo, usando o MAMP, o caminho seria algo como “/Applications/MAMP/htdocs/myproject/style.css”.

Você pode usar esse trecho em quantos modelos PHP você precisar e qualquer mudança realizada na sua folha de estilo externa será atualizada em todos os seus modelos.

Pré-visualização de Site com MAMP

Como no método com Jade, uma ótima forma de pré-visualizar suas páginas AMPs com PHP é usar o MAMP, que suporta PHP. Instale o MAMP e crie o diretório do seu projeto na pasta "htdocs" e você poderá pré-visualizar seu site com uma URL no estilo http://localhost:8888/myproject sem configuração adicional.

Finalizando

Cobrimos duas maneiras que podemos manter nossas folhas de estilo e nosso fluxo de desenvolvimento CSS tradicional, e ainda assim passar na validação AMP usando CSS em linha. Resumamos, rapidamente, cada uma.

Método 1: Jade
Crie seus modelos na sintaxe Jade e use include para retornar o conteúdo da folha de estilo externa na seção head. Compile com Prepros e pré-visualize com MAMP.
Método 2: PHP
Escreve seu modelo usando HTML normal dentro de arquivo ".php". Inclua o trecho PHP para imprimir o conteúdo da sua folha de estilo externa na seção head. Pré-visualize com MAMP.

Com relação a qual método escolher, vai depender dos requerimentos do seu projeto, mas, em linhas gerais:

Se trabalhar com sites estáticos e já trabalha com Jade ou quer aprender, o método um deveria ser sua escolha.
Se seu site será (ou pode ser) dinâmico e com acesso ao PHP, ou não quer usar Jade, o método dois é uma solução rápida e fácil.

Independente do método, você desenvolverá CSS como costumeiramente, e as mudanças refletirão na hora, em seus modelos, e poderá usar pré-processadores e ferramentas de otimização, além de usar CSS em linha como AMP requer.

Espero que tenha ajudado a deixar seu desenvolvimento com AMP um pouco mais fácil.