AMP

CSS compatível

Assim como todas as páginas da Web, as páginas AMP são estilizadas com CSS. Contudo, não é possível fazer referência a folhas de estilos externas (exceto fontes personalizadas). Além disso, alguns estilos não são permitidos devido ao impacto que têm no desempenho. Por exemplo, os atributos de estilo in-line.

Todos os estilos precisam estar no cabeçalho do documento (veja Adicionar estilos a uma página). É possível usar pré-processadores e modelos CSS para criar páginas estáticas e gerenciar melhor seu conteúdo.

Os componentes das AMP possuem estilos padrão para facilitar a criação de páginas responsivas. Esses estilos estão definidos em amp.css.

Estilos não permitidos

Os estilos a seguir não são permitidos em páginas AMP:

Estilo banido Descrição
Atributos de estilo in-line Todos os estilos precisam ser definidos no <head> da página, na tag <style amp-custom>.
Qualificador !important O uso não é permitido. Este é um requisito necessário para permitir que as AMP executem suas regras de dimensionamento de elementos.
<link rel=”stylesheet”> Não são permitidos, exceto fontes personalizadas.
Classe -amp- e nomes de tags i-amp- Nas folhas de estilo do autor, os nomes de classe não podem iniciar com a string -amp-. Estas strings são reservadas para uso interno no tempo de execução das AMP. A folha de estilo do usuário não pode fazer referência a seletores de CSS para classes -amp- e tags i-amp.

Estilos restritos

Os estilos a seguir são permitidos. Contudo, há restrições em relação à compatibilidade deles com alguns valores:

Estilo restrito Descrição
Propriedade transition Somente propriedades aceleradas por GPU (no momento opacity, transform e -vendorPrefix-transform).
@keyframes {...} Somente propriedades aceleradas por GPU (no momento opacity, transform e -vendorPrefix-transform).

Exceção: fontes personalizadas

As páginas AMP não podem incluir folhas de estilos externas, exceto fontes personalizadas.

Saiba mais sobre fontes personalizadas nas AMP.

Como usar pré-processadores de CSS

O resultado gerado pelos pré-processadores é tão bom nas AMP como em qualquer outra página da Web. Por exemplo, o site amp.dev usa Sass. Usamos Grow para criar as páginas AMP estáticas que compõem o site amp.dev.

Tome cuidado com o que você inclui ao usar os pré-processadores. Carregue somente aquilo que as páginas usam. Por exemplo, head.html inclui toda a marcação das AMP necessária e a CSS in-line dos arquivos de origem *.scss. Isso também inclui o script do elemento personalizado para amp-youtube, entre outros, fazendo com que diversas páginas do site possam incluir vídeos incorporados do YouTube.



<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">
  <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">

  <title>Projeto de AMP</title>
  <link rel="icon" href="/static/img/amp_favicon.png">
  <link rel="canonical" href="{{doc.url}}">
  <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet">
  <style amp-custom>
  {% include "/assets/css/main.min.css" %}
  </style>

  <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>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>

Para ver como o conteúdo acima se traduz em uma AMP em HTML formatada, veja a fonte de qualquer página em amp.dev. (No Chrome, clique com o botão direito e View Page Source).