Système de mise en page AMPHTML

Présentation

L'objectif principal du système de mise en page est de garantir que les éléments AMP peuvent exprimer leur mise en page afin que le moteur d'exécution puisse déduire le dimensionnement des éléments avant que les ressources distantes, telles que JavaScript et les appels de données, ne soient terminées. Cela est important car cela réduit considérablement le rendu et améliore le défilement.

Dans cet esprit, le système de mise en page AMP est conçu pour prendre en charge des mises en page peu nombreuses mais flexibles qui offrent de bonnes garanties de performances. Ce système repose sur un ensemble d'attributs tels que layout, width, height, sizes et heights pour exprimer les besoins de mise en page et de dimensionnement de l'élément.

Comportement

Un élément AMP non conteneur (p. ex., layout != container) démarre dans le mode non résolu/non construit dans lequel tous ses enfants sont masqués à l’exception d’un caractère de remplacement (voir l'attribut placeholder). La charge utile de JavaScript et de données nécessaire à la construction complète de l’élément peut encore être en téléchargement et en cours d’initialisation, mais l’exécution AMP sait déjà comment dimensionner et disposer l’élément en s’appuyant uniquement sur les classes CSS et les attributs layout, width, height et media. Dans la plupart des cas, un caractère de remplacement placeholder, s’il est spécifié, est dimensionné et positionné pour prendre tout l’espace de l’élément.

Le placeholder est masqué dès que l'élément est créé et que sa première mise en page est terminée. À ce stade, l'élément doit avoir tous ses enfants correctement construits et positionnés et prêts à être affichés et à accepter l'entrée d'un lecteur. Ceci constitue le comportement par défaut. Chaque élément peut remplacer, par exemple, masquer le placeholder plus rapidement ou le conserver plus longtemps.

L’élément est dimensionné et affiché en fonction des attributs layout, width, height et media par le runtime. Toutes les règles de mise en page sont implémentées via CSS en interne. L’élément est considéré comme de « taille définie » si sa taille peut être déduite des styles CSS et ne change pas en fonction de ses enfants : disponibles immédiatement ou insérés dynamiquement. Cela ne signifie pas que la taille de cet élément ne peut pas changer. La mise en page peut être entièrement réactive comme c’est le cas avec les mises en page responsive, fixed-height, fill et flex-item. Cela signifie simplement que la taille ne change pas sans une action explicite de l'utilisateur, par exemple lors de l'affichage, du défilement ou du téléchargement de la publication.

Si l'élément n'a pas été configuré correctement dans PROD, il ne sera pas du tout affiché et en mode DEV, le runtime affichera l'élément avec état d'erreur. Les erreurs possibles incluent des valeurs invalides ou non prises en charge des attributs layout, width et height.

Attributs de mise en page

width et height

En fonction de la valeur de l'attribut layout, les éléments du composant AMP doivent avoir un attribut width et height qui contient une valeur de pixel entière. Le comportement de mise en page réel est déterminé par l'attribut layout comme décrit ci-dessous.

Dans quelques cas, si l'attribut width ou height n'est pas spécifié, le runtime AMP peut définir ces valeurs par défaut comme suit :

• amp-pixel : width et height sont réglés par défaut sur 0.
• amp-audio : les valeurs par défaut de width et height sont déduites du navigateur.

layout

AMP fournit un ensemble de mises en page qui spécifient le comportement d'un composant AMP dans la mise en page du document. Vous pouvez spécifier une mise en page pour un composant en ajoutant l'attribut layout avec l'une des valeurs spécifiées dans le tableau ci-dessous.

Exemple : une image adaptative simple, où la largeur et la hauteur sont utilisées pour déterminer le rapport hauteur/largeur.

<amp-img
src="/img/amp.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image"

> </amp-img>
> 

Valeurs prises en charge pour l'attribut layout :

sizes

Tous les éléments AMP qui prennent en charge la mise en page responsive prennent également en charge l’attribut sizes. La valeur de cet attribut est une expression de tailles décrite dans img sizes, mais étendue à tous les éléments, pas seulement aux images. En bref, l’attribut sizes décrit comment la largeur de l’élément est calculée en fonction des conditions du média.

Lorsque l'attribut sizes est spécifié avec les attributs width et height, l'attribut layout est défini par défaut sur responsive.

Exemple : utilisation de l'attribut sizes

Dans l'exemple suivant, si la fenêtre est plus large que 320px, l'image aura une largeur de 320px, sinon elle aura une largeur de 100vw (100 % de la largeur de la fenêtre).

<amp-img
src="https://acme.org/image1.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"

> </amp-img>
> 

disable-inline-width

L'attribut sizes définira un style intégré width sur l'élément. Lors de l'association de disable-inline-width avec sizes, l'élément AMP propage la valeur sizes vers la balise sous-jacente de l'élément, comme avec img imbriqué dans un amp-img, sans définir la valeur de width intégrée comme sizes le fait généralement dans AMP.

Exemple : utilisation de l'attribut disable-inline-width

Dans l'exemple suivant, la largeur de l'élément <amp-img> n'est pas affectée et l'attribut sizes n'est utilisé que pour sélectionner l'une des sources du srcset.

<amp-img
src="https://acme.org/image1.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"
disable-inline-width

> </amp-img>
> 

heights

Tous les éléments AMP qui prennent en charge la mise en page responsive prennent également en charge l'attribut heights. La valeur de cet attribut est une expression des tailles basée sur des expressions de média similaires à l'attribut img sizes, mais avec deux différences clés :

1. Elle s'applique à la hauteur et non à la largeur de l'élément.
2. Les valeurs en pourcentage sont autorisées, par exemple 86%. Si une valeur de pourcentage est utilisée, elle indique le pourcentage de la largeur de l'élément.

Lorsque l'attribut heights est spécifié avec width et height, layout est défini par défaut sur responsive.

Exemple : utilisation de l'attribut heights

Dans l'exemple suivant, la hauteur de l'image sera fixée par défaut à 80 % de la largeur, mais si la fenêtre est plus large que 500px, la hauteur sera limitée à 200px. Étant donné que l'attribut heights est spécifié avec width et height, la mise en page sera par défaut responsive.

<amp-img
src="https://acme.org/image1.png"
width="320"
height="256"
heights="(min-width:500px) 200px, 80%"

> </amp-img>
> 

media

La plupart des éléments AMP prennent en charge l'attribut media. La valeur de media est une requête multimédia. Si la requête ne correspond pas, l'élément n'est pas du tout rendu, et ses ressources et éventuellement les ressources de ses enfants ne seront pas récupérées. Si la fenêtre du navigateur change de taille ou d'orientation, les requêtes média sont réévaluées et les éléments sont masqués et affichés en fonction des nouveaux résultats.

Exemple : utilisation de l'attribut media

Dans l'exemple suivant, nous avons 2 images avec des requêtes médias mutuellement exclusives. En fonction de la largeur de l'écran, l'une des deux images sera récupérée et rendue. L'attribut media est disponible sur tous les éléments AMP, il peut donc être utilisé avec des éléments non illustrés, tels que des annonces.

<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width="466"
height="355"
layout="responsive"

> </amp-img>
> <amp-img
>   media="(max-width: 649px)"
>   src="narrow.jpg"
>   width="527"
>   height="193"
>   layout="responsive"
> </amp-img>
> 

placeholder

L'attribut placeholder peut être défini sur n'importe quel élément HTML, pas uniquement sur les éléments AMP. L'attribut placeholder indique que l'élément marqué avec cet attribut agit comme un caractère de remplacement pour l'élément AMP parent. S'il est spécifié, un élément d'espace réservé doit être un enfant direct de l'élément AMP. Par défaut, l'espace réservé est immédiatement affiché pour l'élément AMP, même si les ressources de l'élément AMP n'ont pas été téléchargées ou initialisées. Une fois prêt, l'élément AMP masque généralement son espace réservé et affiche le contenu. Le comportement exact par rapport à l'espace réservé dépend de l'implémentation de l'élément.

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>

fallback

L'attribut fallback peut être défini sur n'importe quel élément HTML, pas uniquement sur les éléments AMP. Une solution de secours est une convention qui permet à l'élément de communiquer au lecteur que le navigateur ne prend pas en charge l'élément. S'il est spécifié, un élément de secours doit être un enfant direct de l'élément AMP. Le comportement exact de l'élément de secours dépend de l'implémentation de l'élément.

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">

  <div fallback>Cannot play animated images on this device.</div>
</amp-anim>

noloading

L'attribut noloading indique si l'indicateur de chargement doit être désactivé pour cet élément. De nombreux éléments AMP sont autorisés à afficher un indicateur de chargement, qui est une animation de base indiquant que l'élément n'est pas encore complètement chargé. Les éléments peuvent désactiver ce comportement en ajoutant cet attribut.

(tl;dr) Résumé des exigences et des comportements de mise en page

Le tableau suivant décrit les paramètres acceptables, les classes CSS et les styles utilisés pour l'attribut layout. Notez que :

1. Toute classe CSS marquée avec le préfixe -amp- et tout élément avec le préfixe i-amp- sont considérés comme internes à AMP et leur utilisation dans les feuilles de style des utilisateurs n'est pas autorisée. Ils sont présentés ici simplement à titre informatif.
2. Même si width et height sont spécifiés dans le tableau selon les besoins, les règles par défaut peuvent s'appliquer comme c'est le cas avec amp-pixel et amp-audio.