AMP
AR
English Deutsch Français Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

نظام تخطيط AMPHTML

نظرة عامة

الهدف الرئيسي لنظام التخطيط هو ضمان أنه يمكن لعناصر AMP التعبير عن التخطيط الخاص بها لكي يتمكن وضع التشغيل من تخمين حجم العناصر قبل استكمال أي موارد بعيدة مثل JavaScript واستدعاءات البيانات. يعتبر هذا الأمر في غاية الأهمية نظرًا لأنه يقلل بدرجة كبيرة التعطل في العرض والتمرير.

مع مراعاة ذلك، صُمم نظام تخطيط AMP لدعم عدد قليل من التخطيطات المرنة التي توفر ضمانات أداء جيدة. يعتمد هذا النظام على مجموعة من السمات مثل layout وwidth و height و sizes و heights للتعبير عن احتياجات التخطيط والحجم للعناصر.

السلوك

يبدأ عنصر AMP بلا حاوية (أي، layout != container) في وضع بلا حل/بلا بناء حيث يتم إخفاء كافة فروعة باستثناء عنصر نائب (راجع سمة placeholder). ربما ما تزال بيانات JavaScript والبيانات الأساسية الضرورية لإنشاء العنصر بالكامل قيد التنزيل والتهيئة، ولكن وقت تشغيل AMP يعرف بالفعل كيف يضبط الحجم والمخطط للعنصر بالاعتماد فقط على فئات CSS وسمات layout وwidth و height وmedia. في معظم الحالات، يتم ضبط حجم placeholder، في حالة تحديده، وضبط موضعه ليشغل كافة مساحة العنصر.

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

يتم ضبط حجم العنصر وعرضه استنادًا إلى سمات layout و width وheight وmedia بواسطة وقت التشغيل. ويتم تطبيق كافة قواعد التخطيط عن طريق CSS داخليًا. ويقال إن العنصر "يحدد الحجم" إذا كان الحجم قابلا للاستنباط من خلال أنماط CSS ولا يتغير تبعًا لفروعه: سواء كان متوفرًا مباشرة أو يتم إدراجه ديناميكيًا. هذا لا يعني أنه لا يمكن تغيير الحجم. يمكن أن يكون التخطيط مستجيبًا بالكامل كما هو الحال مع تخطيطات responsive وfixed-height و fill وflex-item. هذا يعني ببساطة أن الحجم لا يتغير بدون إجراء صريح من المستخدم، على سبيل المثال، أثناء العرض أو التمرير أو بعد التنزيل.

إذا تم تكوين العنصر بشكل غير صحيح، في PROD فلن يتم عرضه على الإطلاق، أما في وضع DEV فسوف يعرض وقت التشغيل العنصر بحالة خطأ. وتشمل الأخطاء المحتملة وجود قيم غير صالحة أو غير مدعومة لسمات layout و width وheight.

سمات التخطيط

width و height

تبعًا لقيمة سمة layout، يجب أن تحتوي عناصر مكونات AMP على سمة width وheight التي تحتوي على قيمة بكسل صحيح. ويتم تحديد سلوك التخطيط الفعلي حسب سمة layout كما هو موضح أدناه.

في حالات قليلة، إذا لم يتم تحديد width أو height، فإن وقت تشغيل AMP يمكن أن يستخدم القيم الافتراضية التالية:

  • amp-pixel: تعيين القيمة الافتراضية لكل من width و height إلى 0.
  • amp-audio: يتم استنتاج قيمة width وheight الافتراضية من المستعرض.

layout

توفر AMP مجموعة من التخطيطات التي تحدد سلوك مكون AMP في تخطيط المستند. ويمكنك تحديد تخطيط لأحد المكونات بإضافة سمة layout مع إحدى القيم المحددة في الجدول أدناه.

مثال: صورة باستجابة بسيطة، حيث يتم استخدام العرض والارتفاع لتحديد نسبة الأبعاد.

<amp-img
src="/img/amp.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image"

