تحديد خدمة مقارنة الأسعار (CSS) غير الصالحة والملغاة وغير النشطة وغير ذلك

Sofia Emelianova

يفترض هذا الدليل أنّك على دراية بفحص CSS في "أدوات مطوّري البرامج في Chrome". يمكنك الاطّلاع على عرض CSS وتغييرها للتعرّف على الأساسيات.

فحص خدمة مقارنة الأسعار (CSS) التي أنشأتها

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

أول شئ يجب فعله هو فحص العنصر والتأكد من تطبيق ملف CSS الجديد على العنصر.

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

فهم CSS في جزء "الأنماط"

تتعرّف لوحة الأنماط على العديد من أنواع مشاكل CSS ويتم تمييزها بطرق مختلفة.

أدوات الاختيار المطابقة وغير المطابقة

تعرض لوحة الأنماط أدوات اختيار مطابِقة في نص عادي وتلك التي لا تتطابق مع نص فاتح.

قيم وتعريفات غير صالحة

يتم شطب لوحة الأنماط وتعرض رموز التحذير إلى جانب ما يلي:

• بيان CSS كامل (سمة وقيمة) عندما تكون سمة CSS غير صالحة أو غير معروفة.
• يتم استخدام القيمة فقط عندما تكون سمة CSS صالحة ولكن القيمة غير صالحة.

سياسة تم إلغاؤها

تستثني لوحة الأنماط السمات التي تلغيها المواقع الأخرى وفقًا للترتيب المتتالي.

في هذا المثال، تلغي سمة النمط width: 300px; في العنصر width: 100% في الفئة .youtube.

غير نشطة

يتم عرض لوحة الأنماط بنص فاتح ويضع رموز معلومات بجوار الخصائص الصالحة ولكن ليس لها أي تأثير بسبب الخصائص الأخرى.

هذه السمات البسيطة غير نشطة بسبب منطق CSS، وليس الترتيب المتتالي.

نقطة رئيسية: تختلف المواقع غير النشطة البسيطة عن المواقع الإلكترونية غير المكتسبة البسيطة. تحتوي السمات غير النشطة على رموز. مرِّر مؤشر الماوس فوق الرمز للحصول على تلميح حول المشكلة التي حدثت.

في هذا المثال، توقِف السمة display: block; الترميزَين justify-content وalign-items اللذَين يتحكّمان في التنسيقات المرنة أو تنسيقات الشبكة.

مكتسَب وغير مكتسَب

تعرض لوحة الأنماط الخصائص في أقسام Inherited from <element-name> بناءً على الاكتساب التلقائي:

• تظهر الإعدادات المُكتسَبة تلقائيًا في النص العادي.
• تكون العناصر غير المكتسَبة بشكل تلقائي في نص فاتح.

نقطة رئيسية:

• تختلف السمات الخالية من العناصر المكتسَبة عن الخصائص غير النشطة ذات اللون البسيط. لا تحتوي المواقع غير المكتسبة على رموز وتتوفر في الأقسام المقابلة.
• تجاوز الوراثة التلقائية لا يؤثر في طريقة عرض لوحة الأنماط للخصائص: pale أو لا.

اختصار

تتيح لك خصائص الاختصارات (الموجزة) تعيين خصائص CSS متعددة في وقت واحد ويمكن أن تجعل ورقة الأنماط أكثر قابلية للقراءة. ومع ذلك، بسبب الطبيعة القصيرة لهذه السمات، قد تفوتك سمة طويلة (الدقيقة) تتجاهل موقعًا يتضمّنه الاختصار.

تعرض لوحة الأنماط الخصائص المختصرة كقوائم منسدلة تحتوي على جميع الخصائص التي تم تقصيرها.

في هذا المثال، يتم في الواقع إلغاء خاصيتين من أربع خصائص مختصرة.

إعداد غير قابلة للتعديل

يعرض لوحة الأنماط الخصائص التي لا يمكن تعديلها باستخدام النص المائل. على سبيل المثال، لا يمكن تعديل خدمة CSS من المصادر التالية:

• user agent stylesheet: ورقة الأنماط التلقائية في Chrome.

  

