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

4 سال پیش

امتیاز دهید post

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

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

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

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

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

&lt;style amp-custom&gt;
   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;
   }
&lt;/style&gt;

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 پشتیبانی می کند همانطور که در زیر نشان داده شده است –

&lt;div style = "color:green;margin-left:30px;"&gt;
Welcome to TutorialsPoint&lt;/p&gt;

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

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

مثال

&lt;!doctype html&gt;
&lt;html amp lang = "en"&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
      &lt;title&gt;Google AMP - Dynamic Css Classes&lt;/title&gt;
         &lt;link rel = "canonical" href = "
         http://example.ampproject.org/article-metadata.html"&gt;
      &lt;meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1"&gt;
      
      &lt;style amp-boilerplate&gt;
         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}}
      &lt;/style&gt;
      
      &lt;noscript&gt;
         &lt;style amp-boilerplate&gt;
            body {
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         &lt;/style&gt;
      &lt;/noscript&gt;
         &lt;script async custom-element = "amp-bind" src = "
      https://cdn.ampproject.org/v0/amp-bind-0.1.js"&gt;
      &lt;/script&gt;
      
      &lt;script async custom-element = "amp-dynamic-css-classes" 
         src = "https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"&gt;
      &lt;/script&gt;
      
      &lt;link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.9 8.0/css/materialize.min.css"&gt;
      &lt;style amp-custom&gt;
         p {
            padding: 1rem;
            font-size:25px;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h3&gt;Google AMP - Dynamic Css Classes&lt;/h3&gt;
      &lt;div style = "color:green;margin-left:30px;"&gt;
      Welcome to TutorialsPoint&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google AMP - Dynamic Css Classes</title>

http://example.ampproject.org/article-metadata.html">

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>

body {

-webkit-animation:none;

-moz-animation:none;

-ms-animation:none;

animation:none

}

</style>

</noscript>

https://cdn.ampproject.org/v0/amp-bind-0.1.js">

</script>

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

</script>

href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.9 8.0/css/materialize.min.css">

p {

padding: 1rem;

font-size:25px;

}

</style>

</head>

<body>

<h3>Google AMP - Dynamic Css Classes</h3>

Welcome to TutorialsPoint</p>

</body>

</html>

هنگامی که با اعتبار سنج AMP تأیید شد، خطای زیر را دریافت می کنیم:

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

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

منبع.

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

امتیاز دهید post

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

نویسنده مطلب saber

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

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

مثال

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

دیدگاه شما

بدون دیدگاه

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

مثال

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

دیدگاه شما

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

بدون دیدگاه