> </amp-img>
>

القيم المدعومة لسمة layout:

القيمة السلوك والمتطلبات
لا يوجد إذا لم يتم تحديد أي قيمة، يتم استنباط التخطيط للمكون كالتالي:
  • في حالة وجود height مع غياب width أو تعيينه إلى auto، يتم افتراض تخطيط fixed-height.
  • في حالة وجود width مع وجود height إلى جانب سمة sizes أو heights، يتم افتراض تخطيط responsive.
  • في حالة وجود width مع وجود height، يتم افتراض تخطيط fixed.
  • في حالة غياب width وheight ، يتم افتراض تخطيط container.
container يتيح العنصر لفروعه تحديد حجمها، مثل سمة div العادية في HTML . ويتم افتراض أن المكون ليس لديه تخطيط معين ولكنه يعمل كحاوية؛ ويتم عرض فروعه مباشرة.
fill يأخذ العنصر المساحة المتوفرة له—لكل من الطول والعرض. بعبارة أخرى، يتطابق تخطيط وحجم عنصر fill مع الأصل الخاص به. ولكي يملأ العنصر الحاوية الأصل الخاصة به، حدد تخطيط "ملء"، وتأكد من أن الحاوية الأصل تحدد position:relative أو position:absolute.
fixed يحتوي العنصر على عرض وطول ثابت بدون دعم للاستجابة. ويجب وجود سمات width و height. وتكون الاستثناءات الوحيدة مع مكونات amp-pixel وamp-audio.
fixed-height يأخذ العنصر المساحة المتوفرة له ولكنه يحتفظ بالارتفاع بدون تغيير. يعمل هذا التخطيط بصورة جديدة مع عناصر مثل amp-carousel التي تتضمن محتويات بوضع أفقي. ويجب وجود سمة height . بينما لا يجب وجود سمة width أو يجب أن تكون مساوية لـ auto.
flex-item يأخذ العنصر والعناصر الأخرى في الأصل الخاص به بنوع تخطيط flex-item المساحة المتبقية لحاوية الأصل عندما يكون الأصل حاوية مرنة (أي يكون، display: flex). ولا تكون سمتا width وheight مطلوبتين.
intrinsic يتخذ العنصر المساحة المتوفرة له ويغير حجم ارتفاعه تلقائيًا حسب نسبة الأبعاد المقدمة من سمتي width وheight حتى يصل إلى حجم العنصر المحدد بواسطة سمتي `العرض` و`الارتفاع` التي يتم تمريرها إلى amp-img، أو يصل إلى أحد قيود CSS، مثل `أقصى عرض`. يجب وجود سمتي العرض والارتفاع. يعمل هذا التخطيط جيدًا مع معظم عناصر AMP، بما في ذلك amp-img وamp-carousel وغيره. وتعتمد المساحة المتاحة على العنصر الأصل ويمكن تخصيصها أيضًا باستخدام max-width من CSS. يختلف هذا التخطيط عن responsive في أنه يحتوي على ارتفاع وعرض متأصل به. يتضح ذلك بصورة كبيرة داخل عنصر حُر حيث يعرض تخطيط responsive القيمة 0x0 ويتم تضخيم تخطيط intrinsic إما إلى حجم أصغر من حجمه الطبيعي أو إلى أي قيد من CSS.
nodisplay لا يتم عرض العنصر، ويأخذ مساحة صفر على الشاشة كما لو أن نمط عرضه كان none. يمكن تطبيق هذا التخطيط على كافة عناصر AMP. ويفترض أن العنصر يمكنه عرض نفسه وفقًا لإجراء المستخدم (على سبيل المثال، amp-lightbox). لا تكون سمتا width وheight مطلوبتين.
responsive يتخذ العنصر المساحة المتوفرة له ويغير حجم ارتفاعه تلقائيًا حسب نسبة الأبعاد المقدمة من سمتي width وheight. يعمل هذا التخطيط جيدًا مع معظم عناصر AMP، يشمل ذلك amp-img و amp-video وغيرها. وتعتمد المساحة المتوفرة العنصر الأصل ويمكن أيضًا تخصيصها باستخدام max-width في CSS. ويجب وجود سمتي width وheight.

ملاحظة: العناصر بتخطيط"layout=responsive" ليس لها حجم متأصل. يتم تحديد حجم العنصر من عنصر الحاوية الخاص بك. لضمان عرض عنصر AMP الخاص بك، يجب أن تحدد قيمة عرض وارتفاع لعنصر الحاوية . لا تحدد "display:table" في عنصر الحاوية لأنها تتجاوز عرض عنصر AMP، ما يؤدي إلى جعل عنصر AMP غير مرئي.

sizes

جميع عناصر AMP التي تدعم تخطيط responsive، تدعم أيضًا سمة sizes. وقيمة هذه السمة هي عبارة الأحجام كما هي موضحة في img sizes، ولكن يتم تمديدها إلى كافة العناصر، وليس الصور فقط. باختصار، تصف سمة sizes كيف يتم حساب عرض العنصر تبعًا لأحوال الوسائط.

عند تحديد سمة sizes جنبًا إلى جانب مع width وheight، تكون القيمة الافتراضية لـlayout هي responsive.

مثال: استخدام سمة sizes

في المثال التالي، إذا كان منفذ العرض أعرض من 320px، فسوف تكون الصورة بعرض 320 بكسل، خلاف ذلك، ستكون بعرض 100vw (100% من عرض منفذ العرض).

<amp-img
src="https://acme.org/image1.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"

> </amp-img>
>

disable-inline-width

تقوم سمة sizes من ذات نفسها بتعيين نمط width مضمن على العنصر. عند إقران disable-inline-width مع sizes، سيقوم عنصر AMP بملء قيمة sizes في العلامة الكامنة للعنصر، كما هو الحال مع إدراج img داخل amp-img، بدون تعيين width المدمج مثلما تفعل sizes في العادة من ذات نفسها في AMP.

مثال: استخدام سمة disable-inline-width

في المثال التالي، لا يتأثر عرض <amp-img>، ويتم استخدام sizes فقط لتحديد أحد المصادر من srcset.

<amp-img
src="https://acme.org/image1.png"
width="400"
height="300"
layout="responsive"
sizes="(min-width: 320px) 320px, 100vw"
disable-inline-width

> </amp-img>
>

heights

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

  1. تنطبق على ارتفاع العنصر وليس عرضه.
  2. يُسمح بالقيم المئوية، مثل 86%. في حالة استخدام قيمة نسبة مئوية، فهي تشير إلى نسبة عرض العنصر.

عندما يتم تحديد السمة heights جنبًا إلى جنب معwidth وheight، يتم تعيين layout بشكل افتراضي إلى responsive.

مثال: استخدام سمة heights

في المثال التالي، تكون القيمة الافتراضية لارتفاع الصورة 80% من العرض، ولكن إذا كان منفذ العرض أعرض من 500px، فسيكون الحد الأقصى للارتفاع 200px. نظرًا لأنه تم تحديد سمة heights مع width وheight, فسيكون التخطيط الافتراضي responsive.

<amp-img
src="https://acme.org/image1.png"
width="320"
height="256"
heights="(min-width:500px) 200px, 80%"

> </amp-img>
>

media

تدعم معظم عناصر AMP السمة media. وتكون قيمة media استعلام وسائط. إذا كان الاستعلام غير متطابق، لا يتم عرض العنصر على الإطلاق ولا يتم عرض الموارد الخاصة بك ومن المحتمل ألا يتم جلب موارده الفرعية. إذا غير إطار المستعرض الحجم أو الاتجاه، فسيتم إعادة تقييم استعلامات الوسائط ويتم إخفاء العناصر أو إظهارها تبعًا للنتائج الجديدة.

مثال: استخدام سمة media

في المثال التالي، لدينا صورتان باستعلامات وسائط أحادية التقييم. وتبعًا لعرض الشاشة، سيتم جلب إحدى الصورتين وعرضها. تتوفر السمة media على جميع عناصر AMP، لذا يمكن استخدامها مع العناصر بدون صور، مثل الإعلانات.

<amp-img
media="(min-width: 650px)"
src="wide.jpg"
width="466"
height="355"
layout="responsive"

> </amp-img>
> <amp-img
>   media="(max-width: 649px)"
>   src="narrow.jpg"
>   width="527"
>   height="193"
>   layout="responsive"
> </amp-img>
>

placeholder

يمكن تعيين سمة placeholder على أي عنصر HTML، وليس فقط على عناصر AMP. تشير سمة placeholder إلى أن العنصر المعلم بهذه السمة يتصرف مثل عنصر نائب لعنصر AMP الأصل. وفي حالة تحديده، يجب أن يكون العنصر النائب فرعًا مباشرة لعنصر AMP. افتراضيًا، يتم عرض العنصر النائب مباشرة لعنصر AMP، حتى لو لم يتم تنزيل موارد عنصر AMP أو تهيئتها. وبمجرد أن يصبح عنصر AMP جاهزًا، فإنه يخفي العنصر النائب له ويُظهر المحتوى. وعلى حسب تنفيذ العنصر يتم تحديد السلوك الفعلي للعنصر النائب.

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">
<amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>

fallback

يمكن تعيين سمة fallback على أي عنصر HTML، وليس عنصر AMP فقط. يشير مصطلح الاحتياط إلى السماح للعنصر بالتواصل مع القارئ لتعريفه بأن المستعرض لا يدعم العنصر. وفي حالة تحديده، يجب أن يكون العنصر الاحتياطي فرعًا مباشرة لعنصر AMP. وعلى حسب تنفيذ العنصر، يتم تحديد السلوك الفعلي للاحتياط.

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">

  <div fallback>Cannot play animated images on this device.</div>
</amp-anim>

noloading

تشير سمة noloading إلى ما إذا تم إيقاف تشغيل "مؤشر التحميل" لهذا العنصر أم لا. معظم عناصر AMP مدرجة على أنها تسمح بإظهار "مؤشر تحميل"، وهو الرسم المتحرك الأساسي الذي يعرض العنصر الذي لم يتم تحميله بالكامل. يمكن للعناصر التخلي عن هذا السلوك بإضافة هذه السمة.

(tl;dr) ملخص متطلبات التخطيطات والسلوكيات

يوضع الجدول التالي المعلمات المقبولة وفئات CSS والأنماط المستخدم مع سمة layout. لاحظ أن:

  1. أي فئة CSS معلمة بالبادئة -amp- والعناصر المعلمة بالبادئة i-amp- تعتبر داخلية في AMP وغير مسموح باستخدامها في جداول أنماط المستخدمين. ويتم عرضها هنا فقط لأغراض معلوماتية.
  2. بالرغم من تحديد width وheight في الجدول على أنها مطلوبة، قد يتم تطبيق القواعد الافتراضية كما هو الحال مع amp-pixel وamp-audio.
التخطيط العرض/
الارتفاع مطلوب؟		 يحدد الحجم؟ عناصر إضافية "شاشة" CSS
container لا لا لا block
fill لا نعم، حجم الأصل لا block
fixed نعم نعم، محدد بواسطة width وheight. لا inline-block
fixed-height height فقط؛ width يمكن أن يكون auto نعم، محدد بواسطة الحاوية الأصل و height. لا block
flex-item لا لا نعم، تبعًا للحاوية الأصل. block
intrinsic نعم نعم، تبعًا للحاوية الأصل ونسبة أبعاد width:height. نعم، i-amphtml-sizer. block (يتصرف مثل عنصر مستبدل)
nodisplay لا لا لا none
responsive نعم نعم، تبعًا للحاوية الأصل ونسبة أبعادwidth:height. نعم، i-amphtml-sizer. block