Google AMP: stili e CSS personalizzati
Amp rende le pagine sullo schermo dopo un'attenta considerazione. Le pagine caricate conterranno immagini, video, iframe ecc. Quindi le richieste http da fare vengono ritardate in modo che il contenuto della pagina venga visualizzato e venga creato anche uno spazio necessario per il caricamento delle immagini, dei video, degli iframe.
Amp ha funzionalità come segnaposto, fallback, srcset e attributi di layout per rendere le pagine reattive e assicura anche che il contenuto della pagina non sia disturbato. In questo capitolo, discutiamo tutti questi in dettaglio.
Tag stile amplificatore
Amp ha un tag di stile con amp-custom su di esso come mostrato di seguito -
<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>Fondamentalmente è utilizzato per scrivere il css personalizzato richiesto per la pagina. Si prega di non dimenticare di aggiungere il fileamp-customattributo; altrimenti fallirà per la convalida dell'amplificatore come mostrato di seguito -
Amp supporta anche CSS in linea per elementi html come mostrato di seguito:
<div style = "color:green;margin-left:30px;">
Welcome to TutorialsPoint</p>Tag del foglio di stile esterno
Amp non supporta il foglio di stile esterno e non verrà convalidato se convalidato per amp.
Esempio
<!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>Quando convalidato con lo strumento di convalida AMP , otteniamo il seguente errore.
Per visualizzare gli elementi nella pagina in modo reattivo, gli elementi amp devono specificare la larghezza e l'altezza che l'elemento assumerà nella pagina. L'aggiunta di layout = "responsive" renderà l'elemento reattivo sulla pagina mantenendo le proporzioni.
I dettagli dell'attributo layout sono discussi in dettaglio nel capitolo Google AMP – Layout.