AMPHTML Layoutsystem

Überblick

Das Hauptziel des Layoutsystems besteht darin, sicherzustellen, dass AMP Elemente ihr Layout so ausdrücken können, dass die Runtime die Größe von Elementen ableiten kann, bevor Remote Ressourcen wie JavaScript und Datenaufrufe abgeschlossen wurden. Dies ist wichtig, um Sprünge und Verzögerungen beim Rendern und Scrollen erheblich zu reduzieren.

Vor diesem Hintergrund ist das AMP Layoutsystem so konzipiert, dass es nur wenige, aber dafür flexible Layouts unterstützt, die eine stabile Leistung garantieren können. Dieses System stützt sich auf eine Reihe von Attributen wie layout, width, height, sizes und heights, um das Layout und den Größenbedarf von Elementen auszudrücken.

Verhalten

Ein AMP Element, das kein Container ist (d. h. layout != container), wird im nicht aufgelösten/nicht erstellten Modus gestartet, in dem alle untergeordneten Elemente bis auf einen Platzhalter ausgeblendet sind (siehe placeholder). Selbst wenn das JavaScript und die Nutzdaten, die notwendig sind, um das Element vollständig zu konstruieren, noch heruntergeladen und initialisiert werden, kennt die AMP Runtime bereits die Größe und das Layout der Elemente, da sie sich auf die CSS Klassen und die Attribute layout , width , height und media beruft. In den meisten Fällen wird ein placeholder (falls angegeben) so dimensioniert und positioniert, dass er den gesamten Platz des Elements einnimmt.

Der placeholder wird ausgeblendet, sobald das Element erstellt und sein erstes Layout vollständig ist. Zu diesem Zeitpunkt wird erwartet, dass das Element alle untergeordneten Elemente ordnungsgemäß erstellt und positioniert hat und bereit ist, angezeigt zu werden und die Eingaben des Benutzers zu akzeptieren. Das ist das Standardverhalten. Jedes Element kann dieses Verhalten überschreiben, um beispielsweise placeholder schneller auszublenden oder länger anzuzeigen.

Bei der Größenberechnung und Darstellung des Elements orientiert sich die Runtime an den Attributen layout, width, height und media. Alle Layoutregeln werden intern über CSS implementiert. Man sagt, dass ein Element die "Größe definiert", wenn seine Größe über CSS Stile abgeleitet werden kann und sich nicht aufgrund seiner untergeordneten Elemente ändert: ob sofort verfügbar oder dynamisch eingefügt. Das bedeutet nicht, dass sich die Größe dieses Elements nicht ändern kann. Das Layout kann durchaus responsiv sein, so wie es bei Layouts vom Typ responsive, fixed-height, fill und flex-item der Fall ist. Es bedeutet lediglich, dass sich die Größe nicht ohne explizite Benutzeraktion ändert, z. B. beim Rendern, Scrollen oder nach einem Download.

Wenn das Element falsch konfiguriert wurde, wird es in PROD überhaupt nicht gerendert, und im DEV Modus rendert die Runtime das Element im Fehlerzustand. Zu möglichen Fehlern gehören ungültige oder nicht unterstützte Werte der Attribute layout, width und height.

Layoutattribute

width und height

Je nach Wert des Attributs layout müssen die Elemente der AMP Komponente die Attribute width und height besitzen, die einen ganzzahligen Pixelwert enthalten. Das tatsächliche Layoutverhalten wird wie nachfolgend beschrieben durch das Attribut layout bestimmt.

Falls width oder height nicht angegeben sind, kann die AMP Runtime in einigen Fällen folgende Standardwerte für diese Attribute festlegen:

• amp-pixel: Sowohl width als auch height erhalten den Standardwert 0.
• amp-audio: Die Standardwerte für width und height werden vom Browser abgeleitet.

layout

AMP stellt eine Auswahl an Layouts zur Verfügung, die festlegen, wie eine AMP Komponente sich im Layout des Dokuments verhält. Du kannst das Layout für eine Komponente angeben, indem du das Attribut layout mit einem der nachfolgend beschriebenen Layoutwerte für das Element hinzufügst.

Beispiel: Ein einfaches, responsives Bild, bei dem Breite und Höhe zur Bestimmung des Seitenverhältnisses verwendet werden.

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

> </amp-img>
> 

Unterstützte Werte für das Attribut layout:

sizes

Alle AMP Elemente, die das Layout responsive unterstützen, unterstützen auch das Attribut sizes. Der Wert dieses Attributs ist ein Ausdruck vom Typ 'sizes' (wie unter img sizes beschrieben), der jedoch nicht nur für Bilder, sondern für alle Elemente gilt. Kurz gesagt: Das Attribut sizes beschreibt, wie die Breite eines Elements in Abhängigkeit von den Medienbedingungen berechnet wird.

Wenn das Attribut sizes zusammen mit width und height angegeben wird, ist das layout standardmäßig responsive.

Beispiel: Verwendung des Attributs sizes

Im folgenden Beispiel gilt: Ist das Ansichtsfenster breiter als 320px, so ist das Bild 320px breit. Andernfalls ist es 100vw breit (100 % der Breite des Ansichtsfensters).

