Google AMP - Stiller ve Özel CSS
Amp, çok dikkatli bir değerlendirmeden sonra ekrandaki sayfaları oluşturur.Yüklenen sayfalar, daha çok http isteklerinden olan resimler, videolar, iframe'ler vb. İçerir. Böylece yapılacak http talebi geciktirilerek sayfadaki içeriğin görüntülenmesi ve ayrıca yüklenecek resimler, videolar, iframe'ler için gerekli alan yaratılır.
Amp, sayfaları duyarlı hale getirmek için yer tutucular, geri dönüşler, srcset ve düzen niteliği gibi özelliklere sahiptir ve ayrıca sayfadaki içeriğin bozulmamasını sağlar. Bu bölümde tüm bunları detaylı olarak tartışalım.
Amp Tarzı Etiketi
Amp, amp-custom aşağıda gösterildiği gibi üzerinde -
<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>Temel olarak sayfa için gerekli olan özel css'i yazmak için kullanılır. Lütfen eklemeyi unutmayınızamp-customnitelik; aksi takdirde aşağıda gösterildiği gibi amp doğrulaması başarısız olur -
Amp ayrıca aşağıda gösterildiği gibi html öğeleri için satır içi css'yi destekler -
<div style = "color:green;margin-left:30px;">
Welcome to TutorialsPoint</p>Harici Stil Sayfası Etiketi
Amp, harici stil sayfasını desteklemez ve amp için doğrulandığında doğrulama için başarısız olur.
Misal
<!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>AMP doğrulayıcı ile doğrulandığında aşağıdaki hatayı alıyoruz.
Öğeleri sayfadaki duyarlı bir şekilde görüntülemek için, amp öğelerinin, öğenin sayfada alacağı genişliği ve yüksekliği belirtmesi gerekir. Layout = "responsive" eklemek, en boy oranını koruyarak sayfadaki öğeyi duyarlı hale getirecektir.
Düzen özelliğinin ayrıntıları, bölümde ayrıntılı olarak tartışılmıştır. Google AMP – Layout.