AMP Common Attributes - Atribut Umum Pada AMP HTML

Maret 19, 2021

Common Attributes adalah attibute yang secara umum dapat digunakan pada AMP Components (atau bisa juga pada HTML element). Pada HTML regular mungkin kita mengenalnya dengan istilah global attribute akan tetapi pada AMP, common attribute cakupannya lebih luas.

Fallback attribute adalah atribut yang digunakan sebagai "cadangan" atau alternatif konten lain apabila konten utama yang dimaksud tidak didukung oleh browser atau tidak tersedia (mungkin terhapus). Contoh, kita mereferensikan gambar A, apabila gambar A tersebut tidak valid (terhapus atau tidak di-support browser) maka kita bisa berikan fallback gambar lain.

Fallback attribute tidak hanya bisa digunakan pada element AMP itu sendiri, akan tetapi juga dapat digunakan pada element HTML yang mana element HTML tersebut terletak didalam Element AMP (sebagai anak/child) dimana element AMP tersebut juga harus mendukung (Support) fallback attribute.

Attribute ini, bisanya digunakan untuk menangani gambar (images), animasi (animation), audio dan video. Lihat contoh Berikut:

Example

SOURCE
demo 
<amp-anim src="/media/images/clock.webp"
  width="580"
  height="580"
  layout="responsive" >
  <div fallback>
    Cannot play animated images - Gambar animasi GIF tidak bisa ditampilkan.
  </div>
</amp-anim>
heights Attribute

heights berbeda dengan height. height diisi langsung dengan nilai (value) berupa unit pixel (contoh: height="680"), sedangkan heights value berupa ekspresi berdasarkan media (@media) ekspresi. heights lebih mirip dengan sizes attribute pada HTML <img> tag.

Example

SOURCE
demo 
<amp-img src="/media/images/amp-bg.jpg"
  width="420" height="456"
  heights="(min-width:500px) 300px, 70%">
</amp-img>
layout Attribute

layout attribute digunakan untuk menentukkan susunan pada dokumen AMP. Value dari atribute layout dapat diisi dengan: nodisplay, fixed, responsive, fixed-height, fill, container, dan flex-item.

Example

SOURCE
demo 
<amp-img src="/media/images/flower.jpg"
  width="750"
  height="562"
  layout="responsive"
  alt="a flower">
</amp-img>
media Attribute

media attribute digunakan untuk menentukkan visibilitas AMP element berdasarkan media query. Contoh penggunaan attribute ini adalah jika Anda ingin mengampilkan gambar (picture) yang berbeda berdasarkan ukuran layar (device viewport). Ini berkaitan dengan CSS @media yang tentunya Anda harus memahaminya terlebih dahulu. Semua elemen AMP mendukung (support) media attribute

Example

SOURCE
demo 
<amp-img
    media="(min-width: 700px)"
    src="/media/images/amp-bg.jpg"
    width="750"
    height="500" layout="responsive"></amp-img>
<amp-img
    media="(max-width: 699px)"
    src="/media/images/amp-bg-red.jpg"
    width="450"
    height="200" layout="responsive"></amp-img>
noloading Attribute

noloading attribute digunakan apabila tidak ingin menampilkan loading indicator yang biasanya ditandai dengan animasi loading yang menunjukkan konten sedang dimuat. Seperti menggunakan amp-img untuk menampilkan gambar ; sebelum gambar dimuat/ditampilkan maka akan ditampikan loading indicator yang memberi tahu kita bahwa gambar mau ditampikan.

Umumnya atribut ini digunakan dan berkaitan dengan: gambar (images), animasi (animations), video dan ads (amp-ad).

Example

SOURCE
demo 
<amp-img src="/media/images/cloud.jpg"
  noloading
  height="750"
  width="562"
  layout="responsive">
</amp-img>
on Attribute

Sebagaimana dalam DOM (Document Object Model) kita mengenal event handler, maka on attribute digunakan dan hanya akan terjadi apabila ada interaksi dari user atau sumber lain. Contohnya, pada saat user mengklik tombol (button) di sebuah element, maka tampilkan kotak dialog dan sebagainya.

Umumnya atribut ini digunakan dan berkaitan dengan: lightboxes, sidebars, live lists, dan forms. Mengenai istilah-istilah tersebut silahkan merujuk pada dokumentasi resmi AMP.

SYNTAX 
eventName:targetId[.methodName[(arg1=value, arg2=value)]]

Example

SOURCE
demo 
<amp-img
    on="tap:nama-lightbox"
    role="button"
    tabindex="0"
    src="/media/images/amp-bg.jpg" width=200 height=100></amp-img>
<amp-image-lightbox id="nama-lightbox" layout="nodisplay"></amp-image-lightbox>
<p>click or tap the image</p>
placeholder Attribute

placeholder menunjukkan "pengganti". Konten didalam atribut ini digunakan sebagai pengganti konten utama (induk) sebelum konten utama tersebut selesai dimuat atau ditampilkan. Atribut ini boleh digunakan pada HTML elemen biasa yang mana terletak di dalam AMP element (yang support placeholder). Jadi, placeholder akan tampil terlebih dahulu sebelum konten induk (parent). Ketika konten induk berhasil dimuat, maka placeholder akan disembunyikan.

Umumnya atribut ini digunakan dan berkaitan dengan: images, animations, videos, dan ads (berkaitan dengan iklan amp-ad). Mengenai istilah-istilah tersebut silahkan merujuk pada dokumentasi resmi AMP.

Contoh dibawah ini, menggunakan placeholder (Baris ke-6) dengan <amp-img> element. Apabila browser tidak support file "clock.webp" image, maka akan menggunakan file "clock.gif" sebagai gantinya.

Example

SOURCE
demo 
<amp-anim src="/media/images/clock.webp"
  width="580"
  height="580"
  layout="fixed"
  attribution="originally from wikimedia.org - public domain license">
  <amp-img placeholder
    alt=""
    layout="fixed"
    width="580"
    height="580"
    tabindex="0"
    src="/media/images/clock.gif">
    <noscript>
      <img src="/media/images/clock.gif" alt="" />
    </noscript>
  </amp-img>
</amp-anim>
sizes Attribute

sizes attribute sama seperti size atribut pada HTML <img> tag, akan tetapi sizes pada AMP dapat digunakan pada semua element. sizes atribut dapat digunakan pada semua AMP elemen yang support (mendukung) layout="responsive".

Example

SOURCE
demo 
<amp-img src="/media/images/cat.jpg"
  width="320" height="200"
  layout="responsive"
  sizes="(min-width: 320px) 320px, 100vw">
</amp-img>
width Attribute

width digunakan untuk menentukan "lebar" element. Sama seperti width pada attribute HTML biasa, akan tetapi pada AMP umumnya width harus ditulis secara eksplisit. Nilai yang berlaku adalah pixel (hanya angka saja).

Example

SOURCE
demo 
<amp-img src="/media/images/flash.jpg"
  width="320"
  height="200"
  layout="fixed">
</amp-img>
height Attribute

height digunakan untuk menentukan "tinggi" element. Sama seperti height pada attribute HTML biasa, akan tetapi pada AMP umumnya height harus ditulis secara eksplisit. Nilai yang berlaku adalah pixel (hanya angka saja).

Example

SOURCE
demo 
<amp-img src="/media/images/car.jpg"
  width="320"
  height="200"
  layout="fixed">
</amp-img>

Additional Information and Resources


Disqus comments