AMP HTML s’étoffe avec de nouvelles balises et des classes CSS dynamiques

Mathieu Chartier Programmation 0 commentaire

Projet Accelerated Mobile Pages (AMP HTML)

Le projet Accelerated Mobile Pages (AMP) ne cesse de s'étoffer et d'élargir ses champs d'actions sur le plan du code AMP HTML. Le blog officiel a annoncé le 24 mai 2016 la sortie de 3 nouvelles balises ainsi que l'arrivée de classes dynamiques en CSS. Passons en revue ces nouveaux éléments...

Rappelons avant tout que l'objectif de l'AMP est d'accélérer considérablement l'affichage d'un maximum de contenus grâce à un système de cache novateur et efficace. Plus l'AMP HTML recouvrira de types différents de contenu, plus les pages web pourront être chargées rapidement (ou tout du moins, plus des pages web pourront opter pour AMP). Après avoir mis en place les balises classiques comme amp-video, amp-audio ou amp-img par exemple, le projet s'attèle désormais aux contenus bien plus spécifiques générés via des codes Javascript, comme les menus en sidebar déroulante, les menus accordéons ("accordion"), etc.

La balise AMP HTML <amp-sidebar>

Les menus latéraux en slide (via une sidebar déroulante) sont monnaie courante dans pléthores de thèmes mobiles, et il peut se révéler intéressant d'accélérer considérablement leur temps de chargement. Les concepteurs du projet AMP ont donc pensé à la création d'une balise <amp-sidebar> pour contrôler ce type de média, et elle se révèle assez simple à mettre en oeuvre (la facilité de mise en oeuvre est relative, j'évoque cela si vous partez d'une feuille blanche, pas si vous devez modifier dynamiquement un menu latéral en version AMP HTML).

Certaines règles sont à respecter, comme le fait de n'avoir droit qu'à une seule <amp-sidebar> par page, d'une hauteur maximale de 100vh (donc une hauteur d'écran complète) ou encore que seulement certaines balises AMP HTML peuvent être contenus dans une sidebar de ce type.

Pour la mise en oeuvre, il faut retenir trois étapes, et c'est tout :

  1. Ajoutez le script spécifique à la balise <amp-sidebar> (hormis les quelques balises généralistes, toutes ont un script éponyme) : <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>.
  2. Entourez le bloc de la sidebar dynamique latérale par les balises <amp-sidebar> et </amp-sidebar>, en ajoutant absolument un attribut "id" et un attribut "layout" (avec la valeur "nodisplay", seule option possible actuellement). L'attribut ID sert à donner un nom à la sidebar dynamique, qui sera utilisé dans l'étape 2 de la mise en place.
  3. Ajoutez des boutons d'ouverture et de fermeture pour la sidebar avec un attribut spécifique "on" qui va indiquer quelle action réaliser. Voici les 3 possibilités autorisées :
    • on="tap:sidebarID.toggle" => Génère un bouton à double usage (toggle) qui permet un coup sur deux d'ouvrir ou de fermer la sidebar.
    • on="tap:sidebarID.open" => Ouvre la sidebar masquée à l'origine.
    • on="tap:sidebarID.close" => Ferme la sidebar pour la masquer à nouveau.

L'exemple ci-dessous est certainement plus parlant pour les néophytes :

<amp-sidebar id='sidebar-menu' layout='nodisplay'>
  <ul>
    <li>Item de menu 1</li>
    <li>Item de menu 2</li>
    <li>Item de menu 3</li>
  </ul>
  <button on="tap:sidebar-menu.close">Fermer</button>
</amp-sidebar>

Ce qui donne en image quelque chose comme ceci (exemple au ralenti, et pourtant déjà rapide) :

Exemple d'usage de la balise amp-sidebar

Créez des menus accordéon avec <amp-accordion>

