لغة CSS المعتمدة

مثل كل صفحات الويب، يتم تحديد أنماط صحفات AMP باستخدام لغة CSS، ولكن لا يمكنك الإشارة إلى أوراق الأنماط الخارجية (باستثناء الخطوط المخصصة). وهناك أيضًا أنماط معيّنة غير مسموح بها نظرًا لأغراض متعلقة بالأداء؛ فسمات الأنماط المضمّنة غير مسموح بها.

يجب أن تبقى جميع الأنماط في رأس المستند (راجع إضافة أنماط إلى إحدى الصفحات). ولكن يمكنك استخدام المعالجات التمهيدية والنماذج في CSS لإنشاء صفحات ثابتة لإدارة المحتوى التابع لك على نحو أفضل.

تتوفّر مكوّنات AMP مع أنماط افتراضية لجعل إنشاء الصفحات التفاعلية سهلاً على نحو معقول. ويتم تحديد هذه الأنماط في amp.css.

استخدام معالجات CSS التمهيدية

يعمل الناتج الناشئ عن المعالجات التمهيدية في AMP تمامًا مثل أي صفحة ويب أخرى. على سبيل المثال، يستخدم الموقع amp.dev لغة Sass. (ونحن نستخدم Grow لإنشاء صفحات AMP الثابتة التي يتكوّن منها موقع amp.dev.)

عند استخدام المعالجات التمهيدية، عليك بالانتباه بشكل خاص إلى العناصر التي يتم تضمينها؛ فلا تحمّل سوى العناصر التي تستخدمها صفحاتك. فمثلاً، يتضمّن head.html جميع ترميزات AMP المطلوبة ولغة CSS المضمّنة من ملفات المصدر *.scss. كما يتضمّن أيضًا النص البرمجي للعنصر المخصص لـ amp-youtube، وغيره، وهكذا يمكن أن تتضمن العديد من الصفحات في الموقع مقاطع فيديو youtube مضمّنة.

 

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">
  <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">

  <title>AMP Project</title>
  <link rel="shortcut icon" href="/static/img/amp_favicon.png">
  <link rel="canonical" href="{{doc.url}}">
  <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet" type="text/css">
  <style amp-custom>
  {% include "/assets/css/main.min.css" %}
  </style>

  <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 src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>

للاطلاع على كيفية تحويل ما سبق إلى AMP HTML منسّق، اعرض مصدر أي صفحة في amp.dev. (في Chrome، انقر بزر الماوس الأيمن واعرض مصدر الصفحة.)

أنماط غير مسموح بها

لا يُسمح بالأنماط التالية في صفحات AMP:

النمط المحظور	الوصف
سمات النمط المضمّنة	يجب تحديد جميع الأنماط في `<head>` بالصفحة، ضمن علامة `<style amp-custom>`.
محدد الأهمية `!`	غير مسموح باستخدامه. وهذا شرط ضروري لتمكين AMP من تطبيق قواعد تغيير حجم العنصر.
`<link rel=”stylesheet”>`	غير مسموح باستخدامه باستثناء الخطوط المخصصة.
`*` (المحدد العام)	الآثار السلبية للأداء ويمكن استخدامه للتحايل على قيود المحددات الأخرى.
`:not()`	يمكن استخدامه لمحاكاة المحدد العام.
المحددات الصورية، والفئات الصورية، والعناصر الصورية	لا يُسمح للمحددات الصورية والفئات الصورية والعناصر الصورية إلا في المحددات التي تحتوي على أسماء علامات ويجب ألا تبدأ أسماء العلامات تلك بـ `amp-`. مثال صحيح: `a:hover, div:last-of-type` مثال غير صحيح: `amp-img:hover, amp-img:last-of-type`
أسماء فئات `-amp-` وعلامات `i-amp-`	لا يمكن أن تبدأ أسماء الفئات، في أوراق أنماط المؤلف، بالسلسلة `-amp-`. وهو محجوزة للاستخدام الداخلي فقط من خلال وقت تشغيل AMP. ويترتب على ذلك، أن ورقة أنماط المستخدم لا يمكنها الإشارة إلى محددات CSS لفئات `-amp-` وعلامات `i-amp`.

خصائص النقل والصور المتحركة المدرجة بالقائمة البيضاء

لا يسمح AMP سوى بعمليات النقل والرسوم المتحركة للخصائص التي يمكن تسريعها من خلال وحدة معالجة الرسومات في برامج التصفّح الشائعة. يضم مشروع AMP حاليًا opacity وtransform و و-vendorPrefix-transform.

في الأمثلة التالية، يجب أن تكون <property> في القائمة البيضاء:

transition <property> (Also -vendorPrefix-transition)
@ @keyframes name { from: {<property>: value} to {<property: value>} } (also @-vendorPrefix-keyframes)

لا يمكن تحديد نمط الخاصية overflow (وoverflow-y, overflow-x) كـ “auto” أو “scroll”. ولا يمكن أن يكون لدى أي عنصر محدد بواسط المستخدم في مستند AMP شريط تمرير.

استثناء الخطوط المخصصة

لا يمكن أن تحتوي صفحات AMP على أوراق أنماط خارجية، باستثناء الخطوط المخصصة. تتمثل الطريقتان المتوافقتان مع الإشارة إلى الخطوط المخصصة في علامات الروابط التي تشير إلى مقدمي الخطوط المدرجين في القائمة البيضان وتضمين @font-face.

لا يمكن وضع مقدمي الخطوط في القائمة البيضاء إلا في حالة توافقها مع عمليات دمج ر ف قط وعرضها من خلال HTTPS. وفي الوقت الحالي، لا تحوي القائمة البيضاء سوى هذه الأصول حيث يُسمح لها بعرض الخطوط من خلال علامات الروابط:

نموذج لعلامة رابط تشير إلى مقدم خطوط مدرج بالقائمة البيضاء، وهو Google Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

بدلاً من ذلك، يمكنك استخدام @font-face. ينبغي جلب الخطوط المتضمّنة عبر @font-face من من خلال نظام HTTP أو HTTPS.

Written by @Meggin
with contributions from @pbakaus , @CrystalOnScript , @bpaduch , @choumx