Google AMP - атрибуты

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

Список общих атрибутов выглядит следующим образом —

отступать
высоты
расположение
средства массовой информации
noloading
на
заполнитель
размеры
ширина и высота

резервный атрибут

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

Например, вы используете amp-video, и у файла мультимедиа возникают проблемы в браузере, поэтому в таких случаях мы можем указать резервный атрибут и отобразить сообщение о том, что файл мультимедиа не может быть воспроизведен или не поддерживается браузером, вместо того, чтобы показывать сообщение об ошибке на странице.

Fallback используется на усилителе-видео

<amp-video controls
   width = "640"
   height = "360"
   layout = "responsive"
   poster = "images/videoposter.png">
   <source src = "video/bunny.webm" type = "video/webm" />
   <source src = "video/samplevideo.mp4" type = "video/mp4" />
   <div fallback>
      <p>This browser does not support the video element.</p>
   </div> 
</amp-video>

Давайте разберемся с рабочим отступлением на примере

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "      http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
   
      <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 custom-element = "amp-video" 
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Video</h3>
      <amp-video controls
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png">
         <source src = "video/bunny.webm"type="video/webm" />
         <source src = "video/samplevideo.mp4"type = "video/mp4" />
         <div fallback>
            <p>This browser does not support the video element.</p>
         </div>
      </amp-video>
   </body>
</html>

Выход

Атрибут высоты

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

пример

 
<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - heights attribute</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width=device-width,minimum-scale = 1,initial-scale = 1">
      
      <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>
      
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - heights attribute</h1>
      <amp-img src = "images/christmas1.jpg"
         width = "320" height = "256"
         heights = "(min-width:500px) 200px, 80%">
      </amp-img>
   </body>
</html>

Выход

атрибут макета

AMP-Layout — одна из важных функций, доступных в google-amp. Amp Layout обеспечивает правильное отображение компонентов усилителя при загрузке страницы, не вызывая проблем с мерцанием или прокруткой. Он также проверяет визуализацию страницы перед тем, как будут выполнены любые другие удаленные ресурсы, такие как http-запрос изображений, вызовы данных

Список макетов, поддерживаемых amp, выглядит следующим образом:

Не присутствует
Контейнер
заполнить
фиксированный
с фиксированной высотой
Flex-пункт
свойственный
нет дисплея
отзывчивый

Подробно об этом вы узнаете в главе Google AMP — Макет этого урока.

Давайте разберемся с работой макета = «отзывчивый» с помощью приведенного ниже примера:

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image>/title>
      <link rel = "canonical" href = "      http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <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>
      
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inline-block;
            width: 200px;
            height:200px;
            margin: 5px;
         }
         h1{font-family: "Segoe 
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Layout = responsive Image Example>/h1>
      <div class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

Выход

Медиа Атрибут

Этот атрибут может использоваться на большинстве компонентов усилителя. Он принимает медиа-запрос и, если значение не соответствует компоненту, не будет отображено.

Давайте разберемся с работой атрибута media с помощью примера:

пример

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Image</title>
      <link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
      
      <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>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
         h1{font-family: "Segoe 
         UI",Arial,sans-serif;font-weight: 400;margin: 10px 0;}
      </style>
   </head>
   <body>
      <h1>Google AMP - Media Attribute</h1>
      <div class = "displayitem">
         <amp-img
            media = "(min-width: 600px)"
            src = "images/christmas1.jpg"
            width = "466"
            height = "355"
            layout = "responsive">
         </amp-img>
      </div>
   </body>
</html>

Мы использовали атрибут media для тега <amp-img>, как показано ниже —

<amp-img
   media = "(min-width: 600px)"
   src = "images/christmas1.jpg"
   width = "466"
   height = "355"
   layout = "responsive">
</amp-img>

Обратите внимание, что изображение не будет отображаться, если ширина экрана меньше 600 пикселей. Для проверки примера мы будем использовать мобильный режим эмулятора Google.

Выход на смартфон

Мы проверили на устройстве изображение не видно, так как ширина устройства составляет менее 600 пикселей. Если мы проверим на планшете, мы получим вывод, как показано ниже —

Выход на IPAD

Атрибут Noloading

Компоненты Amp, такие как <amp-img>, <amp-video>, <amp-facebook>, показывают индикатор загрузки до того, как фактический контент загружен и показан пользователю.

Чтобы перестать показывать индикатор загрузки, мы можем использовать атрибут noloading следующим образом:

<amp-img src = "images/christmas1.jpg"
   noloading
   height = "300"
   width = "250"
   layout = "responsive">
</amp-img>

На атрибут

Атрибут on используется в элементах для обработки событий и действий над компонентами amp. Синтаксис для использования в атрибуте выглядит следующим образом:

Синтаксис —

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

Детали, передаваемые атрибуту on , следующие:

eventName — принимает имя события, которое доступно для компонента amp. Например, для форм мы можем использовать submit-success, submit-error eventNames.
elementId — принимает идентификатор элемента, для которого нужно вызвать событие. Это может быть идентификатор формы, для которой мы хотим знать об успехе или ошибке.
methodName — принимает имя метода, вызываемого при возникновении события.
arg = значение — принимает аргументы с формой ключ = значение, переданной методу.

eventName — принимает имя события, которое доступно для компонента amp. Например, для форм мы можем использовать submit-success, submit-error eventNames.

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

methodName — принимает имя метода, вызываемого при возникновении события.

arg = значение — принимает аргументы с формой ключ = значение, переданной методу.

Также можно передать несколько событий атрибуту On следующим образом:

on = "submit-success:lightbox;submit-error:lightbox1"

Примечание. Если имеется несколько событий, они передаются атрибуту on и разделяются точкой с запятой (;).

Атрибут действий

Действия в основном используются с атрибутом on, а синтаксис следующий:

on = "tab:elementid.hide;"

Мы можем передать несколько действий следующим образом —

on = "tab:elementid.open;tab:elementid.hide;”

Элемент — это идентификатор элемента, над которым должно быть выполнено действие.

Amp имеет несколько глобально определенных событий и действий, которые можно использовать на любом компоненте amp, они являются событиями касания, а действия — скрыть, показать и переключить видимость .

Примечание. Если вы хотите скрыть / показать или использовать togglevisibility на любом компоненте html или amp, вы можете использовать on = «tap: elementid. [Hide / show / togglevisibility]»

Атрибут заполнителя

Атрибут placeholder можно использовать в любом html-элементе, например, элементе input, а также в компоненте amp. Placeholder — это первое, что будет показано на странице, а после загрузки содержимого заполнитель удаляется и сделал невидимым

Заполнитель на элементе ввода

<input type = "text" id = "date" name = "date" placeholder = "Start Date">

Заполнитель на компонент усилителя

<amp-anim src = "images/loreal.gif" width = "300" height = "250" layout = "responsive">
   <amp-img placeholder src = "images/flower.jpg" 
   layout = "fill">
   </amp-img>
</amp-anim>

Атрибут размеров

Это используется так же, как атрибут высоты. Значение является выражением, как показано ниже —

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive"
   sizes = "(min-width: 250px) 250px, 100vw">
</amp-img>

Атрибуты ширины и высоты

Они используются практически на всех элементах HTML и компонентах усилителя. Ширина и высота используются для указания пространства, занимаемого элементом amp на странице.

Google AMP — атрибуты

резервный атрибут

Fallback используется на усилителе-видео

пример

Выход

Атрибут высоты

пример

Выход

атрибут макета

пример

Выход

Медиа Атрибут

пример

Выход на смартфон

Выход на IPAD

Атрибут Noloading

На атрибут

Атрибут действий

Атрибут заполнителя

Заполнитель на элементе ввода

Заполнитель на компонент усилителя

Атрибут размеров

Атрибуты ширины и высоты

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности