›

Style dan Layout Pada Halaman AMP HTML

Saturday, September 23, 2017 Add Comment Edit
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:

Baca Juga


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

Related Posts

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

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel