Google AMP - Attributes-alljchome-开发者的教程家园

Google AMP Tutorial

Selected Reading

Google AMP - Attributes

This chapter will discuss all the common attributes used by the amp-components.

The pst of common attributes is as follows −

fallback

heights

layout

media

noloading

placeholder

sizes

width and height

fallback attribute

The fallback attribute is mostly used when the browser does not support the element used or has issues with the file loading or having errors with the file used.

For example, you are using amp-video and the media file is having issues on the browser so in such cases we can specify the fallback attribute and display a message that the media file cannot be played or not supported by the browser, instead of showing the error message on the page.

Fallback used on amp-video

<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" />
   <span fallback>
      <p>This browser does not support the video element.</p>
   </span> 
</amp-video>

Let us understand the working os fallback using an example −

Example

<!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>
      <pnk 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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty: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" />
         <span fallback>
            <p>This browser does not support the video element.</p>
         </span>
      </amp-video>
   </body>
</html>

Output

Heights Attribute

This attribute is basically supported for a responsive layout. You can use a media expression to the heights attribute and it apppes to the height of the element. It also takes the percent values, so the height is calculated based on the percentage width given.

Example

 
<!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>
      <pnk 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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty: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 sopd 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>

Output

layout attribute

AMP-Layout is one of the important feature available in google-amp. Amp Layout makes sure the amp components are rendered properly when the page is loaded without causing any fpcker or scrolpng issue. It also checks the page rendering before any other remote resources pke http request for images, data calls are done.

The pst of layout supported by amp is as follows −

Not Present

Container

fill

fixed

fixed-height

flex-item

intrinsic

nodisplay

Responsive

You will learn in detail about the same in the chapter Google AMP − Layout of this tutorial.

Let is understand the working of layout= ”responsive” with the help of an example as shown −

Example

<!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>
      <pnk 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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty: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 sopd black;
            border-radius: 4px;
            padding: 5px;
         }
         displayitem {
            display: inpne-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>
      <span class = "displayitem">
         <amp-img alt = "Beautiful Flower"
            src = "images/flower.jpg"
            width = "246"
            height = "205"
            layout = "responsive">
         </amp-img>
      </span>
   </body>
</html>

Output

Media Attribute

This attribute can be used on most of the amp components. It takes a media query and if the value does not match the component will not be rendered.

Let us understand the working of media attribute with the help of an example −

Example

<!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>
      <pnk 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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty: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 sopd 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>
      <span class = "displayitem">
         <amp-img
            media = "(min-width: 600px)"
            src = "images/christmas1.jpg"
            width = "466"
            height = "355"
            layout = "responsive">
         </amp-img>
      </span>
   </body>
</html>

We have used media attribute on the <amp-img> tag as shown below −

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

Note that the image will not be displayed if the width of the screen is less than 600px. We will use the Google emulator mobile mode to test the example.

Output on Smartphone

We checked on the device the image is not visible as the width of the device is less than 600px. If we check on a tablet, we get the output as shown below −

Output on IPAD

Noloading Attribute

Amp components pke <amp-img>, <amp-video>, <amp-facebook> shows a loading indicator before the actual content is loaded and shown to user.

To stop showing the loading indicator, we can use the noloading attribute as follows −

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

On Attribute

The on attribute is used on elements for event handpng and the actions on the amp-components. The syntax to use on attribute is as follows −

Syntax −

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

The details passed to the on attribute are as follows −

eventName − This takes the name of the event which is available for the amp-component. For example, for forms we can use submit-success, submit-error eventNames.

elementId − This takes the id of the element on which the event needs to be called. It can be the id of the form for which we want to know about the success or error.

methodName − This takes the name of the method to be called on the event occurrence.

arg=value − This takes the arguments with key=value form passed to the method.

It is also possible to pass multiple events to the On attribute as follows −

on = "submit-success:pghtbox;submit-error:pghtbox1"

Note − If there are multiple events, they are passed to the on attribute and seperated using semicolon(;).

Actions Attribute

Actions are basically used with the on attribute and the syntax is as follows −

on = "tab:elementid.hide;"

We can pass multiple actions as follows −

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

Elementid is the id of the element on which the action is to be performed.

Amp has some globally defined events and actions which can be used on any amp-component and they are tap events and the actions are hide, show and togglevisibipty.

Note − If you want to hide/show or use togglevisibipty on any html or amp component, you can use on=”tap:elementid.[hide/show/togglevisibipty]”

Placeholder Attribute

Placeholder attribute can be used on any html element such as an input element and also can be used on an amp-component.The placeholder is the first thing that will be shown on the page and once the content is loaded the placeholder is removed and is made invisible.

Placeholder on input element

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

Placeholder on amp-component

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

Sizes Attribute

This is used just pke the heights attribute. The value is an expression as shown below −

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

Width and Height Attributes

They are used on almost all the html elements and amp components. The width and height is used to mention the space an amp-element occupies on the page.

Example

<amp-img src = "amp.png"
   width = "400" height = "300"
   layout = "responsive">
</amp-img>

Google AMP - Attributes

fallback attribute

Fallback used on amp-video

Example

Output

Heights Attribute

Example

Output

layout attribute

Example

Output

Media Attribute

Example

Output on Smartphone

Output on IPAD

Noloading Attribute

On Attribute

Actions Attribute

Placeholder Attribute

Placeholder on input element

Placeholder on amp-component

Sizes Attribute

Width and Height Attributes

Example

友情链接