Style dan Layout Pada Halaman AMP HTML

Style dan layout pada halaman HTML AMP sangat mirip dengan halaman HTML normal - dalam kedua kasus tersebut, Anda akan menggunakan CSS.

Namun, AMP membatasi beberapa penggunaan CSS untuk alasan kinerja dan kegunaan, sekaligus memperluas kemampuan desain responsif dengan fitur seperti placeholder & fallbacks, advanced art direction via srcset dan atribut layout untuk kontrol yang lebih baik mengenai bagaimana elemen Anda ditampilkan.

Menambahkan style ke halaman

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

<!doctype html>
  <head>
    ...
    <styleamp-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>

PENTING - Pastikan hanya ada satu tag <style amp-custom> pada halaman Anda, karena lebih dari satu tidak diperbolehkan di AMP.

Tentukan styles komponen dengan class atau element selectors yang menggunakan properti CSS umum. Sebagai contoh:

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

CSS yang Didukung

Seperti semua halaman web, halaman AMP ditata dengan CSS, namun Anda tidak dapat mereferensikan stylesheet eksternal (kecuali font kustom). Selain itu, styles tertentu dilarang karena implikasi kinerja; atribut styles inline pun tidak diperbolehkan

Semua styles harus tinggal di kepala dokumen (lihat Menambahkan styles ke halaman). Tapi Anda bisa menggunakan preprocessors CSS dan template untuk membangun halaman statis agar bisa mengatur konten Anda dengan lebih baik.

Styles yang tidak diizinkan
Styles berikut tidak diizinkan di halaman AMP

Style yang Dilarang	Deskripsi
Inline style attributes	Semua styles harus didefinisikan di `<head>` halaman, dengan tag `<style amp-custom>`.
`!important` qualifier	Penggunaan tidak diperbolehkan. Ini adalah persyaratan yang diperlukan untuk mengaktifkan AMP untuk menerapkan peraturan ukuran elemennya.
`<link rel=”stylesheet”>`	Dilarang kecuali font kustom.
`-amp-` class and `i-amp-` tag names	Nama class, di stylesheets penulis, tidak dapat dimulai dengan string `-amp-`. Ini dikhususkan untuk penggunaan internal oleh waktu proses AMP. Demikian pula, stylesheet pengguna tidak dapat mereferensikan pemilih CSS untuk kelas `-amp-` classes dan tag `i-amp`.
`behavior`, `-moz-binding`	Properti ini tidak diperbolehkan untuk alasan keamanan.
`filter`	Blacklist karena masalah kinerja.

Styles yang dibatasi
Styles berikut diperbolehkan, namun dibatasi dalam hal nilai yang mereka dukung:

Style yang Dibatasi	Deskripsi
`transition` property	Hanya properti dengan akselerasi GPU (saat ini `opacity`, `transform` and `-vendorPrefix-transform`).
`@keyframes {...}`	Hanya properti dengan akselerasi GPU (saat ini `opacity`, `transform` dan `-vendorPrefix-transform`).

Menggunakan praprosesor CSS

Saat menggunakan praprosesor, perhatikan secara khusus apa yang anda masukkan. Muatkan hanya apa yang digunakan halaman Anda. mencakup semua mark up AMP yang dibutuhkan dan CSS yang dipersyaratkan. Ini juga termasuk script elemen custom salah satunya untuk amp-youtube, sehingga banyak halaman di seluruh situs bisa menyertakan video youtube disematkan.

Berikut contoh praprosesor CSS AMP:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">
  <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}Accelerated Mobile Pages Project">

  <title>Accelerated Mobile Pages Project</title>
  <link rel="icon" href="/static/img/amp_favicon.png">
  <link rel="canonical" href="https://www.ampproject.org{{doc.url.path}}">
  <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet">
  <style amp-custom>
  {% include "/assets/css/main.min.css" %}
  </style>

  <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 src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>

Atribut Layout

Atribut layout memudahkan Anda mengontrol masing-masing elemen terkait perenderan elemen di layar. Kebanyakan perenderan mungkin dapat dilakukan dengan CSS saja - namun hal tersebut lebih sulit dilakukan, dan memerlukan banyak cara. Sebagai gantinya, gunakan atribut layout.

Nilai yang didukung untuk atribut layout
Nilai berikut dapat digunakan dalam atribut layout:

Jenis Layout	Lebar/Tinggi yang Diperlukan	Prilaku
`nodisplay`	No	Elemen tidak ditampilkan. Layout ini bisa diterapkan ke setiap elemen AMP. Komponen ini mengambil ruang kosong di layar seolah-olah display style tidak ada sama sekali. Diasumsikan bahwa elemen dapat ditampilkan dengan sendirinya pada tindakan pengguna, misalnya, `amp-lightbox`.
`fixed`	Yes	Elemen memiliki lebar dan tinggi tetap tanpa ada responsivitas yang didukung. Satu-satunya pengecualian adalah elemen `amp-pixel` dan `amp-audio`.
`responsive`	Yes	Ukuran elemen ditentukan oleh lebar elemen penampungnya, dan ukuran tingginya otomatis diubah ke rasio aspek yang diberikan oleh atribut lebar dan tinggi. Tata letak ini berfungsi sangat baik untuk sebagian besar elemen AMP, termasuk `amp-img`, `amp-video`. Ruang yang tersedia bergantung pada elemen induk dan dapat disesuaikan menggunakan CSS `max-width`.
`fixed-height`	Height only	Elemen mengambil ruang yang tersedia, namun tingginya tetap tidak berubah. Tata letak ini berfungsi dengan baik untuk elemen seperti `amp-carousel` yang menyertakan konten dengan posisi horizontal. Atribut `width` tidak boleh ada atau harus sama dengan `auto`.
`fill`	No	Elemen mengambil ruang yang tersedia, baik lebar dan tingginya. Dengan kata lain, tata letak elemen pengisian cocok dengan elemen induknya.
`container`	No	Elemen mengizinkan elemen turunannya menentukan ukurannya, mirip dengan HTML normal `div`. Komponen ini diasumsikan tidak memiliki tata letak spesifik dengan sendirinya, namun hanya bertindak sebagai penampung. Elemen turunannya dirender dengan segera.
`flex-item`	No	Elemen dan elemen lain di dalam elemen induknya mengambil ruang penampung induk yang tersisa, jika elemen induk adalah penampung fleksibel (misal., `display:flex`). Ukuran elemen ditentukan oleh elemen induk dan jumlah elemen lain di dalam elemen induk sesuai dengan tata letak CSS `display:flex`.

Bagaimana jika lebar dan tinggi tidak terdefinisi?
Dalam beberapa kasus jika lebar atau tinggi tidak ditentukan, runtime AMP dapat menetapkan nilai berikut sebagai berikut:

amp-pixel: Baik lebar dan tinggi default ke 0.
amp-audio: Lebar dan tinggi default disimpulkan dari browser.

Bagaimana jika atribut layout tidak ditentukan?
Jika atribut layout tidak ditentukan, AMP mencoba untuk menyimpulkan atau menebak nilai yang sesuai:

Aturan	Perkiraan layout
`height` ada dan `width` tidak ada atau sama dengan `auto`	`fixed-height`
atribut `width` atau `height` ada bersama dengan atribut `sizes`	`responsive`
atribut `width` atau `height` ada	`fixed`
`width` dan `height` tidak ada	`container`

Semoga Bermanfaat...

Style dan Layout Pada Halaman AMP HTML

Menambahkan style ke halaman

CSS yang Didukung

Menggunakan praprosesor CSS

Atribut Layout

0 Response to "Style dan Layout Pada Halaman AMP HTML"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel