Google AMP - Gaya dan CSS Khusus
Amp membuat halaman di layar setelah banyak pertimbangan yang cermat. Halaman yang dimuat akan berisi gambar, video, iframe, dll., Yang merupakan lebih banyak permintaan http yang harus dilakukan. Jadi permintaan http yang harus dilakukan ditunda sehingga konten pada halaman ditampilkan dan juga ruang yang diperlukan dibuat untuk gambar, video, iframe yang akan dimuat.
Amp memiliki fitur seperti placeholder, fallbacks, srcset dan atribut layout untuk membuat halaman menjadi responsif dan juga memastikan konten pada halaman tidak terganggu. Dalam bab ini, mari kita bahas semua ini secara mendetail.
Tag Gaya Amp
Amp memiliki tag gaya dengan amp-custom di atasnya seperti yang ditunjukkan di bawah ini -
<style amp-custom>
button{
background-color: #ACAD5C;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: left;
}
amp-img {
border: 1px solid black;
border-radius: 4px;
padding: 5px;
}
p {
padding: 1rem;
font-size:25px;
}
largeText {
font-size:30px;
background-color:red;
}
</style>Ini pada dasarnya digunakan untuk menulis css khusus yang diperlukan untuk halaman. Harap jangan lupa untuk menambahkanamp-customatribut; jika tidak maka validasi amp akan gagal seperti yang ditunjukkan di bawah ini -
Amp juga mendukung css inline untuk elemen html seperti yang ditunjukkan di bawah ini -
<div style = "color:green;margin-left:30px;">
Welcome to TutorialsPoint</p>Tag Stylesheet Eksternal
Amp tidak mendukung lembar gaya eksternal dan akan gagal untuk validasi saat divalidasi untuk amp.
Contoh
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Dynamic Css Classes</title>
<link rel = "canonical" href = "
http://example.ampproject.org/article-metadata.html">
<meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1">
<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 custom-element = "amp-bind" src = "
https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>
<script async custom-element = "amp-dynamic-css-classes"
src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
</script>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.9 8.0/css/materialize.min.css">
<style amp-custom>
p {
padding: 1rem;
font-size:25px;
}
</style>
</head>
<body>
<h3>Google AMP - Dynamic Css Classes</h3>
<div style = "color:green;margin-left:30px;">
Welcome to TutorialsPoint</p>
</body>
</html>Saat divalidasi dengan validator AMP , kami mendapatkan kesalahan berikut.
Untuk menampilkan elemen di halaman secara responsif, elemen amp harus menentukan lebar dan tinggi elemen pada halaman. Menambahkan layout = "responsive" akan membuat elemen menjadi responsif di halaman dengan mempertahankan rasio aspek.
Detail atribut tata letak dibahas secara detail di bab ini Google AMP – Layout.