Google AMP - Styles et CSS personnalisé

Amp rend les pages à l'écran après un examen attentif. Les pages chargées contiendront des images, des vidéos, des iframes, etc., qui sont davantage des requêtes http à faire. Ainsi, les requêtes http à effectuer sont retardées pour que le contenu de la page soit affiché et qu'un espace nécessaire soit créé pour les images, vidéos, iframes à charger.

Amp dispose de fonctionnalités telles que les espaces réservés, les solutions de secours, le srcset et l'attribut de mise en page pour rendre les pages réactives et s'assurer que le contenu de la page n'est pas perturbé. Dans ce chapitre, discutons de tout cela en détail.

Étiquette de style d'ampli

Amp a une balise de style avec amp-custom dessus comme indiqué ci-dessous -

<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>

Il est essentiellement utilisé pour écrire le CSS personnalisé requis pour la page. N'oubliez pas d'ajouter leamp-customattribut; sinon, la validation de l'ampli échouera comme indiqué ci-dessous -

Amp prend également en charge le CSS en ligne pour les éléments html comme indiqué ci-dessous -

<div style = "color:green;margin-left:30px;">
Welcome to TutorialsPoint</p>

Balise de feuille de style externe

Amp ne prend pas en charge la feuille de style externe et échouera pour la validation une fois validé pour amp.

Exemple

<!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>

Une fois validé avec le validateur AMP , nous obtenons l'erreur suivante.

Pour afficher les éléments de la page de manière réactive, les éléments amp doivent spécifier la largeur et la hauteur que l'élément prendra sur la page. L'ajout de layout = "responsive" rendra l'élément réactif sur la page en maintenant le rapport hauteur / largeur.

Les détails de l'attribut layout sont discutés en détail dans le chapitre Google AMP – Layout.