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

Supported CSS

Nota: AMP para correo electrónico especifica restricciones de CSS adicionales que se describen en AMP para CSS compatible con correo electrónico.

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.

Los estilos pueden estar en el encabezado del documento o como atributos de style línea (consulte Agregar estilos a una página). Pero puede usar preprocesadores CSS y plantillas para crear páginas estáticas para administrar mejor su contenido.

 NOTA – Los componentes de AMP incluyen estilos predeterminados para facilitar en gran medida la creación de páginas adaptables. Estos estilos están definidos en el atributo amp.css.

Disallowed styles

The following styles aren’t allowed in AMP pages:

Estilo prohibido Descripción
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.

Recomendaciones de desempeño

These allowed styles should restrict values to the following for an optimal performance:

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

AMP pages can’t include external stylesheets, with the exception of custom fonts.

Más artículos – Consulta más información sobre las fuentes personalizadas en AMP.

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 amp.dev emplea Sass. Nosotros utilizamos Grow para crear las páginas AMP estáticas que conforman el sitio web amp.dev.

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">
  <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>AMP Project</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 cómo este código se convierte en código AMP HTML con formato, observa el código de cualquier página de amp.dev. (En Chrome, haz clic con el botón derecho y selecciona View Page Source.)