Как создать адаптивные AMP-страницы

По методам стилизации и компоновки страницы AMP HTML очень схожи с обычными HTML-страницами: в обоих случаях используется CSS.

Чтобы обеспечить оптимальную производительность и удобство для пользователя, AMP накладывает ограничения на использование некоторых стилей CSS, а общий объем стилей на странице не должен превышать 75 000 байт. При этом AMP обеспечивает новые возможности для адаптивного дизайна, такие как заполнители и резервные элементы, расширенная художественная обработка при помощи srcset и атрибут layout, предоставляя более высокий уровень контроля над отображением элементов.

СОВЕТ. В AMP очень легко сделать элемент адаптивным: просто добавьте к нему атрибут layout="responsive". Подробнее об адаптивном дизайне в AMP см. в статье Создание адаптивных AMP-страниц.

Как добавить стили на страницу

Объем CSS-стилей на каждой AMP-странице не должен превышать 75 000 байт. Это ограничение распространяется как на стили, определенные в разделе head документа, так и на встроенные стили.

Определение стилей в разделе head

Для определения стилей CSS используйте тег <style amp-custom> в разделе head документа. В коде каждой AMP-страницы может быть только один тег <style amp-custom>.

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

Для стилизации компонентов AMP и элементов HTML используйте классы и селекторы в сочетании с обычными CSS-свойствами:

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

Определение встроенных стилей

AMP допускает использование встроенных стилей:

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

Размер каждого встроенного стиля не должен превышать 1000 байт. Встроенные стили засчитываются в общее ограничение в 75 000 байт.

Элементы с адаптивным макетом

Чтобы указывать размер и положение для видимых элементов AMP, используйте атрибуты width и height. Эти атрибуты определяют соотношение сторон элемента, размеры которого могут пропорционально меняться в соответствии с размером контейнера.

Если установить атрибуту «layout» значение «responsive», то ширина элемента будет определяться шириной элемента-контейнера, а высота будет задаваться автоматически на основании соотношения сторон, определяемого атрибутами «width» и «height».

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ. Подробнее о поддерживаемых макетах в AMP вы можете прочитать здесь

Указание заполнителей и резервных элементов

Благодаря встроенной поддержке заполнителей и резервных элементов вашим пользователям больше никогда не придется смотреть на пустой экран.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ. Подробнее о заполнителях и резервных элементах вы можете прочитать здесь

Художественная обработка изображений

AMP поддерживает атрибуты srcset и sizes, дающий точный контроль над загрузкой изображений в различных сценариях.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ. Подробнее о художественной обработке при помощи srcset и sizes вы можете прочитать здесь

Как проверить стили и макет

Для проверки значений CSS и макета страницы используйте AMP-валидатор.

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

Пример ошибки в консоли на странице со стилями CSS, чей объем превышает лимит в 75 000 байт:

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ. Подробнее о валидации и исправлении AMP-страниц вы можете прочитать здесь

Written by @pbakaus
with contributions from @Meggin