<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

Das Attribut sizes allein legt einen Inlinestil mit width für das Element fest. Wenn disable-inline-width mit sizes kombiniert wird, gibt das AMP Element den Wert von sizes an das zugrunde liegende Tag des Elements weiter, genau wie bei einer Verschachtelung des Tags img innerhalb von amp-img, ohne dass der Inlinewert width festgelegt wird, so wie sizes allein das in der Regel in AMP macht.

Beispiel: Verwendung des Attributs disable-inline-width

Im folgenden Beispiel wird die Breite des Elements <amp-img> nicht beeinflusst, und sizes wird nur verwendet, um eine der Quellen aus srcset auszuwählen.

<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

Alle AMP Elemente, die das Layout responsive unterstützen, unterstützen auch das Attribut heights. Der Wert dieses Attributs ist ein auf Medienausdrücken basierender Ausdruck vom Typ 'sizes', der dem Attribut 'img sizes' ähnlich ist, jedoch zwei wesentliche Unterschiede aufweist:

1. Er bezieht sich auf die Höhe, nicht auf die Breite des Elements.
2. Prozentwerte sind zulässig, z. B. 86%. Wenn ein Prozentwert verwendet wird, gibt er den Prozentsatz der Elementbreite an.

Wenn das Attribut heights zusammen mit width und height angegeben wird, ist das layout standardmäßig responsive.

Beispiel: Verwendung des Attributs heights

Im folgenden Beispiel beträgt die Höhe des Bildes standardmäßig 80 % der Breite. Wenn das Ansichtsfenster jedoch breiter ist als 500px, wird die Höhe auf 200px begrenzt. Da das Attribut heights zusammen mit width und height angegeben wird, erhält das Layout den Standardwert responsive.

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

> </amp-img>
> 

media

Die meisten AMP Elemente unterstützen das Attribut media. Der Wert von media ist eine Medienabfrage (Media Query). Wenn die Abfrage nicht mit dem Wert übereinstimmt, wird das Element nicht gerendert und seine eigenen sowie etwaige untergeordnete Ressourcen werden nicht abgerufen. Wenn das Browserfenster die Größe oder Ausrichtung ändert, werden die Medienabfragen neu ausgewertet und Elemente werden basierend auf den neuen Ergebnissen ausgeblendet bzw. angezeigt.

Beispiel: Verwendung des Attributs media

Im folgenden Beispiel haben wir zwei Bilder mit sich gegenseitig ausschließenden Medienabfragen. Abhängig von der Bildschirmbreite wird eines der beiden Bilder abgerufen und gerendert. Das Attribut media ist in allen AMP Elementen verfügbar und kann deshalb mit Elementen verwendet werden, die keine Bilder sind, z. B. Ads.

<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

Das Attribut placeholder kann nicht nur für AMP Elemente, sondern für jedes HTML Element verwendet werden. Das Attribut placeholder gibt an, dass das mit diesem Attribut gekennzeichnete Element als Platzhalter für das übergeordnete AMP Element fungiert. Wird ein Platzhalter angegeben, so muss er dem AMP Element direkt untergeordnet sein. Standardmäßig wird der Platzhalter für das AMP Element sofort angezeigt, selbst wenn die Ressourcen des AMP Elements noch nicht heruntergeladen oder initialisiert wurden. Sobald das AMP Element bereit ist, verbirgt es in der Regel seinen Platzhalter und zeigt den eigentlichen Inhalt an. Das genaue Verhalten in Bezug auf den Platzhalter hängt von der Implementierung des Elements ab.

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

fallback

Das Attribut fallback kann nicht nur für AMP Elemente, sondern für jedes HTML Element verwendet werden. Ein Fallback ist eine Konvention, mit der ein Element dem Benutzer mitteilen kann, dass der Browser das Element nicht unterstützt. Wird ein Fallback Element angegeben, so muss es dem AMP Element direkt untergeordnet sein. Das genaue Verhalten in Bezug auf das Fallback hängt von der Implementierung des Elements ab.

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

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

noloading

Das Attribut noloading gibt an, ob die Ladeanzeige für dieses Element deaktiviert sein soll. Viele AMP Elemente lassen die Anzeige eines Ladeindikators zu. Das ist eine Standardanimation, die zeigt, dass ein Element noch nicht vollständig geladen ist. Mithilfe dieses Attributs können Elemente ein solches Verhalten unterbinden.

(tl;dr) Überblick über die Anforderungen und das Verhalten der Layouts

In der folgenden Tabelle sind die zulässigen Parameter, CSS Klassen und Stile beschrieben, die für das Attribut layout verwendet werden. Bitte beachte:

1. Alle CSS Klassen mit -amp- sowie Elemente mit i-amp- als Präfix gelten als AMP intern. Ihre Verwendung in benutzerdefinierten Stylesheets ist nicht zulässig. Sie werden hier nur zu Informationszwecken angezeigt.
2. Selbst wenn width und height in der Tabelle als 'erforderlich' angegeben sind, gelten möglicherweise die Standardregeln (wie dies bei amp-pixel und amp-audio der Fall ist).