Система макетов AMPHTML

Обзор

Основное предназначение системы макетов — предоставление элементам AMP возможности указывать свой макет, что, в свою очередь, позволяет среде выполнения определять размер элементов до выполнения каких-либо операций с удаленными ресурсами, таких как запросы JavaScript и загрузка данных. Эта возможность важна, поскольку позволяет значительно сократить задержки при рендеринге и прокрутке страницы.

Система макетов AMP спроектирована так, чтобы поддерживать небольшое число гибких макетов, гарантирующих высокую производительность. Для выражения требований элемента к своему макету и размерам эта система использует ряд атрибутов, таких как layout, width, height, sizes и heights.

Поведение

Неконтейнерный элемент AMP (т. е. в котором layout != container) изначально запускается в режиме «незавершенной компоновки», в котором все его дочерние элементы скрыты, за исключением заполнителя (см. описание атрибута placeholder). Данные, необходимые для завершения компоновки элемента, могут все еще загружаться и инициализироваться, но среда выполнения AMP уже знает размер и местоположение элемента на основании только классов CSS и атрибутов layout, width, height и media. Размер и позиция элементов-заполнителей (placeholder), при их наличии, в большинстве случаев совпадает с размером и местоположением родительского элемента.

Заполнитель (placeholder) скрывается, как только компоновка первого макета его родительского элемента будет завершена. На этом этапе предполагается, что все дочерние элементы элемента корректно скомпонованы, позиционированы, готовы к отображению, а также готовы принимать ввод данных от пользователя. Таково поведение по умолчанию, однако каждый элемент может переопределить его — например, скрыть placeholder быстрее или отображать его дольше.

Установка размера и отображение элемента осуществляется средой выполнения на основании атрибутов layout, width, height и media. Реализация всех правил макета является внутренней и выполняется с помощью CSS. Считается, что элемент «указывает размер», если его размер можно получить с помощью стилей CSS и он не меняется в зависимости от дочерних элементов: как доступных немедленно, так и добавленных динамически. Это не означает, что размер этого элемента не может измениться. Макет может быть полностью динамическим, как и в случае с макетами responsive, fixed-height, fill и flex-item. Это просто означает, что размер не изменяется без явного действия со стороны пользователя (например, при рендеринге, прокрутке или загрузке публикации).

Если элемент настроен неправильно, в среде PROD он не будет отображаться вообще, а в cреде DEV будет отображен с состоянием ошибки. В числе возможных ошибок могут быть недопустимые или неподдерживаемые значения атрибутов layout, width и height.

Атрибут layout

width и height

Значение атрибута layout определяет, должны ли элементы AMP-компонента содержать атрибуты width и height, указывающие количество пикселей в формате целых чисел. Фактическое поведение макета определяется атрибутом layout, как описано ниже.

Если атрибуты width и height не указаны, то в некоторых случаях среда выполнения AMP может задать им исходные значения самостоятельно:

• amp-pixel: для width и height по умолчанию устанавливается значение 0.
• amp-audio: значения width и height по умолчанию определяются параметрами браузера.

layout

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

Пример: простое адаптивное изображение, ширина и высота которого используются для определения соотношения сторон.

<amp-img
src="/img/amp.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image"

> </amp-img>
> 

Поддерживаемые значения атрибута layout:

sizes

Все элементы AMP, поддерживающие макет responsive, также поддерживают атрибут sizes. Значением этого атрибута является выражение sizes, которое описано в статье img sizes, однако в данном контексте оно распространяется на все элементы, а не только на изображения. Атрибут sizes описывает, как рассчитывается ширина элемента в зависимости от условий его среды.

Когда атрибут sizes задается вместе с width и height, то layout по умолчанию получает значение responsive.

Пример: использование атрибута sizes

В следующем примере, если область просмотра шире 320px, ширина изображения составит 320 пикселей; в противном случае его ширина будет равна 100vw (100% ширины области просмотра).

<amp-img
src="https://acme.org/image1.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"

> </amp-img>
> 

disable-inline-width

При отдельном использовании атрибута sizes он устанавливает элементу встроенный стиль width. При совместном использовании sizes с disable-inline-width элемент AMP распространяет значение sizes на дочерний тег элемента (например, на img, вложенные внутри amp-img). При этом, в отличие от самостоятельного применения sizes в AMP, встроенный стиль width не устанавливается.

Пример: использование атрибута disable-inline-width

В следующем примере ширина элемента <amp-img> не изменяется, а sizes используется только для выбора одного из источников из srcset.

<amp-img
src="https://acme.org/image1.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"
disable-inline-width

> </amp-img>
> 

heights

Все элементы AMP, которые поддерживают макет responsive, также поддерживают атрибут heights. Значение этого атрибута представляет собой основанное на медиа-выражениях выражение, схожее со значением атрибута sizes в img, но с двумя ключевыми отличиями:

1. Оно относится к высоте, а не ширине элемента.
2. В нем допускаются процентные значения, например 86%. Если используется процентное значение, оно указывает процентную долю ширины элемента.

Когда атрибут heights указывается вместе с width и height, то layout по умолчанию получает значение responsive.

Пример: использование атрибута heights

В следующем примере высота изображения по умолчанию составляет 80% от ширины, но если область просмотра шире 500px, высота ограничивается значением 200px. Поскольку атрибут heights указывается вместе с width и height, макет по умолчанию получает значение responsive.

<amp-img
src="https://acme.org/image1.png"
width="320"
height="256"
heights="(min-width:500px) 200px, 80%"

> </amp-img>
> 

media

Атрибут media поддерживается большинством элементов AMP. В качестве значения атрибута media указывается медиа-запрос. Если фактические параметры клиента не соответствуют запросу, то рендеринг элемента не происходит, а его ресурсы (и, потенциально, ресурсы дочерних элементов) не загружаются. В случае изменения размеров или ориентации окна браузера медиа-запросы обрабатываются заново, после чего происходит скрытие или отображение элементов в зависимости от результата.

Пример: использование атрибута media

В следующем примере у нас есть 2 изображения с взаимоисключающими медиа-запросами. В зависимости от ширины экрана будет выбрано и отображено одно из двух изображений. Атрибут media доступен для всех элементов AMP, поэтому его можно использовать с элементами, не относящимися к изображениям, такими как реклама.

<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width="466"
height="355"
layout="responsive"

> </amp-img>
> <amp-img
>   media="(max-width: 649px)"
>   src="narrow.jpg"
>   width="527"
>   height="193"
>   layout="responsive"
> </amp-img>
> 

placeholder

Атрибут placeholder можно добавить в любой элемент HTML, а не только в элементы AMP. Атрибут placeholder указывает, что элемент, отмеченный этим атрибутом, действует как заполнитель для родительского элемента AMP. Элемент-заполнитель должен быть прямым потомком элемента AMP. По умолчанию такой заполнитель отображается немедленно, даже если ресурсы элемента AMP не были загружены или проинициализированы. После завершения загрузки AMP-элемента заполнитель обычно скрывается для отображения реального содержимого. Конкретный способ обработки заполнителя зависит от реализации в элементе.

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>

fallback

Атрибут fallback (обозначает резервный элемент) можно добавить в любой элемент HTML, а не только в элементы AMP. Резервный элемент — это способ сообщить пользователю, что браузер не поддерживает родительский элемент. Резервный элемент должен быть прямым потомком элемента AMP. Конкретный алгоритм отображения резервного элемента зависит от реализации в элементе.

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">

  <div fallback>Cannot play animated images on this device.</div>
</amp-anim>

noloading

noloading позволяет отключать индикатор загрузки элемента. Многие элементы AMP по умолчанию отображают т. н. «индикатор загрузки» — базовую анимацию, показывающую, что элемент еще не полностью загружен. Чтобы отключить индикатор в определенном элементе, добавьте в него этот атрибут.

Сводная информация по требованиям макетов и их поведению

В следующей таблице описаны допустимые параметры, классы CSS и стили, используемые для атрибута layout. Обратите внимание, что:

1. Любой СSS-класс с префиксом -amp- и элементы с префиксом i-amp- считаются внутренними по отношению к AMP, и их нельзя применять в пользовательских таблицах стилей. Они представлены здесь исключительно в информационных целях.
2. Несмотря на то, что width и height указываются в таблице по мере необходимости, в некоторых ситуациях могут применяться правила по умолчанию, как в случае с amp-pixel и amp-audio.