Al igual que el resto de las páginas web, las páginas AMP extraen su estilo de un elemento CSS, pero en ellas no se puede hacer referencia a hojas de estilo externas (salvo en el caso de las fuentes personalizadas). Además, algunos estilos no están permitidos porque afectan al rendimiento. Por ejemplo, los atributos de estilo insertados no se admiten.

Todos los estilos deben encontrarse en el encabezado del documento (consulta Agregar estilos a una página). Pero puedes utilizar preprocesadores CSS y plantillas para crear páginas estáticas y así mejorar la gestión del contenido.

Estilos no permitidos

Los siguientes estilos no están permitidos en las páginas AMP:

Estilo prohibido Descripción
Atributos de estilo insertados Todos los estilos deben estar definidos en el campo <head> de la página, en una etiqueta <style amp-custom>.
Calificador !important   Su uso no está permitido. Este es un requisito necesario para habilitar que AMP aplique sus normas relativas al tamaño de los elementos.
<link rel=”stylesheet”> No está permitido, salvo en el caso de las fuentes personalizadas.
Nombres de las clases -amp- y de las etiquetas i-amp-   Los nombres de las clases que se incluyan en las hojas de estilo del autor no pueden empezar con la cadena -amp-. Están reservados para usarse internamente durante el tiempo de ejecución de AMP. Además, la hoja de estilo del usuario no puede hacer referencia a los selectores de CSS de las clases -amp- y las etiquetas i-amp.
behavior, -moz-binding Estas propiedades no están permitidas por motivos de seguridad.

Estilos restringidos

Los siguientes estilos están permitidos, pero están restringidos en lo que respecta a los valores que admiten:

Estilo restringido Descripción
Propiedad transition   Solo propiedades aceleradas por GPU (actualmente opacity, transform y -vendorPrefix-transform).
@keyframes {...} Solo propiedades aceleradas por GPU (actualmente opacity, transform y -vendorPrefix-transform).

La excepción de las fuentes personalizadas

Las páginas AMP no pueden incluir hojas de estilo externas, salvo en el caso de las fuentes personalizadas.

Usar preprocesadores CSS

El resultado generado de los preprocesadores funciona tan bien en AMP como en cualquier otra página web. Por ejemplo, el sitio web ampproject.org emplea Sass. Nosotros utilizamos Grow para crear las páginas AMP estáticas que conforman el sitio web ampproject.org.

Cuando utilices preprocesadores, presta especial atención a los elementos que incluyes. Debes cargar solo lo que utilicen tus páginas. Por ejemplo, head.html incluye todas las etiquetas AMP que se necesitan y el CSS insertado de los archivos de origen de *.scss. También incluye la secuencia de comandos personalizada de amp-youtube, entre otras, para que muchas páginas del sitio web puedan incluir vídeos de YouTube insertados.


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
  <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">

  <title>El proyecto Accelerated Mobile Pages</title>
  <link rel="icon" href="/static/img/amp_favicon.png">
  <link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
  <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 cómo este código se convierte en código AMP HTML con formato, observa el código de cualquier página de ampproject.org. (En Chrome, haz clic con el botón derecho y selecciona View Page Source.)