Sistem Tata Letak HTML AMP
Gambaran Umum
Tujuan utama sistem tata letak adalah untuk memastikan bahwa elemen-elemen AMP dapat mengekspresikan tata letak mereka sehingga runtime mampu menduga pengaturan ukuran elemen sebelum sumber daya jarak jauh apa pun, seperti JavaScript dan pemanggilan data, telah diselesaikan. Hal ini penting karena ini sangat mengurangi perenderan dan jank pengguliran.
Berdasarkan hal ini, Sistem Tata Letak AMP dirancang untuk mendukung beberapa tata letak fleksibel yang memberikan jaminan kinerja yang baik. Sistem ini mengandalkan serangkaian atribut, seperti layout, width, height, sizes, dan heights untuk mengekspresikan kebutuhan pengaturan ukuran dan tata letak elemen.
Perilaku
Sebuah elemen AMP non-wadah (yaitu, layout != container) mengawali dalam mode yang belum diselesaikan/belum dibangun dan di dalam mode ini semua anak-anaknya disembunyikan, kecuali sebuah bakal tempat (placeholder) (lihat atribut placeholder). JavaScript dan payload data yang diperlukan untuk sepenuhnya membangun elemen mungkin masih diunduh dan diawali, namun runtime AMP sudah tahu bagaimana mengatur ukuran dan tata letak elemen hanya dengan mengandalkan kelas CSS dan atribut layout, width, height, dan media. Dalam banyak kasus, sebuah placeholder, jika telah ditentukan, diukur dan ditempatkan untuk mengambil semua ruang elemen tersebut.
placeholder disembunyikan begitu elemen dibuat dan tata letak pertamanya selesai. Pada titik ini, anak-anak elemen tersebut diperkirakan telah dibuat dan ditempatkan dengan baik serta siap ditampilkan dan menerima input pembaca. Ini adalah perilaku default. Setiap elemen dapat menindih untuk, cth.: menyembunyikan placeholder lebih cepat atau mempertahankannya lebih lama.
Elemen ini diatur ukurannya dan ditampilkan berdasarkan atribut layout, width, height, dan media sesuai runtime. Semua aturan tata letak diterapkan melalui CSS secara internal. Elemen dikatakan akan “menentukan ukuran” jika ukurannya tidak dapat disimpulkan melalui gaya CSS dan tidak berubah berdasarkan anak-anaknya: langsung tersedia atau dimasukkan secara dinamis. Ini tidak berarti bahwa ukuran elemen ini tidak dapat berubah. Tata letak dapat responsif sepenuhnya sebagaimana halnya dengan tata letak responsive, fixed-height, fill, dan flex-item. Ini hanya berarti bahwa ukuran tidak berubah tanpa tindakan pengguna yang eksplisit, cth.: selama perenderan atau pengguliran atau setelah pengunduhan.
Jika elemen telah dikonfigurasi secara tidak benar, maka di dalam PROD tidak akan dirender sama sekali dan di dalam mode DEV, runtime akan merender elemen dalam keadaan eror. Kemungkinan eror termasuk nilai-nilai yang tidak valid atau tidak didukung dari atribut layout, width, dan height.
Atribut Tata Letak
width dan height
Sesuai dengan nilai atribut layout, elemen komponen AMP harus mempunyai atribut width dan height yang mengandung sebuah nilai piksel integer. Perilaku tata letak aktual ditentukan oleh atribut layout sebagaimana dijelaskan di bawah ini.
Di dalam beberapa kasus, jika width atau height tidak ditentukan, runtime AMP dapat distandarkan ke nilai-nilai ini, sebagai berikut:
amp-pixel: Baikwidthmaupunheightdistandarkan ke 0.amp-audio: Default atau standarwidthdanheightdisimpulkan dari browser.
layout
AMP menyediakan serangkaian tata letak yang menentukan cara komponen AMP berperilaku di dalam tata letak dokumen. Anda dapat menentukan tata letak untuk sebuah komponen dengan menambahkan atribut layout dengan satu dari nilai-nilai yang telah ditentukan di dalam tabel di bawah ini.
Contoh: Sebuah gambar responsif sederhana di mana lebar dan tinggi digunakan untuk menentukan rasio aspek.
<amp-img src="/img/amp.jpg" width="1080" height="610" layout="responsive" alt="an image" > </amp-img> >
Nilai-nilai yang didukung untuk atribut layout:
| Nilai | Perilaku dan Persyaratan |
|---|---|
| Tidak ada | Jika tidak ada nilai yang ditentukan, tata letak untuk komponen disimpulkan sebagai berikut:
|
container | Elemen ini membiarkan anak-anaknya untuk menentukan ukurannya, persis seperti divHTML normal. Komponen dianggap tidak mempunyai tata letak spesifik sendiri, tetapi bertindak hanya sebagai wadah, anak-anaknya dirender segera. |
fill | Elemen ini mengambil ruang yang tersedia untuknya—baik lebar maupun tinggi. Dengan kata lain, tata letak dan ukuran suatu elemen fill sesuai dengan induknya. Agar elemen mengisi wadah induknya, tentukan tata letak “fill” (isi), dan pastikan bahwa wadah induknya menentukan position:relative atau position:absolute. |
fixed | Elemen ini mempunyai lebar dan tinggi tetap, namun ketanggapan tidak didukung. Atribut width dan height harus ada. Satu-satunya pengecualian adalah komponen amp-pixel dan amp-audio. |
fixed-height | Elemen ini mengambil ruang yang tersedia untuknya, namun mempertahankan tinggi. Tata letak ini berfungsi dengan baik untuk elemen seperti amp-carousel yang melibatkan konten yang diposisikan horizontal. Atribut height harus ada. Atribut width tidak boleh ada atau harus setara dengan auto. |
flex-item | Elemen ini dan elemen lain di dalam induknya dengan jenis tata letak flex-item mengambil sisa ruang wadah induknya jika induknya adalah wadah yang fleksibel (yaitu, display: flex). Atribut width dan height tidak diperlukan. |
intrinsic | Elemen ini mengambil ruang yang tersedia untuknya dan mengubah ukuran tingginya secara otomatis sesuai rasio aspek yang diberikan oleh atribut width dan height hingga mencapai ukuran elemen yang ditentukan oleh atribut `width` dan `height` yang diteruskan ke amp-img, atau mencapai batas CSS, seperti `max-width`. Atribut lebar (width) dan tinggi (height) harus ada. Tata letak ini berfungsi dengan sangat baik untuk sebagian besar elemen AMP, termasuk amp-img, amp-carousel, dll. Ruang yang tersedia bergantung pada elemen induk dan dapat juga disesuaikan dengan menggunakan CSS max-width. Tata letak ini berbeda dari responsive karena mempunyai tinggi dan lebar intrinsik. Ini adalah yang paling jelas di dalam sebuah elemen yang mengambang di mana sebuah tata letak responsive akan merender 0x0 dan tata letak intrinsic akan mengecil sesuai ukuran alaminya atau batasan CSS apa pun. |
nodisplay | Elemen ini tidak ditampilkan, dan sama sekali tidak menggunakan ruang pada layar, seakan-akan gaya tampilannya adalah none. Tata letak ini dapat diterapkan pada setiap elemen AMP. Diasumsikan bahwa elemen dapat menampilkan diri sendiri pada tindakan pengguna (cth., amp-lightbox). Atribut width dan height tidak diperlukan. |
responsive | Elemen ini mengambil ruang yang tersedia untuknya dan mengubah ukuran tingginya secara otomatis sesuai rasio aspek yang diberikan oleh atribut width dan height. Tata letak ini berfungsi dengan sangat baik untuk sebagian besar elemen AMP, termasuk amp-img, amp-videodll. Ruang yang tersedia bergantung pada elemen induk dan dapat juga disesuaikan dengan menggunakan CSS max-width. Atribut width dan height harus ada.Catatan: Elemen-elemen dengan |
sizes
Semua elemen AMP yang mendukung tata letak responsive juga mendukung atribut sizes. Nilai atribut ini adalah ekspresi ukuran sebagaimana dijelaskan di dalam ukuran img, tetapi diperluas ke semua elemen, bukan cuma gambar. Pendeknya, atribut sizes menjelaskan cara lebar elemen dihitung sesuai dengan kondisi media.
Jika atribut sizes ditentukan bersama width dan height, layout distandarkan pada responsive.
Contoh: Menggunakan atribut sizes
Di dalam contoh berikut ini, jika viewport lebih lebar dari 320px, gambar akan selebar 320px, jika tidak, akan selebar 100vw (100% lebar viewport).
<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
Atribut sizes sendiri akan menetapkan gaya width inline pada elemen. Saat menyandingkan disable-inline-width dengan sizes, elemen AMP akan menyebarkan nilai sizes hingga ke tag dasar elemen, seperti pada img yang berada di dalam amp-img, tanpa menetapkan width inline karena sizes biasanya melakukannya sendiri dalam AMP.
Contoh: Menggunakan atribut disable-inline-width
Di dalam contoh berikut ini, lebar elemen <amp-img> tidak terpengaruh, dan sizes hanya digunakan untuk memilih salah satu sumber dari 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
Semua elemen AMP yang mendukung tata letak responsive, juga mendukung atribut heights. Nilai atribut ini adalah ekspresi ukuran berdasarkan ekspresi media yang serupa dengan atribut ukuran img, tetapi dengan dua perbedaan utama:
- Ini berlaku pada tinggi, bukan lebar elemen.
- Nilai persen diperbolehkan, cth.
86%. Jika sebuah nilai persen digunakan, ini mengindikasikan persentase lebar elemen.
Jika atribut heights ditentukan bersama width dan height, layout distandarkan pada responsive.
Contoh: Menggunakan atribut heights
Di dalam contoh berikut ini, tinggi gambar akan distandarkan pada 80% dari lebarnya, namun jika viewport lebih lebar dari 500px, tingginya dibatasi pada 200px. Karena atribut heights ditentukan bersama width and height, tata letak distandarkan pada responsive.
<amp-img src="https://acme.org/image1.png" width="320" height="256" heights="(min-width:500px) 200px, 80%" > </amp-img> >
media
Sebagian besar elemen AMP mendukung atribut media. Nilai media adalah kueri media. Jika kueri tidak sesuai, elemen tidak akan dirender sama sekali dan sumber daya serta sumber daya anaknya kemungkinan besar tidak akan diambil. Jika jendela browser berubah ukuran atau orientasinya, kueri media dievaluasi kembali dan elemen disembunyikan serta diperlihatkan berdasarkan hasil yang baru.
Contoh: Menggunakan atribut media
Di dalam contoh berikut ini, ada 2 gambar dengan kueri media yang sama-sama eksklusif. Tergantung lebar layar, satu dari kedua gambar ini akan diambil dan dirender. Atribut media tersedia pada semua elemen AMP, jadi dapat digunakan dengan elemen non-gambar, seperti iklan.
<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
Atribut placeholder dapat ditetapkan pada elemen HTML apa pun, bukan hanya elemen AMP. Atribut placeholder mengindikasikan bahwa elemen yang ditandai dengan atribut ini bertindak sebagai bakal tempat untuk elemen AMP induk. Jika ditentukan, elemen bakal tempat harus berupa anak atau turunan langsung dari elemen AMP. Sebagai default, bakal tempat segera diperlihatkan untuk elemen AMP, bahkan jika sumber daya elemen AMP belum diunduh atau dimulai. Setelah siap, elemen AMP biasanya menyembunyikan bakal tempatnya dan memperlihatkan konten. Perilaku ini, yang terkait dengan bakal tempat, bergantung pada penerapan elemen.
<amp-anim src="animated.gif" width="466" height="355" layout="responsive"> <amp-img placeholder src="preview.png" layout="fill"></amp-img> </amp-anim>
fallback
Atribut fallback dapat ditetapkan pada elemen HTML apa pun, bukan hanya elemen AMP. Sebuah fallback adalah ketentuan yang memungkinkan elemen untuk menyampaikan kepada pembaca bahwa browser tidak mendukung elemen tersebut. Jika ditentukan, elemen fallback harus berupa anak atau turunan langsung dari elemen AMP. Perilaku ini, yang terkait dengan fallback, bergantung pada penerapan elemen.
<amp-anim src="animated.gif" width="466" height="355" layout="responsive"> <div fallback>Cannot play animated images on this device.</div> </amp-anim>
noloading
Atribut noloading mengindikasikan apakah “indikator pemuatan” harus dinonaktifkan untuk elemen ini. Banyak elemen AMP yang masuk ke dalam daftar yang diperbolehkan untuk memperlihatkan “indikator pemuatan”, ini adalah animasi dasar yang memperlihatkan bahwa elemen belum sepenuhnya dimuat. Elemen dapat menolak perilaku ini dengan menambahkan atribut ini.
(tl;dr) Rangkuman Perilaku & Persyaratan Tata Letak
Tabel berikut ini menjelaskan tentang parameter yang dapat diterima, kelas CSS, dan berbagai gaya yang digunakan untuk atribut layout. Perhatikan bahwa:
- Kelas CSS apa pun yang ditandai dengan prefiks
-amp-dan elemen yang diberikan prefiksi-amp-dianggap internal untuk AMP dan penggunaannya di dalam stylesheet pengguna tidak diizinkan. Mereka diperlihatkan hanya untuk keperluan informasi. - Walaupun
widthdanheightditentukan di dalam tabel sebagaimana diperlukan, aturan default dapat berlaku sebagaimana denganamp-pixeldanamp-audio.
| Tata Letak | Lebar/ Diperlukan? | Menentukan Ukuran? | Elemen Tambahan | "Tampilan" CSS |
|---|---|---|---|---|
container | Tidak | Tidak | Tidak | block |
fill | Tidak | Ya, ukuran induk. | Tidak | block |
fixed | Ya | Ya, ditentukan dengan width dan height. | Tidak | inline-block |
fixed-height | height saja; width dapat auto | Ya, ditentukan oleh wadah induk dan height. | Tidak | block |
flex-item | Tidak | Tidak | Ya, berdasarkan wadah induk. | block |
intrinsic | Ya | Ya, berdasarkan wadah induk dan rasio aspek width:height. | Ya, i-amphtml-sizer. | block (berperilaku seperti elemen yang diganti) |
nodisplay | Tidak | Tidak | Tidak | none |
responsive | Ya | Ya, berdasarkan wadah induk dan rasio aspek width:height. | Ya, i-amphtml-sizer. | block |