AMP
PT
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Русский Türkçe 中文 Polski Tiếng việt

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).