Gaya dan tata letak pada halaman HTML AMP sangat mirip dengan halaman HTML normal – pada kedua kasus tersebut, Anda akan menggunakan CSS.

Namun, AMP membatasi beberapa penggunaan CSS untuk alasan performa dan kegunaan, sekaligus memperluas kemampuan desain yang responsif dengan fitur seperti placeholder & fallback, pengarahan seni lanjutan melalui srcset dan atribut tata letak untuk kontrol yang lebih baik terkait tampilan elemen Anda.

Tonton UpperQuad yang menyampaikan perancangan ulang situs proyek AMP, termasuk tantangan dalam menggunakan AMP untuk pertama kalinya.

Tambahkan gaya ke halaman

Tambahkan semua CSS di dalam <style amp-custom> tag pada bagian atas dokumen. Misalnya:

<!doctype html>
<head>
    ...
    <style amp-custom>
      /* any custom styles go here. */
      body {
        background-color: white;
      }

      amp-img {
        border: 5px solid black;
      }

      amp-img.grey-placeholder {
        background-color: grey;
      }
    </style>
    ...
</head>

Tentukan gaya komponen dengan pemilih elemen atau kelas menggunakan properti CSS umum. Misalnya:

<body>
  <p>Hello, Kitty.</p>
  <amp-img
    class="grey-placeholder"
    src="https://placekitten.com/g/500/300"
    srcset="/img/cat.jpg 640w,
           /img/kitten.jpg 320w"
    width="500"
    height="300"
    layout="responsive">
  </amp-img>
</body>

Atur tata letak elemen secara responsif

Tentukan ukuran dan posisi untuk semua elemen AMP yang terlihat dengan memberikan atribut width dan height. Atribut ini menunjukkan rasio aspek elemen, yang kemudian dapat disesuaikan dengan penampung.

Setel tata letak ke responsif. Tindakan ini akan mengubah ukuran elemen selebar penampungnya dan ukuran panjangnya diubah secara otomatis ke rasio aspek yang diberikan oleh atribut lebar dan tinggi.

Berikan placeholder & fallback

Berkat dukungan yang sudah ada untuk placeholder dan fallback, pengguna Anda tidak perlu melihat layar kosong lagi.

Seni mengarahkan gambar Anda

AMP mendukung atribut srcset dan sizes agar Anda dapat mengontrol secara mendalam gambar mana yang dimuat dalam skenario tertentu.

Validasikan gaya dan tata letak Anda

Gunakan validator AMP untuk menguji CSS dan nilai tata letak halaman.

Validator mengonfirmasi bahwa halaman CSS Anda tidak melebihi batas 50.00 byte, memeriksa gaya yang tidak diizinkan, dan memastikan tata letak halaman didukung dan diformat dengan benar. Lihat juga daftar lengkap Error gaya dan tata letak.

Contoh error di konsol halaman dengan CSS yang melebihi batas 50.000 byte: