Google AMP - Classi CSS dinamici

Le classi amp-dynamic-css aggiungono classi dinamiche al tag body. In questo capitolo, impariamo i dettagli di questo tag.

Per lavorare con le classi amp-dynamic-css, dobbiamo aggiungere il seguente script:

<script asynccustom-element="amp-dynamic-css-classes" 
   src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js">
</script>

Ci sono due classi importanti che vengono curate da amp-dynamic-css-classes -

  • amp-referrer-*
  • amp-viewer

Cerchiamo di discutere ciascuno di essi in dettaglio.

amp-referrer- *

Queste classi vengono impostate a seconda di come arrivano gli utenti. Significa che se l'utente proviene da Google, verrà impostata la classe referrer relativa a Google. Lo stesso vale per Twitter e Pinterest.

Le classi sono disponibili in base al tipo di referrer.

Ad esempio, per Google verranno aggiunte le seguenti classi se l'utente fa clic su pagine amp dal motore di ricerca di Google.

  • amp-referrer-www-google-com
  • amp-referrer-google-com
  • amp-referrer-com

Allo stesso modo ci sono classi disponibili per Twitter, Pinterest, Linkedin ecc.

amp-viewer

Amp viewer fondamentalmente cambierà l'URL di amp per ottenere i dettagli dalla cache di Google. Se cerchi qualcosa nella ricerca di Google, il carosello visualizzato avrà tutte le pagine dell'amplificatore.

Quando fai clic su di essi, vengono reindirizzati all'URL con l'URL di Google come prefisso. La classe amp-viewer verrà impostata quando la pagina viene visualizzata dall'utente in amp-viewer e utilizzando classi dinamiche.

Quando fai clic sulla pagina dell'amplificatore, l'URL che ottieni nella barra degli indirizzi è il seguente:

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms

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.98.0/css/materialize.min.css">
      
      <style amp-custom>
         body:not(.amp-referrer-pinterest-com) .if-pinterest,
         body:not(.amp-referrer-ampbyexample-com) .if-ampbyexample,
         body:not(.amp-referrer-google-com) .if-google,
         body:not(.amp-referrer-twitter-com) .if-twitter,
         body:not(.amp-referrer-linkedin-com) .if-linkedin,
         body:not(.amp-referrer-localhost) .if-localhost {
            display: none;
         }
         body:not(.amp-viewer) .if-viewer,
            body.amp-viewer .if-not-viewer {
            display: none;
         }
         p {
            padding: 1rem;
            font-size:25px;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Dynamic Css Classes</h3>
      <div>
      
         <p class = "if-pinterest">You were referred here or embedded by Pinterest!</p>
         <p class = "if-twitter">You were referred here or embedded by Twitter!</p>
         <p class = "if-google">You were referred here or embedded by Google!</p>
         <p class = "if-ampbyexample">You came here directly! Cool :)</p>
         < class = "if-localhost">You came here directly! Cool :)</p>
      </div>
      &ltdiv>
         <p class = "if-not-viewer">Hey! You are not coming from amp viewer</p>
         <p class = "if-viewer">Hey! From amp viewer.</p>
      <div>
   </body>
</html>

Produzione