CSS compatibles

Comme toutes les pages Web, les pages AMP utilisent le langage CSS pour les styles, mais vous ne pouvez pas référencer des feuilles de style externes (à l'exception des polices personnalisées). Certains styles sont également interdits en raison de conséquences sur les performances ; les attributs de style intégrés ne sont pas autorisés.

Tous les styles doivent se trouver dans l'en-tête du document (voir Ajouter des styles à une page). Cependant, vous pouvez utiliser des préprocesseurs CSS et des modèles pour créer des pages statiques afin de mieux gérer votre contenu.

Remarque : Les composants AMP ont des styles par défaut pour faciliter la création de pages responsives. Ces styles sont définis dans l'amp.css.

Utiliser les préprocesseurs CSS

La sortie générée par des préprocesseurs fonctionne aussi bien avec les pages AMP qu'avec les autres pages Web. Par exemple, le site amp.dev utilise Sass. Nous utilisons Grow pour créer les pages AMP statiques qui composent le site amp.dev.

Lorsque vous utilisez des préprocesseurs, accordez une attention particulière à ce que vous incluez ; chargez seulement ce que vos pages utilisent. Par exemple, head.html inclut tout le balisage AMP requis et le CSS intégré à partir des fichiers sources *.scss. Il comprend également, entre autres, le script d'élément personnalisé pour amp-youtube, afin que de nombreuses pages sur le site puissent inclure des vidéos YouTube intégrées.

 

<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="shortcut 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" type="text/css">
  <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>

Pour voir comment ce qui précède se traduit en langage AMP HTML formaté, affichez la source de toute page dans amp.dev. (Dans Chrome, faites un clic droit, puis sélectionnez Afficher la source de la page.)

Styles interdits

Les styles suivants ne sont pas autorisés dans les pages AMP :

Style interdit	Description
Attributs de style intégrés	Tous les styles doivent être définis dans l'en-tête `<head>` de la page, au sein d'une balise `<style amp-custom>`.
`!`qualificateur important	Utilisation interdite. Il s'agit d'une condition nécessaire pour permettre à l'AMP de faire appliquer les règles de dimensionnement de ses éléments.
`<link rel="stylesheet">`	Interdit à l'exception des polices personnalisées.
`*` (sélecteur universel)	Implications négatives sur les performances ; pourrait être utilisé pour contourner d'autres restrictions de sélection.
`:not()`	Peut être utilisé pour simuler le sélecteur universel.
Pseudo-sélecteurs, pseudo-classes et pseudo-éléments	Les pseudo-sélecteurs, pseudo-classes et pseudo-éléments ne sont autorisés que dans les sélecteurs qui contiennent des noms de balises, ces derniers ne devant pas commencer par `amp-`. Exemple correct : `a:hover, div:last-of-type` Exemple incorrect : `amp-img:hover, amp-img:last-of-type`
Noms de classes `-amp-` et de balises `i-amp-`	Les noms de classes, dans les feuilles de styles d'auteur, ne peuvent pas commencer par la chaîne `-amp-`. Ils sont réservés à un usage interne par l'exécution AMP. Il en résulte que la feuille de style de l'utilisateur ne peut pas faire référence à des sélecteurs CSS pour les classes `-amp-` et les balises `i-amp`.

Propriétés d'animations et de transitions sur liste blanche

L'AMP accepte seulement les transitions et les animations de propriétés qui peuvent faire l'objet d'une accélération GPU dans les navigateurs courants. Le projet AMP accepte actuellement opacity, transform et -vendorPrefix-transform.

Dans les exemples suivants, <property> doit être sur liste blanche :

transition <property> (Also -vendorPrefix-transition)
@ @keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)

La propriété overflow (et overflow-y, overflow-x) ne peut pas utiliser le style “auto” ni “scroll”. Aucun élément défini par l'utilisateur dans un document AMP ne peut avoir une barre de défilement.

Exception : les polices personnalisées

Les pages AMP ne peuvent pas inclure de feuilles de style externes, à l'exception des polices personnalisées. Les deux méthodes acceptées pour le référencement des polices personnalisées sont les balises de liens pointant vers les fournisseurs de polices figurant sur liste blanche et l'inclusion de @font-face.

Les fournisseurs de polices ne peuvent être sur liste blanche que s'ils adoptent les intégrations CSS uniquement et utilisent le protocole HTTPS. Actuellement, seules ces origines figurent sur liste blanche et sont autorisées à offrir des polices via les balises de liens :

Exemple de balise de lien pointant vers le fournisseur de polices sur liste blanche, Google Fonts :

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

Vous pouvez aussi utiliser @font-face. Les polices incluses via @font-face doivent être récupérées via le schéma HTTP ou HTTPS.

Written by @Meggin
with contributions from @pbakaus , @CrystalOnScript , @bpaduch , @choumx