Оформление AMP-страниц, как и любых других, определяется с помощью CSS, однако такие страницы не требуют указывать сторонние таблицы стилей (за исключением пользовательских шрифтов). Кроме того, запрещены некоторые стили, а также атрибуты встроенного стиля, потому что они снижают производительность.

Все стили должны содержаться в заголовке документа, однако с помощью препроцессоров и шаблонов CSS можно создавать статические страницы, что позволяет более эффективно управлять контентом.

Примечание. Компоненты AMP по умолчанию содержат стили, позволяющие упростить разработку адаптивных страниц. Эти стили определяются в файле amp.css.

Использование препроцессоров CSS

Контент, созданный с помощью препроцессоров, отображается как на страницах AMP, так и на любых других веб-страницах. Например, на сайте ampproject.org используется язык Sass. Для создания статических страниц AMP, составляющих сайт ampproject.org, применяется генератор Grow.

Если вы используете препроцессоры, загружайте только те элементы, которые применяются на ваших страницах. Например, файл head.html будет содержать всю необходимую разметку AMP и встроенные стили CSS из исходных файлов *.scss, а также скрипт специальных элементов для атрибута amp-youtube. Благодаря этому на многих страницах сайта можно встраивать видео YouTube.

 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
  <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">

  <title>Accelerated Mobile Pages Project</title>
  <link rel="shortcut icon" href="/static/img/amp_favicon.png">
  <link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
  <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
  <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>
 

Чтобы узнать, как указанный выше код преобразуется в формат HTML для AMP-страниц, просмотрите исходный код любой страницы на сайте ampproject.org. Для этого в браузере Chrome нажмите правую кнопку мыши и выберите Просмотр кода страницы.

Запрещенные стили

На AMP-страницах запрещено использовать следующие стили:

Запрещенный стиль Описание
Атрибуты встроенного стиля Все стили должны быть определены в теге <style amp-custom> в разделе страницы <head>.
! (важный классификатор) Использование запрещено. Это необходимо для того, чтобы AMP-страницы соблюдали собственные правила, касающиеся определения размеров элементов.
<link rel=”stylesheet”> Использование запрещено (за исключением пользовательских шрифтов).
* (универсальный селектор) Снижает производительность и может использоваться для обхода других ограничений селектора.
:not() Может использоваться для имитации универсального селектора.
Псевдоселекторы, псевдоклассы и псевдоэлементы Псевдоселекторы, псевдоклассы и псевдоэлементы можно использовать только в селекторах, содержащих названия тегов, которые не начинаются с префикса amp-. Примеры допустимых селекторов: a:hover, div:last-of-type. Примеры недопустимых селекторов: amp-img:hover, amp-img:last-of-type.
Названия классов -amp- и тегов i-amp- Названия классов в специальных таблицах стилей не должны начинаться со строки -amp-. Они зарезервированы для внутреннего использования AMP-страницами. Из этого следует, что таблица стилей пользователя не может ссылаться на селекторы CSS для классов -amp- и тегов i-amp.

Внесенные в белый список переходы и анимация элементов

На AMP-страницах разрешены только переходы и анимация элементов, которые могут быть обработаны графическим процессором в обычных браузерах. В белый список проекта AMP в настоящее время внесены элементы opacity, transform и -vendorPrefix-transform.

В приведенных ниже примерах атрибут <property> должен находиться в белом списке:

  • transition <property> (Also -vendorPrefix-transition)
  • @ @keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)

Элементы overflow, overflow-y и overflow-x не могут иметь значение “auto” или “scroll”. Ни у одного пользовательского элемента в документе AMP не должно быть полосы прокрутки.

Пользовательские шрифты

На страницах AMP не должно быть сторонних таблиц стилей (за исключением пользовательских шрифтов). Их можно включить с помощью тегов со ссылкой на поставщиков шрифтов, внесенных в белый список, или атрибута @font-face.

Поставщиков шрифтов можно внести в белый список только в том случае, если они поддерживают интеграцию исключительно с CSS и используют протокол HTTPS. Сейчас в этом списке два поставщика:

Пример тега со ссылкой на поставщика шрифтов, внесенного в белый список (Google Fonts):

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

Также можно использовать элемент @font-face. Шрифты, добавленные с помощью атрибута @font-face, должны быть получены по протоколу HTTP или HTTPS.