L'usage de menus accordéon (ou même de zone en montrer/cacher) est très courant sur le web, et les créateurs du projet AMP ne l'ont pas oublié. C'est pourquoi ils ont créé la balise <amp-accordion> pour répondre à ce besoin. Si son usage est assez évident, il faut bien avouer que son passage en AMP HTML a limité son champ d'action à cause des contraintes que la balise impose, dont voici quelques extraits :

  • Les balises <amp-accordion> et </amp-accordion> encadrent le bloc en accordéon, et peuvent contenir une ou plusieurs <section>...</section> (qui composent les éléments modulaires de l'accordéon).
  • Chaque section doit contenir exactement 2 éléments :
    • le premier élément est un titre ou une section d'entête, donc seules les balises <h1> à <h6> ou <header> sont autorisées ;
    • le second élément est le bloc masqué puis affiché, qui peut aussi bien être un paragraphe <p>, une division de page <div> ou même d'autres éléments directement en AMP HTML comme <amp-img>.
  • Vous pouvez ajouter un attribut "expanded" dans une section pour indiquer que le bloc est déjà ouvert au chargement de la page.

Il suffit de tapoter (mobile) ou de cliquer sur un titre pour ouvrir la section masquée, c'est aussi simple que cela. Comme toujours, n'oubliez pas le script spécifique pour faire fonctionner la balise : <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>.

Voici un exemple simple :

<amp-accordion>
  <section expanded>
    <h2>Titre</h2>
    <p>Paragraphe montré par défaut via l'attribut "expanded".</p>
  </section>
  <section>
    <h2>Titre 2</h2>
    <div>Contenu intégré dans un div et masqué par défaut.</div>
  </section>
  <section>
    <h2>Titre 3</h2>
    <amp-img src="image/amp-img.png" width="300" height="300"></amp-img>
  </section>
</amp-accordion>

En soi, cela semble simple à mettre en oeuvre, mais si vous devez effectuer une transformation dynamique d'un menu accordéon classique en version AMP HTML, c'est une autre histoire... Qui plus est, la limitation des deux blocs par section peut s'avérer peu pratique dans quelques cas de figures (mais c'est contournable), mais cela reste globalement simple à mettre en place. Voici un Gif animé fourni par le blog officiel pour représenter ce type de menu.

Exemple d'usage de la balise <amp-accordion> pour créer des menus accordéons en AMP HTML

Partagez des contenus vers les réseaux sociaux avec <amp-social-share>

Difficile de ne pas comprendre l'objectif de la balise <amp-social-share> à la lecture de son nom. L'AMP HTML se dote donc d'une balise générique pour unifier les boutons de partage vers les réseaux sociaux. L'inconvénient de cette balise est son implémentation, pas du tout en adéquation avec des boutons de partage classiques (créés via des balises <a> ou <button>), il faudra donc réécrire complètement le code pour obtenir des boutons valides...

Tout se passe au sein de la balise ouvrante <amp-social-share>. Ce sont donc les attributs intégrés dans la balise ouvrante qui ont une importance capitale. Encore une fois, n'oubliez pas le script spécifique, mais vous devez commencer à vous en douter... :D

La balise accueille plusieurs attributs, dont certains sont optionnels :

  • type : indique le réseau ciblé, qui sont "linkedin", "twitter", "facebook", "gplus", "pinterest" et "email". Si vous souhaitez opter pour un autre réseau, il est possible de créer votre propre type de bouton, comme pour "whatsapp" ou autre, il suffit alors d'ajouter un attribut "data-share-endpoint" pour indiquer comment clôturer le protocole du réseau en question (pas si simple pour les profanes...).
  • width et height : indique la hauteur et la largeur des boutons.
  • data-param-text : précise le texte que l'on souhaite afficher lors du partage.
  • data-param-url : fournit l'URL à partager sur les réseaux sociaux.

Par défaut, la documentation recommande de fournir les images des boutons en CSS, via un "background-image". Mais il semble tout-à-fait possible d'intégrer une balise <amp-img> entre la balise ouvrante <amp-social-share> et la fermante </amp-social-share>, donc vous êtes libre sur ce point.

Voici un exemple succinct :

<amp-social-share type="linkedin" width="50" height="50"
  data-param-text="Texte affiché pour la page partagée sur Linkedin"
  data-param-url="https://www.site.com/page-partagee">
</amp-social-share>

Vers des classes CSS dynamiques en AMP HTML ?

Clôturons notre tour d'horizon des nouveautés AMP par l'intégration de classes CSS dynamiques directement en AMP HTML. Cela ne devrait pas être utile pour une majorité d'utilisateurs à ce jour, mais peut-être qu'à terme, il deviendra incontournable d'en passer par là...

Côté intégration, j'avoue que pour une fois, je ne peux pas dire que c'est difficile tant c'est simple à mettre en oeuvre. Il suffit uniquement d'ajouter un script qui active les classes CSS dynamiques :

<script async custom-element="amp-dynamic-css-classes" src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"></script>

Une fois la balise de script mise en place, AMP va générer automatiquement une ou deux classes CSS dynamiques :

  • amp-referer-NOM_DU_REFERER : la classe amp-referer récupère dynamiquement l'URL de la page référente et créé trois classes, comme amp-referer-www-site-com, amp-referer-site-com et amp-referer-com. L'intérêt peut sembler limité mais j'y vois surtout l'occasion d'enregistrer automatiquement les URL référentes via un système en AMP. On peut aussi imaginer une modification du style spécifique en fonction du referer (cela peut même frôler le cloaking sur Google...), etc.
  • amp-viewer : la classe s'ajoute si la page est ouverte au sein d'un conteneur (une iframe par exemple), et non pas dans le navigateur à part entière.