مختبر محددات CSS
انظر ما الذي يطابقه محددك

ما الذي يفعله مختبر محددات CSS

المحدد سؤال عن ترميزك. ومختبر محددات css هذا يجيب عنه أمامك، لذلك يختفي التخمين. الصق الترميز، واكتب المحدد، ثم اقرأ العناصر التي يصل إليها.

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

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

لا شيء يُثبَّت. لذلك تلصق قصاصة، وتقرأ الجواب، ثم تغلق التبويب وقتما شئت.

كيف يعمل مختبر محددات CSS

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

محرك المطابقة هو محرك المتصفح. ولأن قواعد Selectors Level 4 طويلة ومليئة بالحالات الطرفية، فإن محركًا مكتوبًا باليد سينحرف عن الصفحات الحقيقية عاجلًا أو آجلًا. لذلك تسأل هذه الصفحة المحرك الموجود في متصفحك أصلًا، لأنه المحرك نفسه الذي سيحكم على موقعك.

تبقى النسخة المُعاد بناؤها منفصلة. لذلك لا أنماط لها، ولا سكربتات، ولا تخطيط. وهذا مقصود، لأن السؤال هنا هو أي العناصر يصل إليها المحدد، لا كيف ستظهر.

جرّب محددًا على ترميزك

المحدد الذي يعمل في درس قد يخطئ ترميزك مع ذلك. لذلك فإن الاختبار الصادق هو قصاصتك، ملصوقة كما هي. انسخ كتلة من شيفرة مصدر الصفحة وضعها هنا.

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

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

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

ما الذي يُسقَط قبل المطابقة

تتعامل هذه الأداة مع ما تلصقه كنص، لا كصفحة أبدًا. لذلك تترك إعادة البناء وسوم script وstyle وأطر iframe والعناصر المدمجة خارجها تمامًا.

وتسلك خواص الأحداث الطريق نفسه. ولأن الصفحة الحيّة وحدها تستفيد من onclick أو onerror، تُسقطها إعادة البناء مع الوسوم التي كانت تحملها. كما أن عنوان javascript: في خاصية href يفقد وسمه كذلك.

أما الباقي فينجو سليمًا. لذلك تبقى أصنافك ومعرّفاتك وخواص data والتداخل كلها هناك لكي يتعلّق بها المحدد.

مختبر محددات jQuery دون jQuery

نصف المحددات التي يلصقها الناس ليست CSS على الإطلاق. فهي تأتي من jQuery، الذي أضاف صيغه الخاصة مثل :first و:eq() و:contains(). ومختبر محددات css بسيط كان سيرفضها بلا شك.

أما هذا فيجيب على أي حال. ولأن تلك الصيغ تُختصر إلى موضع أو اختبار نص على قائمة مطابقات، تطبّقها الصفحة بنفسها بعد تشغيل جزء CSS. لذلك يعيش مختبر محددات jquery هنا دون سطر واحد من jQuery في الصفحة.

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

وبعض الصيغ لا نظير لها. على أي حال تسمّيها الصفحة بدلًا من التظاهر، وهذا هو الشيء المفيد الوحيد مع محدد لا يستطيع شيء الوصول إليه.

كيف يختلف :first و:eq عن CSS

المصائد هي تلك التي تبدو بريئة. فـ :first يأخذ عنصرًا واحدًا من قائمة المطابقات كلها، لكن :first-child و:first-of-type يسألان عن موضع العنصر بين أشقائه.

وهذا الفرق يعضّ على ترميز حقيقي. لأن قائمة من عشرة عناصر فيها عشرة مرشحين لـ first-of-type في عشرة آباء مختلفين، لكن واحدًا منهم فقط هو المطابقة الأولى في القائمة. لذلك تجيب الصيغتان عن سؤالين مختلفين.

حاسبة أولوية CSS

المطابقة نصف حكاية القاعدة فقط. والنصف الآخر هو القوة، التي يحسمها التراتب بعدّ أجزاء المحدد. لذلك تورد حاسبة أولوية css هذه ذلك العدّ على صورة الأرقام الثلاثة التي تستخدمها المتصفحات فعلًا.

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

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

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

أي المحددين يفوز

الصق محددين فيأتي الجواب في الحال. ولأن الثلاثيتين تظهران جنبًا إلى جنب، يبدو الفائز دون عدّ أي شيء باليد.

وتسمّي الصفحة التعادل تعادلًا. ثم تفوز القاعدة التي تظهر لاحقًا في ورقة الأنماط، وتقول الصفحة ذلك بدلًا من أن تدعك تتذكره.

اقرأ محددًا بكلمات واضحة

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

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

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

والعادة نفسها تساعد مع ترميز لم تكتبه أنت. فبعد قراءة سريعة للمحدد، تشرح نظرة إلى خرج مصغّر HTML أو إلى شيفرة مصدر الصفحة باقي الحكاية غالبًا.

محدد لعنصر واحد

أحيانًا يأتي العنصر أولًا وتحتاج إلى المحدد الذي يصل إليه. لذلك اختر عقدة في الشجرة المحلَّلة، فتقترح الصفحة أقصر محدد يصل إلى ذلك العنصر وحده.

والهدف قصير، لا ذكي. لأن المعرّف وحده يكفي غالبًا، تجرّب الصفحة ذلك أولًا، ثم صنفًا، وبعد ذلك فقط مسارًا عبر الآباء.

ما لن تفعله هذه الصفحة

لن تشغّل JavaScript الخاص بك. لأن النسخة المُعاد بناؤها خامدة بالقصد، فإن محددًا يعتمد على سكربت عمل سابقًا لن يطابق هنا.

ولن تطابق حالة. لكن تلك خاصية أي ترميز منفصل: فـ hover وfocus وvisited وtarget تصف صفحة حيّة، لذلك تبقى فارغة.

ولن تنسّق شيئًا. مختبر المحددات يجيب عن سؤال أي العناصر، لأن شكل تلك العناصر سؤال منفصل للمتصفح الذي تستهدفه.