Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Система макетов 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:

Значение Поведение и требования
Нет Если значение не указано, макет компонента определяется следующим образом:
  • Если height присутствует, а width отсутствует или имеет значение auto, предполагается макет fixed-height.
  • Если width и height присутствуют вместе с атрибутом sizes или heights, предполагается макет responsive.
  • Если указаны width и height, предполагается макет fixed.
  • Если width и height отсутствуют, предполагается макет container.
container Размеры элемента определяют его дочерние элементы, как и в случае HTML-элемента div. Предполагается, что элемент выступает только в качестве контейнера и не имеет определенного собственного макета. Его дочерние элементы отображаются сразу.
fill Элемент занимает доступное ему пространство — как в ширину, так и в высоту. Другими словами, макет и размер элемента fill соответствуют его родительскому элементу. Чтобы элемент заполнил свой родительский контейнер, укажите макет «fill» и убедитесь, что в родительском контейнере указано position:relative или position:absolute.
fixed Элемент имеет фиксированную ширину и высоту без поддержки адаптивности. Атрибуты width и height должны присутствовать. Исключения — компоненты amp-pixel и amp-audio.
fixed-height Элемент занимает доступное ему пространство, но сохраняет высоту неизменной. Этот макет хорошо подходит для таких элементов, как amp-carousel, в которых контент расположен горизонтально. Атрибут height должен присутствовать. Атрибут width не должен быть указан или должен иметь значение auto.
flex-item Этот элемент и другие элементы в его родительском элементе с типом макета flex-item занимают оставшееся пространство родительского контейнера, если родительский элемент является гибким контейнером (например, display: flex). Атрибуты width и height не требуются.
intrinsic Элемент занимает доступное ему пространство и автоматически изменяет свою высоту до соотношения сторон, заданного атрибутами width и height, пока не достигнет размера элемента, определенного атрибутами width и height, переданными в amp-img, или не достигнет ограничения CSS, такого как max-width. Атрибуты ширины и высоты должны быть указаны. Этот макет очень хорошо работает с большинством элементов AMP, включая amp-img, amp-carousel и т. п. Доступное пространство зависит от родительского элемента, а также может быть настроено с помощью CSS-свойства max-width. Этот макет отличается от responsive тем, что имеет собственную высоту и ширину. Это наиболее очевидно внутри плавающего элемента, где макет responsive будет отображать 0x0, а макет intrinsic увеличится до меньшего из своего естественного размера или какого-либо ограничения CSS.
nodisplay Элемент не отображается и занимает нулевое пространство на экране (как при использовании стиля display: none). Этот макет можно применить к любому элементу AMP. Предполагается, что элемент сможет появляться в ответ на действие пользователя (например, amp-lightbox). Атрибуты width и height не требуются.
responsive Элемент занимает доступное ему пространство и автоматически изменяет свою высоту в соответствии с соотношением сторон, заданным атрибутами width и height. Этот макет очень хорошо подходит для большинства элементов AMP, включая amp-img, amp-video и т. п. Доступное пространство зависит от родительского элемента и также может быть настроено с помощью CSS-свойства max-width. Атрибуты width и height должны быть указаны.

Примечание. Элементы с "layout=responsive" не имеют собственного размера; размер элемента определяется его контейнерным элементом. Чтобы гарантировать отображение элемента AMP, необходимо указать ширину и высоту содержащего его элемента. Не указывайте "display:table" для элемента-контейнера, поскольку это переопределит стиль отображения элемента AMP и сделает элемент AMP невидимым.

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.
Макет Требует указания ширины/
высоты?
Указывает размер? Дополнительные элементы Значение CSS "display"
container Нет Нет Нет block
fill Нет Да, родительский размер. Нет block
fixed да Да, по width и height. Нет inline-block
fixed-height только height; width может иметь значение auto Да, определяется родительским контейнером и height. Нет block
flex-item Нет Нет Да, на основе родительского контейнера. block
intrinsic да Да, на основе родительского контейнера и соотношения сторон по width:height. Да, i-amphtml-sizer. block (ведет себя как замещаемый элемент)
nodisplay Нет Нет Нет none
responsive да Да, на основе родительского контейнера и соотношения сторон по width:height. Да, i-amphtml-sizer. block