AMP
DE
English Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Supported CSS

Like all web pages, AMP pages are styled with CSS, but you can’t reference external stylesheets (with the exception of custom fonts). Also certain styles are disallowed due to performance implications.

Styles können entweder im Header des Dokuments oder inline als style Attribute angegeben werden (siehe Füge Styles zu einer Seite hinzu). Du kannst jedoch CSS Präprozessoren und Vorlagen verwenden, um statische Seiten zu erstellen und deine Inhalte besser zu verwalten.

HINWEIS: AMP Komponenten werden mit Standardstyles bereitgestellt, um das Erstellen responsiver Seiten relativ einfach zu gestalten. Diese Styles werden in amp.css definiert.

Unzulässige Styles

The following styles aren’t allowed in AMP pages:

Verbotener Style Beschreibung
!important qualifier Die Verwendung und das Verweisen auf !important sind nicht zulässig. Dies ist eine notwendige Voraussetzung, damit AMP eigene Regeln für die Elementgröße durchsetzen kann.
<link rel=”stylesheet”> Mit Ausnahme von benutzerdefinierten Schriftarten nicht zulässig.
i-amphtml- Klasse und i-amphtml- Tagnamen. Der Validator verbietet Namen von Klassen und Tags mit dem folgenden regulären Ausdruck regex `(^|\W)i-amphtml-`. Diese sind für den internen Gebrauch durch das AMP Framework reserviert. Daraus folgt, dass das Stylesheet des Benutzers möglicherweise nicht auf CSS Selektoren für i-amphtml- Klassen und Tags verweist.

Empfehlungen zur Leistung

Diese zulässigen Styles sollten die Werte wie folgt beschränken, um die Leistung zu optimieren:

Eingeschränkter Style Beschreibung
transition Eigenschaft Nur GPU-beschleunigte Eigenschaften (derzeit opacity, transform und -vendorPrefix-transform).
@keyframes {...} Nur GPU-beschleunigte Eigenschaften (derzeit opacity, transform und -vendorPrefix-transform).

Ausnahme für benutzerdefinierte Schriftarten

AMP Seiten dürfen keine externen Stylesheets enthalten, mit Ausnahme von benutzerdefinierten Schriftarten.

READ ON – Learn more about custom fonts in AMP.

Verwenden von CSS Präprozessoren

Die generierte Ausgabe von Präprozessoren funktioniert in AMP genauso gut wie auf jeder anderen Webseite. Die amp.dev Website verwendet beispielsweise Sass. (Wir verwenden Grow, um die statischen AMP Seiten zu erstellen, aus denen die amp.dev Website besteht.)

When using preprocessors, pay special attention to what you include; load only what your pages use. For example, the head.html includes all required AMP mark-up and the inlined CSS from the *.scss source files. It also includes the custom element script for amp-youtube, among others, so that many pages across the site can include embedded youtube videos.



<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="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">
  <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>

To see how the above translates into formatted AMP HTML, view the source for any page in amp.dev. (In Chrome, right-click and View Page Source.)