Общие атрибуты элементов
AMP предоставляет набор общих атрибутов, поддержка которых добавлена во многие компоненты AMP (и элементы HTML). В данном документе дается описание всех этих атрибутов.
fallback
Указывает на резервный (запасной) способ отображения элемента и используется для того, чтобы показать читателю, что основной элемент не поддерживается браузером или его контент не удалось загрузить. Атрибут fallback можно добавить к любому элементу HTML, являющемуся прямым потомком элемента AMP, который поддерживает резервные элементы. Конкретное применение резервного элемента определяется реализацией основного элемента, но обычно резервный элемент показывается вместо основного.
Часто используется с: изображениями, анимациями, видео и аудиоклипами
Пример:
<amp-img src="invalid.jpg" height="400" width="300" layout="responsive">
<div fallback style="background-color: #ccc; display: flex; justify-content: center; align-items: center;">
Could not load image
</div>
</amp-img>
Для получения дополнительной информации см. Заполнители и резервные элементы.
heights
Все элементы AMP, поддерживающие макет responsive, также поддерживают атрибут heights. В качестве значения этот атрибут принимает набор размеров в формате, основанном на медиа-выражениях, аналогично атрибуту sizes тега img, но с двумя важными отличиями:
- Указывается только высота элемента, но не его ширина.
- Высоту можно указывать в процентах от ширины элемента. Например, значение
80%указывает, что высота элемента будет равна 80% от его ширины.
Примечание: когда атрибут heights задан одновременно с атрибутами width и height, атрибут layout автоматически получает значение responsive.
Пример:
<amp-img
src="amp.png"
width="320"
height="256"
heights="(min-width:500px) 200px, 80%"
>
</amp-img>
Для получения дополнительной информации см. Художественное преобразование при помощи атрибутов srcset, sizes и heights.
layout
AMP предоставляет набор макетов, определяющих поведение компонента AMP внутри макета документа. Для того чтобы выбрать тип макета для компонента, присвойте атрибуту layout одно из значений, поддерживаемых элементом компонента (список поддерживаемых элементом значений смотрите в его документации).
Пример:
<amp-img
src="/img/amp.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image"
>
</amp-img>
Для получения дополнительной информации см. статью Макет и медиа-запросы и описание спецификации макетов.
media
Атрибут media поддерживается большинством элементов AMP. В качестве значения атрибута media указывается медиа-запрос. Если фактические параметры клиента не соответствуют запросу, то рендеринг элемента не происходит, а его ресурсы (и, потенциально, ресурсы дочерних элементов) не загружаются. В случае изменения размеров или ориентации окна браузера медиа-запросы обрабатываются заново, после чего происходит скрытие или отображение элементов в зависимости от результата.
Пример:
<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>
Для получения дополнительной информации см. Макет и медиа-запросы.
noloading
Атрибут noloading позволяет выключить индикатор загрузки элемента. Многие элементы AMP отображают «индикатор загрузки» — простую анимацию, указывающую на то, что элемент еще не полностью загрузился.
Часто используется с: изображениями, анимациями, видео и рекламой
Пример:
<amp-img src="card.jpg" noloading height="190" width="297" layout="responsive">
</amp-img>
on
Атрибут on используется для установки обработчиков событий на элементы. То, какие события поддерживаются, зависит от элемента.
Часто используется с: лайтбоксами, боковыми панелями, обновляемыми списками и формами
Синтаксис:
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
Пример:
<button on="tap:my-lightbox">Open lightbox</button>
<amp-lightbox id="my-lightbox" layout="nodisplay"> ... </amp-lightbox>
Для получения дополнительной информации см. Действия и события в AMP.
placeholder
Атрибут placeholder указывает, что отмеченный им элемент выступает по отношению к родительскому элементу AMP в качестве заполнителя. Атрибут можно добавить в любой элемент HTML, являющийся непосредственным дочерним элементом 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>
Для получения дополнительной информации см. Заполнители и резервные элементы.
sizes
Все элементы AMP, поддерживающие макет responsive, также поддерживают атрибут sizes. В качестве значения атрибут sizes принимает основанное на медиа-запросах выражение для выбора размеров элемента, наиболее подходящих под текущие размеры окна. Кроме того, AMP устанавливает для элемента атрибут width при помощи встроенного стиля.
Пример:
<amp-img
src="amp.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"
>
</amp-img>
Сгенерирует следующий вложенный тег img:
<img
decoding="async"
src="amp.png"
sizes="(min-width: 320px) 320px, 100vw"
class="i-amphtml-fill-content i-amphtml-replaced-content"
/>
Для получения дополнительной информации см. Художественное преобразование при помощи атрибутов srcset, sizes и heights.
width и height
При использовании некоторых макетов компоненты AMP должны содержать атрибуты width и height, указывающие число пикселей в виде целых чисел.
Пример:
<amp-anim width="245" height="300" src="/img/cat.gif" alt="cat animation">
</amp-anim>
Для получения дополнительной информации см. статью Макет и медиа-запросы и описание спецификации макетов.