• سمات HTML ذات الصلة بالأنماط في العنصر، مثل الارتفاع والعرض واللون وغير ذلك. ويمكنك تعديلها في شجرة نموذج العناصر في المستند (DOM) ويؤدي ذلك إلى تحديث CSS في لوحة الأنماط، ولكن ليس العكس.

  في هذا المثال، يتم ضبط السمة height="48" في العنصر <svg> على 50. يؤدّي ذلك إلى تعديل السمة المقابلة ضمن svg[Attributes Style] في لوحة الأنماط.

افحص عنصر ما لا يزال غير مصمَّم بالطريقة التي تعتقد بها

لمحاولة التعرّف على المشكلة، يمكنك التحقّق مما يلي:

• وثائق CSS وخصوصية المحدد في التلميحات في جزء الأنماط.
• لوحة المحسوبة للاطّلاع على CSS النهائي الذي تم تطبيقه على عنصر ومقارنتها بما أعلنت عنه

يعرض جزء العناصر > الأنماط المجموعة الدقيقة لقواعد CSS كما تمت كتابتها في أوراق أنماط مختلفة. في المقابل، تعرض لوحة العناصر > المحسوبة قيم CSS التي تم حلها والتي يستخدمها Chrome لعرض أحد العناصر:

• CSS مشتق من الاكتساب
• الفائزون في Cascade
• الخصائص الطويلة (الدقيقة)، وليس المختصرة (المختصرة)
• القيم المحسوبة، على سبيل المثال، font-size: 14px بدلاً من font-size: 70%

فهم CSS في الجزء المحسوب

تعرض اللوحة المحسوبة أيضًا خصائص مختلفة بشكل مختلف.

تم تعريفه ومكتسبه

تسرد اللوحة Computed الخصائص المعلنة في أي ورقة أنماط بخط عادي، سواء الخاصة بالعنصر أو الموروثة. انقر على رمز التوسيع بجانب الملفات للاطّلاع على المصدر.

للاطّلاع على التعريف في لوحة الأنماط، مرِّر مؤشر الماوس فوق الموقع الموسّع وانقر على زر السهم .

للاطّلاع على التعريف في لوحة المصادر، انقر على الرابط المؤدي إلى ملف المصدر.

بالنسبة إلى المواقع التي تحتوي على مصادر متعددة، تعرض لوحة الحساب المحسوب الفائز في سلسلة متتالية أولاً.

وقت التشغيل

تعرض اللوحة المحسوبة قيم الخصائص المحسوبة في وقت التشغيل بنص فاتح.

في هذا المثال، حسب Chrome ما يلي للعنصر <ul>:

• نسبة width النسبية الخاصة بالعنصر الرئيسي: <div>
• تمثّل هذه السمة height نسبة إلى عناصرها الثانوية، وهي عنصرَي <li>.

غير مكتسَبة ومخصّصة

لجعل اللوحة تم حسابها تعرض جميع السمات وقيمها، ضَع علامة في المربّع عرض الكل. تشمل جميع المواقع ما يلي:

• القيم الأولية للمواقع غير المكتسبة في نص فاتح.
• الخصائص المخصّصة: مع بادئة -- في النص العادي. يتم اكتساب هذه الخصائص تلقائيًا.

نقطة رئيسية: لا يؤثر تجاوز الإعدادات التلقائية للتوريث في الطريقة التي تعرض بها اللوحة Computed السمات التالية: pale or not.

لتقسيم هذه القائمة الكبيرة إلى فئات، تحقق من المجموعة.

يعرض هذا المثال القيم الأولية للمواقع غير المكتسبة ضمن الرسوم المتحركة والخصائص المخصّصة ضمن متغيرات CSS.

البحث عن نُسخ طبق الأصل

لفحص خاصية معيّنة والتكرارات المحتملة لها، اكتب اسم هذه الخاصية في مربّع النص الفلتر. يمكنك القيام بذلك في كلا الجانبين الأنماط والمحسوبة.

راجِع البحث في CSS لعنصر وفلترته.

العثور على خدمة مقارنة الأسعار (CSS) غير المستخدَمة

راجِع التغطية: العثور على محتوى JavaScript وCSS غير المستخدَم.