AMP
ID
English Deutsch Français العربية Español Italiano 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

CSS yang didukung

Seperti semua halaman, halaman AMP digayakan dengan CSS, tapi tidak dapat mereferensikan stylesheet eksternal (dengan pengecualian font kustom). Selain itu, gaya tertentu tidak diizinkan karena implikasi performa. Atribut gaya sisipan pun tidak diizinkan.

Semua gaya harus ada di kepala dokumen (lihat Tambahkan gaya ke halaman). Namun Anda dapat menggunakan pembuatan template dan praprosesor CSS untuk membuat halaman statis agar dapat mengelola konten Anda dengan lebih baik.

Komponen AMP hadir dengan gaya default untuk mempermudah pembuatan halaman responsif. Gaya ini ditentukan di amp.css.

Gaya yang tidak diizinkan

Gaya berikut tidak diizinkan di halaman AMP:

Gaya yang dilarang Deskripsi
Atribut gaya sisipan Semua gaya harus ditentukan di <head> halaman, dalam tag <style amp-custom>.
Penentu !important Penggunaan tidak diizinkan. Ini adalah persyaratan yang dibutuhkan guna mengaktifkan AMP untuk menerapkan aturan pengukuran elemennya.
<link rel=”stylesheet”> Tidak diizinkan dengan pengecualian font kustom.
Nama kelas -amp- dan tag i-amp- tag names Nama kelas, 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- dan tag i-amp.

Gaya yang dibatasi

Gaya berikut diizinkan, namun dibatasi dalam hal nilai yang didukung:

Gaya yang dibatasi Deskripsi
Properti transition Hanya properti yang dipercepat GPU (saat ini opacity, transform, dan -vendorPrefix-transform).
@keyframes {...} Hanya properti yang dipercepat GPU (saat ini opacity, transform, dan -vendorPrefix-transform).

Pengecualian font kustom

Halaman AMP tidak dapat menyertakan stylesheet eksternal, dengan pengecualian font kustom.

Pelajari lebih lanjut tentang font kustom di AMP.

Menggunakan praprosesor CSS

Keluaran praprosesor berfungsi sama baiknya di AMP dengan di halaman web lainnya. Misalnya, situs amp.dev menggunakan Sass . (Kami menggunakan Grow untuk membangun halaman AMP statis yang menyusun situs amp.dev .)

Jika menggunakan praprosesor, selalu perhatikan hal yang Anda sertakan. Muatlah hanya yang digunakan halaman Anda. Misalnya, head.html menyertakan semua markup AMP yang diperlukan dan CSS yang disisipkan dari file sumber *.scss. Juga disertakan skrip elemen kustom untuk amp-youtube, di antara lainnya, agar banyak halaman di seluruh situs dapat menyertakan video YouTube yang disematkan.



<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">
  <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">

  <title>Proyek AMP</title>
  <link rel="icon" href="/static/img/amp_favicon.png">
  <link rel="canonical" href="{{doc.url}}">
  <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>

Untuk melihat cara di atas diterapkan dalam HTML AMP terformat, lihat sumber setiap halaman di amp.dev. (Di Chrome, klik kanan dan View Page Source.)