Style & layout

Das Styling und Layout von AMP HTML Seiten ist gewöhnlichen HTML Seiten sehr ähnlich. In beiden Fällen verwendest du CSS.

Aus Gründen der Leistung und Benutzerfreundlichkeit beschränkt AMP einige CSS Styles sowie die Gesamtanzahl der Bytes auf 75.000 pro Seite. AMP erweitert jedoch die Funktionen für reaktionsschnelles Design durch Funktionen wie Platzhalter & Fallbacks, erweiterte Art Direction via srcset und das Layoutattribut, damit du die Anzeige deiner Elemente besser steuern kannst.

TIPP – Es ist ganz leicht, Elemente in AMP reaktionsschnell zu machen. Setze sie einfach auf layout="responsive". Mehr Infos über Reaktionsschnelles Design in AMP findest du unter Erstelle reaktionsschnelle AMP Seiten.

Add styles to a page

Jede AMP Seite hat ein CSS Limit von 75.000 Byte. Styles, die im Header des Dokuments oder inline definiert sind, werden auf dieses Limit angerechnet.

Definiere Styles im Header

Define CSS within the <style amp-custom> tag inside the head of the document. There is only one <style amp-custom> tag allowed on each AMP page.

<!doctype html>
  <head>
    ...
    <style amp-custom>
      /* any custom styles go here. */
      body {
        background-color: white;
      }
      amp-img {
        border: 5px solid black;
      }

      amp-img.grey-placeholder {
        background-color: grey;
      }
    </style>
    ...

  </head>

Gestalte AMP Komponenten und HTML Elemente mithilfe von Klassen oder Selektoren und verwende dafür allgemeine CSS Eigenschaften:

<body>
  <p>Hello, Kitty.</p>
  <amp-img
    class="grey-placeholder"
    src="https://placekitten.com/g/500/300"
    srcset="/img/cat.jpg 640w,
           /img/kitten.jpg 320w"
    width="500"
    height="300"
    layout="responsive">
  </amp-img>
</body>

Definiere Inline Styles

AMP erlaubt inline Styles:

<body>
  <p style="color:pink;margin-left:30px;">Hello, Kitty.</p>
</body>

Jede Instanz eines Inline Styles hat ein Limit von 1.000 Byte. Inline Styles werden auf das Limit von 75.000 Byte angerechnet.

Layout elements responsively

Lege die Größe und Position aller sichtbaren AMP Elemente fest, indem du die Attribute width und height angibst. Diese Attribute implizieren das Seitenverhältnis des Elements, das dann mit dem Container skaliert werden kann.

Setze das Layout auf responsiv. Dadurch wird die Größe des Elements an die Breite des Containerelements angepasst und die Höhe automatisch an das Seitenverhältnis, das durch die Attribute für Breite und Höhe vorgegeben ist.

ERFAHRE MEHR: Erfahre mehr über unterstützte Layouts in AMP.

Provide placeholders & fallbacks

Durch die integrierte Unterstützung für Platzhalter und Fallbacks langweilen deine Benutzer sich nie wieder vor einem leeren Bildschirm.

ERFAHRE MEHR: Erfahre mehr über Platzhalter & Fallbacks.

Art direct your images

AMP unterstützt die Attribute srcset und sizes. Dadurch kannst du präzise steuern, welche Bilder in welchem Szenario geladen werden.

ERFAHRE MEHR: Erfahre mehr über Art Direction mit srcset und sizes.

Validate your styles and layout

Verwende den AMP Validator, um die Werte für CSS und Layout deiner Seite zu testen.

Der Validator bestätigt, dass das CSS deiner Seite das Limit von 75.000 Byte einhält, sucht nach unzulässigen Styles und stellt sicher, dass das Seitenlayout unterstützt wird und korrekt formatiert ist. Siehe auch diese vollständige Liste der Fehler bei Style und Layout.

Beispiel eines Fehlers in der Konsole für eine Seite mit CSS, die das Limit von 75.000 Byte überschreitet:

ERFAHRE MEHR: Erfahre mehr darüber, wie du deine AMP Seiten überprüfst und validierst.

Written by @pbakaus
with contributions from @Meggin