آموزش استایل ها و CSS سفارشی در گوگل AMP

3 سال پیش

آموزش استایل ها و CSS سفارشی در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش استایل ها و CSS سفارشی در گوگل AMP خواهیم پرداخت.

Amp پس از بررسی دقیق صفحات رندر صفحه را ارائه می دهد. صفحات بارگذاری شده حاوی تصاویر، فیلم ها، فریم ها و غیره است که بیشتر از درخواست های http انجام شده است. بنابراین درخواست http برای انجام به تأخیر می افتد تا محتوای صفحه نمایش داده شود و همچنین فضای لازم برای بارگیری تصاویر ، فیلم ها ، فریم ها ایجاد می شود.

Amp از ویژگی هایی مانند متغیرهای متغیر ، برگشت ، srcset و ویژگی layout برای پاسخگویی به صفحات برخوردار است و همچنین از عدم مزاحمت محتوای صفحه اطمینان حاصل می کند. در این فصل ، بگذارید همه اینها را به طور مفصل بحث کنیم.

تگ استایل Amp
همانطور که در زیر نشان داده شده است، Amp دارای یک تگ استایل Amp با Amp سفارشی است –

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

در اصل برای نوشتن css سفارشی مورد نیاز صفحه استفاده می شود. لطفاً اضافه کردن ویژگی amp-custom را فراموش نکنید. در غیر این صورت برای اعتبار سنجی Amp مانند تصویر زیر شکست می خورد –

Amp Style Tag

Amp همچنین از cline درون خطی برای عناصر html پشتیبانی می کند همانطور که در زیر نشان داده شده است –

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

Amp از شیوه نامه خارجی پشتیبانی نمی کند و هنگامی که برای amp معتبر باشد اعتبار سنجی نخواهد کرد.

مثال

<!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 تأیید شد، خطای زیر را دریافت می کنیم:

آموزش استایل ها و CSS سفارشی در گوگل AMP

برای نمایش پاسخگویی عناصر در صفحه ، عناصر amp باید عرض و بلندی عنصر را در صفحه مشخص کنند. افزودن “layout = responsive” باعث می شود عنصر در صفحه نسبت تصویر را پاسخگو باشد.

منبع.

لیست جلسات قبل آموزش گوگل AMP

برچسب ها : آموزش برنامه نویسی آموزش برنامه نویسی موبایل

نویسنده مطلب erfan molaei

آموزش استایل ها و CSS سفارشی در گوگل AMP

آموزش استایل ها و CSS سفارشی در گوگل AMP

مثال

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

بدون دیدگاه

آموزش استایل ها و CSS سفارشی در گوگل AMP

مثال

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه