مرجع الشارات

Sofia Emelianova
Sofia Emelianova
GitHub

يمكنك تفعيل مختلف التراكبات وإيقافها وتسريع عملية التنقّل في شجرة نموذج العناصر في المستند باستخدام هذا المرجع الشامل للشارات في لوحة العناصر.

عرض الشارات أو إخفاؤها

لعرض شارات معيّنة أو إخفائها:

  1. افتح "أدوات مطوّري البرامج".
  2. انقر بزر الماوس الأيمن على عنصر في شجرة نموذج العناصر في المستند، وضَع علامة في مربّع شارة واحدة أو عدة شارات في القائمة الفرعية إعدادات الشارة.

قائمة "إعدادات الشارة"

تعرض لوحة العناصر الشارات المحدّدة بجانب العناصر المناسبة في شجرة نموذج العناصر في المستند. توضّح الأقسام التالية كل شارة.

عرض المصدر

تظهر شارة view-source بجانب العلامة <html> في جذر صفحة HTML. انقر عليها لعرض مصدر صفحتك في لوحة المصادر.

شارة &quot;عرض المصدر&quot;

توفّر هذه الشارة سير عمل بديلًا لخيار عرض مصدر الصفحة في قائمة سياق الصفحة (النقر بزر الماوس الأيمن) في Chrome:

  1. في Chrome، انقر بزر الماوس الأيمن على صفحة > فحص.
  2. في لوحة العناصر ، انقر على شارة view-source بجانب العلامة <html>.
  3. افحص مصدر الصفحة في لوحة المصادر.

شبكة

يكون عنصر HTML حاوية شبكة إذا تم ضبط السمة display في CSS على grid أو inline-grid. تحتوي هذه العناصر على شارات grid بجانبها لتفعيل التراكبات المقابلة أو إيقافها.

يمكنك تفعيل التراكب أو إيقافه في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، انقر على شارة grid بجانب العنصر ولاحِظ التراكب.

عنصر مركّب على الشبكة

يعرض التراكب الأعمدة والصفوف وأرقامها والفواصل بينها.

للتعرّف على كيفية تصحيح أخطاء تنسيق الشبكة، اطّلِع على مقالة فحص شبكة CSS.

شبكة فرعية

الشبكة الفرعية هي شبكة متداخلة تستخدم المسارات نفسها التي تستخدمها الشبكة الرئيسية. يكون العنصر حاوية شبكة فرعية إذا تم ضبط إحدى سمتَي grid-template-columns أو grid-template-rows أو كلتيهما على subgrid. تحتوي هذه العناصر على شارات subgrid بجانبها لتفعيل التراكبات المقابلة أو إيقافها.

يمكنك تفعيل التراكب أو إيقافه في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، انقر على شارة subgrid بجانب العنصر ولاحِظ التراكب.

تراكب الشبكة الفرعية

يعرض التراكب الأعمدة والصفوف وأرقامها والفواصل بينها في الشبكة الفرعية.

التعبير

يكون عنصر HTML حاوية مرنة إذا تم ضبط السمة display في CSS على flex أو inline-flex. تحتوي هذه العناصر على شارات flex بجانبها لتفعيل التراكبات المقابلة أو إيقافها.

يمكنك تفعيل التراكب أو إيقافه في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، انقر على شارة flex بجانب العنصر ولاحِظ التراكب.

تراكب مرن

يعرض التراكب مواضع العناصر الثانوية.

للتعرّف على كيفية تصحيح أخطاء التنسيقات المرنة، اطّلِع على مقالة فحص وتصحيح أخطاء نموذج flexbox في CSS.

يمكن لأدوات مطوّري البرامج رصد بعض إطارات الإعلانات ووضع علامة عليها. تحتوي هذه الإطارات على شارات ad بجانبها.

يمكنك العثور على إعلان في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، ابحث عن عنصر بجانبه شارة ad.

شارة الإعلان

لا يمكن النقر على شارة ad، ولكن إذا مرّرت مؤشر الماوس فوقها، سيظهر لك تلميح يقدّم سياقًا حول سبب تحديد العنصر كإعلان، مثل:

تلميح شارة الإعلان

  • تسلسل النصوص البرمجية: النصوص البرمجية التي شاركت في إنشاء العنصر
  • قواعد قائمة الفلاتر: القاعدة المحدّدة من قائمة الفلاتر (مثل EasyList) التي تطابقت مع العنصر أو المورد الذي تم تحميله

يمكنك أيضًا استخدام علامة التبويب العرض لـ تمييز إطارات الإعلانات باللون الأحمر.

الانتقال للأسفل

يكون عنصر HTML حاوية تمرير إذا تم ضبط السمة overflow في CSS على scroll أو auto عندما يكون هناك محتوى كافٍ يؤدي إلى حدوث تجاوز. تحتوي هذه العناصر على شارات scroll بجانبها.

شارة التمرير على عقدة شجرة نموذج العناصر في المستند

التمرير السريع

يمكن أن تحتوي حاويات التمرير على خصائص CSS تضبط نقاط الانطباق. تحتوي هذه العناصر على شارات scroll-snap بجانبها لتفعيل التراكبات المقابلة أو إيقافها.

يمكنك تفعيل التراكب أو إيقافه في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، انقر على شارة scroll-snap بجانب العنصر.
  3. حاوِل تمرير العنصر إلى اليمين ولاحِظ التراكب.

العنصر المركب لانطباق الانتقال للأعلى أو للأسفل

يعرض التراكب مواضع العناصر ونقاط التمرير السريع.

الحاوية

يكون عنصر HTML حاوية إذا كانت لديه السمة container-type في CSS. تحتوي هذه العناصر على شارات container بجانبها لتفعيل التراكبات المقابلة أو إيقافها.

يمكنك تفعيل التراكب أو إيقافه في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، انقر على شارة container بجانب العنصر.
  3. حاوِل تغيير حجم العنصر عن طريق سحب الزاوية السفلية اليمنى ولاحِظ تغيير التنسيق والتراكب.

تراكُب عناصر الحاوية

يعرض التراكب مواضع العناصر الثانوية.

للتعرّف على كيفية تصحيح أخطاء طلبات البحث عن الحاويات، اطّلِع على مقالة فحص وتصحيح أخطاء طلبات البحث عن حاويات CSS.

الخانة

عنصر HTML <slot> هو عنصر نائب يمكنك ملؤه بالمحتوى الخاص بك. بالإضافة إلى عنصر <template>، يتيح لك عنصر <slot> إنشاء أشجار نموذج عناصر في المستند منفصلة وعرضها معًا. تحتوي عناصر محتوى الخانة على شارات slot بجانبها تعمل كروابط تؤدي إلى الخانات المقابلة.

يمكنك العثور على شارة slot في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، انقر على شارة slot بجانب العنصر لتحديد موقع الخانة المقابلة. عرض الشارات في خانات
  3. ارجع إلى محتوى الخانة بالنقر على شارة reveal.

طبقة علوية

تساعدك هذه الشارة في فهم مفهوم الطبقة العلوية وعرضها. تعرض الطبقة العلوية المحتوى فوق جميع الطبقات الأخرى، بغض النظر عن z-index. عند فتح عنصر <dialog> باستخدام الطريقة .showModal()، يضعه المتصفّح في الطبقة العلوية.

لمساعدتك في عرض عناصر الطبقة العلوية، تضيف لوحة العناصر حاوية #top-layer إلى شجرة نموذج العناصر في المستند بعد علامة الإغلاق </html>.

تحتوي عناصر الطبقة العلوية على top-layer (N) شارات بجانبها، حيث يمثّل N رقم فهرس العنصر. الشارات هي روابط تؤدي إلى العناصر المقابلة في الحاوية #top-layer.

يمكنك العثور على شارة top-layer (N) في المعاينة التالية:

  1. في المعاينة، انقر على فتح مربّع الحوار.
  2. افحص مربّع الحوار.
  3. في شجرة نموذج العناصر في المستند، انقر على شارة top-layer (1) بجانب عنصر <dialog>. تنتقل بك لوحة العناصر إلى العنصر المقابل في الحاوية #top-layer بعد علامة الإغلاق </html>. حاوية الطبقة العليا والشارة
  4. ارجع إلى العنصر <dialog> بالنقر على شارة reveal بجانب العنصر أو ::backdrop.

الوسائط

تكون شارة media غير مفعَّلة تلقائيًا. عند تفعيلها، تظهر بجانب عناصر <audio> و<video> انقر على هذه الشارة لفتح لوحة الوسائط وتصحيح أخطاء الوسائط.

تم تفعيل شارة الوسائط في إعدادات الشارة وعرضها بجانب عنصر الفيديو.

لمزيد من المعلومات، اطّلِع على مقالة تصحيح أخطاء مشغّلات الوسائط باستخدام لوحة "الوسائط".

نافذة منبثقة

النافذة المنبثقة هي أي عنصر يتضمّن سمة popover، وهي مفيدة لمجموعة كبيرة من الأنماط التفاعلية، بما في ذلك التلميحات والتنبيهات والإشعارات وغير ذلك. تحتوي هذه العناصر على شارات popover بجانبها.

تفعّل هذه الشارة شارة top-layer بجانبها ترتبط بالعناصر المقابلة في الحاوية #top-layer.

يمكنك العثور على شارة popover في المعاينة التالية:

  1. في المعاينة، انقر على تفعيل النافذة المنبثقة أو إيقافها.
  2. افحص النافذة المنبثقة التي تظهر.

  3. في شجرة نموذج العناصر في المستند، انقر على شارة popover بجانب عنصر <div popover> تعرض لك لوحة العناصر شارة top-layer.

    شارة النافذة المنبثقة بجانب العنصر الذي يتضمّن سمة نافذة منبثقة

  4. اتّبِع الخطوات الواردة في قسم الطبقة العلوية.

لمزيد من المعلومات، اطّلِع أيضًا على https://web.dev/learn/css/popover-and-dialog.

نمط البداية

تحدّد القاعدة@starting-style الأنماط الأولية لعنصر قبل عرضه على الصفحة. هذا الإجراء مطلوب للعناصر التي يتم تحريكها من display: none، لأنّها تحتاج إلى حالة يتم تحريكها منها. تحتوي هذه العناصر على شارات starting-style بجانبها.

تفعّل هذه الشارة الأنماط في قاعدة @starting-style، ما يتيح لك الاطّلاع على الحركة قيد التنفيذ.

يمكنك العثور على شارة starting-style في المعاينة التالية:

  1. في المعاينة، انقر على فتح النافذة المنبثقة.
  2. افحص النافذة المنبثقة التي تظهر.

  3. في شجرة نموذج العناصر في المستند، فعِّل شارة starting-style أو أوقِفها بجانب عنصر <div popover>.

    شارة نمط البدء بجانب العنصر الذي يتضمّن القاعدة ‎ @starting-style

  4. لاحِظ الحركة قيد التنفيذ والأنماط التي يتم تطبيقها في علامة التبويب العناصر > الأنماط.

لمزيد من المعلومات، اطّلِع أيضًا على مقالة تحريك النوافذ المنبثقة.