Estilo e layout
O estilo e o layout nas páginas AMP em HTML são muito semelhantes aos de páginas HTML normais. Nos dois casos, você usará CSS.
No entanto, as AMP limitam o uso de CSS por motivos de desempenho e usabilidade ao mesmo tempo em que ampliam os recursos do design responsivo com recursos como marcadores e substitutos, direção artística avançada por meio de srcset e o atributo de layout para controlar melhor a forma que os elementos são exibidos.
layout="responsive" neles. Para saber mais sobre o design responsivo nas AMP, acesse Criar páginas AMP responsivas.
Adicionar estilos a uma página
Adicione todos os CSS dentro de uma tag <style amp-custom> no cabeçalho do documento. Por exemplo:
<!doctype html> <head> ... <style amp-custom> /* any custom styles go here. */ body { background-color: white; } amp-img { border: 5px solid black; } amp-img.grey-placeholder { background-color: grey; } </style> ... </head>
<style amp-custom>, pois não é permitido ter mais de uma nas AMP. Defina os estilos de componentes com seletores de classe ou elemento usando propriedades CSS comuns. Por exemplo:
<body> <p>Hello, Kitty.</p> <amp-img class="grey-placeholder" src="https://placekitten.com/g/500/300" srcset="/img/cat.jpg 640w, /img/kitten.jpg 320w" width="500" height="300" layout="responsive"> </amp-img> </body>
Elementos de layout responsivos
Especifique o tamanho e a posição de todos os elementos AMP visíveis fornecendo os atributos width e height. Esses atributos indicam a proporção do elemento, que pode ser dimensionado com o contêiner.
Defina o layout como responsivo. Isso dimensionará o elemento para a largura do seu elemento de contêiner e redimensionará a altura automaticamente para a proporção indicada nos atributos de largura e altura.
Use marcadores e substitutos
A compatibilidade interna com marcadores e substitutos permite que seus usuários nunca precisem olhar novamente para uma tela em branco.
Seja o diretor de arte das suas imagens
As AMP são compatíveis com os atributos srcset e sizes para que você tenha controle preciso sobre as imagens que serão carregadas em cada cenário.
Validar seus estilos e layout
Use o validador de AMP para testar o CSS e os valores de layout da sua página.
O validador confirma se o CSS da sua página não ultrapassa o limite de 50 mil bytes, verifica os estilos desativados e garante que o layout da página seja compatível e formatado corretamente. Veja também esta lista completa de erros de estilo e layout.
Exemplo de erro no console de uma página com CSS que ultrapassa o limite de 50 mil bytes: