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

Obsługiwane CSS

Jak wszystkie strony internetowe, strony AMP są stylizowane za pomocą CSS, ale nie można odwoływać się do zewnętrznych arkuszy stylów (z wyjątkiem czcionek niestandardowych). Niedozwolone są również niektóre style ze względu na skutki dla wydajności.

Style można umieszczać w nagłówku dokumentu lub jako atrybuty inline style (patrz Dodawanie stylów do strony). Można jednak użyć preprocesorów CSS i szablonów w celu utworzenia stron statycznych, aby lepiej zarządzać swoją zawartością.

UWAGA — składniki AMP mają domyślne style, dzięki czemu pisanie responsywnych stron jest dość łatwe. Style te są zdefiniowane w amp.css.

Disallowed styles

Następujące style są niedozwolone na stronach AMP:

Banned style Opis
Kwalifikator
!important 		Użycie kwalifikatora !important i odwołanie do niego jest niedozwolone. Jest to niezbędne, aby umożliwić AMP wymuszanie zasad określania rozmiarów jego elementów.
<link rel=”stylesheet”> Niedozwolone, z wyjątkiem czcionek niestandardowych.
Nazwy klas i-amphtml- i znaczników i-amphtml-. Walidator odrzuca nazwy klas i znaczników z następującym wyrażeniem regularnym `(^|\W)i-amphtml-`. Są one zarezerwowane do użytku wewnętrznego przez framework AMP. Wynika to z tego, że arkusz stylów użytkownika nie może odwoływać się do selektorów CSS klas i znaczników i-amphtml-.

Zalecenia dotyczące wydajności

Aby można było uzyskać optymalną wydajność, te dozwolone style powinny ograniczać wartości do podanych poniżej:

Ograniczony styl Opis
Właściwość transition Tylko właściwości akcelerowane przez GPU (obecnie opacity, transform i -vendorPrefix-transform).
@keyframes {...} Tylko właściwości akcelerowane przez GPU (obecnie opacity, transform i -vendorPrefix-transform).

Wyjątek dotyczący czcionek niestandardowych

Strony AMP nie mogą zawierać zewnętrznych arkuszy stylów, z wyjątkiem czcionek niestandardowych.

CZYTAJ DALEJ — Dowiedz się więcej o czcionkach niestandardowych w AMP.

Używanie preprocesorów CSS

Dane wyjściowe generowane przez preprocesory działają w AMP tak samo dobrze, jak każda inna strona internetowa. Na przykład strona amp.dev używa Sass. (Używamy Grow do tworzenia statycznych stron AMP, które składają się na stronę amp.dev).

W razie używania preprocesorów zwróć szczególną uwagę na to, co dodajesz; ładuj tylko to, czego używasz na swoich stronach. Na przykład, plik head.html zawiera wszystkie wymagane znaczniki AMP oraz kod inline CSS z plików źródłowych *.scss. Zawiera także (między innymi) niestandardowy skrypt elementu amp-youtube, dzięki czemu wiele stron w całej witrynie może zawierać wbudowane filmy z YouTube.



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

Aby sprawdzić, jak powyższe przekłada się na sformatowany kod AMP HTML, zobacz źródło dowolnej strony na amp.dev. (W Chrome, kliknij prawy przyciskiem myszy i wybierz polecenie Wyświetl źródło strony).