حاسبة خصوصية CSS

ما الخصوصية في CSS؟

حين تنطبق قاعدتان من CSS على العنصر نفسِه وتمسّان الخاصية نفسَها، فالخصوصيةُ هي التي تحكم أيَّهما يغلب. وتُحسب من المحدِّد وحده — لا من موضع القاعدة ولا من مظهرها المعقّد — ومواصفةُ المحدِّدات تعرّفها ثلاثةَ أعدادٍ لا عددًا واحدًا.

الأول، أ، عددُ محدِّدات المعرِّف. والثاني، ب، يعدّ معًا محدِّداتِ الأصناف ومحدِّداتِ الخصائص والأصنافَ الزائفة — فمحدِّدُ الخاصية يزن تمامًا ما يزنه الصنف. والثالث، ج، يعدّ محدِّداتِ الوسوم والعناصرَ الزائفة. أما المحدِّد الشامل فلا يُحسب له شيء البتة.

ألصق محدِّدًا في الأعلى فتحصل على تلك الأرقام الثلاثة، ومعها سطرٌ لكلّ جزءٍ يشرح في أيّ عمودٍ وقع ولماذا. وإن وضعتَ محدِّدًا ثانيًا أخبرتك الأداةُ أيُّهما يغلب.

كيف تستعملها

1. اكتب محدِّدًا أو ألصقه. من div إلى ‎#nav .item:not(.disabled)::before. وقوائمُ المحدِّدات المفصولةُ بفواصل تعمل أيضًا، ويُحسب كلُّ مدخلٍ فيها على حدة.
2. اقرأ التفصيل لا المجموع وحده. لكلّ محدِّدٍ بسيطٍ سطرُه يقول في أيّ عمودٍ حُسب ولماذا، فيُشرح المجموعُ المفاجئ بدل أن يُقرَّر تقريرًا.
3. أضف محدِّدًا ثانيًا للمقارنة. تحصل على الغالب، وإلى جانبه حسابُ العشرات — مع تنبيهٍ في الحالات التي يشير فيها ذلك الاختصار إلى الجهة الخطأ.

لماذا لا تغلب أحدَ عشرَ صنفًا معرِّفًا واحدًا

يتعلّم كلُّ الناس تقريبًا الخصوصيةَ حسابًا: المعرِّف بمئة، والصنف بعشرة، والوسم بواحد، تُجمع ويغلب الأكبر. وهي كذبةٌ نافعة تعمل مع كلّ محدِّدٍ يكتبه أحدٌ تقريبًا، ثم تتوقف عن العمل دون إنذار.

والمواصفة صريحة: الأرقامُ الثلاثة تُقارَن عمودًا في كلّ مرة. فمن كانت أ عنده أكبر غلب فورًا، وإن تعادلت الألِفان نُظر إلى ب، وعندها فقط إلى ج. لا حَمْلَ ولا مجموعَ ولا سعرَ صرف. فالمعرِّفُ الواحد يغلب أيَّ عددٍ من الأصناف — مئةً أو ألفًا.

وعند الأحد عشر يبدأ الاختصار بالكذب، وليس هذا تخمينًا. فأحدَ عشرَ صنفًا تسجّل 110 مقابل 100 للمعرِّف، فيقول الحسابُ إنّ الأصناف تغلب بينما يقول التتالي إنّ المعرِّف هو الغالب. وعشرةُ أصنافٍ تسجّل 100 أيضًا، وهو تعادلٌ يحلّه الاختصارُ كما تحلّه القاعدةُ الحقيقية بمحض المصادفة. وتأتي الأداةُ محمَّلةً بذلك الزوج بعينه لترى النموذجين يختلفان بدل أن تصدّق ذلك على عهدة أحد.

وليست حالةً افتراضيةً كذلك. فورقةُ أنماطٍ قائمةٌ على أصناف المنفعة تكدّس الأصنافَ على العنصر الواحد أمرًا اعتياديًّا، والمواصفةُ تنصّ على أنّ تكرار المحدِّد البسيط يزيد الخصوصيةَ فعلًا: فـ‎.btn.btn.btn تساوي 0-3-0. والأحدَ عشرَ أقربُ ممّا يبدو.

الأجزاء التي توقِع الناس

لأربعةٍ من الأصناف الزائفة قواعدُها الخاصة، وعندها تخطئ الحساباتُ اليدوية. فـ‎:is() و‎:not() و‎:has() لا تعدّ نفسَها البتة — بل تأخذ كلٌّ منها خصوصيةَ أكثر المحدِّدات تخصيصًا في داخلها، فـ‎:not(#a) تساوي معرِّفًا كاملًا. أما ‎:where() فعلى النقيض وهي النافعة: تُستبدل بصفر، فلا يسهم ما بداخلها بشيءٍ مهما بدا مخصَّصًا، وهذا بعينه ما يجعلها الأداةَ الصحيحة لأنماطٍ افتراضيةٍ تريدها سهلةَ التجاوز.

و‎:nth-child() و‎:nth-last-child() هما الزوجُ الغامض. تُحسب كلٌّ منهما صنفًا زائفًا واحدًا عن نفسها، ثم يُضاف أكثرُ المحدِّدات تخصيصًا في جملة of إن وُجدت — فـ‎:nth-child(2n of .item) تساوي 0-2-0 لا 0-1-0.

ثم يأتي فخٌّ تاريخيٌّ محض. فـ‎:before و‎:after و‎:first-line و‎:first-letter عناصرُ زائفةٌ مكتوبةٌ بنقطتين مفردتين، وهو مسموحٌ توافقًا مع CSS2. والنقطتان المفردتان تجعلانها تبدو أصنافًا زائفة، ومع ذلك تُحسب في العمود الثالث مع الوسوم. وكلُّ اسمٍ آخر بنقطتين مفردتين صنفٌ زائفٌ حقيقيٌّ يُحسب في العمود الثاني.

حدودٌ صريحة

الخصوصيةُ خطوةٌ واحدة من التتالي، وهذه الصفحة تحسب تلك الخطوة وحدها. فقبلها يأتي الأصلُ والأهمية — فتصريحٌ بـ‎!important يغلب تصريحًا عاديًّا مهما قالت المحدِّدات، وطبقاتُ التتالي يُنظر فيها قبل الخصوصية كذلك. والأنماطُ السطرية خارجَ ثلاثيّ المحدِّد أصلًا، وما من محدِّدٍ تكتبه يتجاوزها. وبعد الخصوصية، إن بقيت قاعدتان متعادلتين، غلبت المتأخّرةُ في ترتيب الشفرة — وهذا معنى نتيجة التعادل هنا.

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

وأمرٌ آخر يستحقّ المعرفة: تسمح المواصفةُ للتطبيقات بقصّ القيم الثلاث إن ضاقت بها الذاكرة، فقد يُسقَف محدِّدٌ عبثيٌّ في متصفحٍ حقيقيٍّ بدل أن يُحسب بدقة. وما من شيءٍ تكتبه بيدك يقترب من ذلك.

والأرقامُ هنا فُحصت مقابل الأمثلة الأربعة عشر المحلولة في المواصفة نفسِها، ومقابل تطبيقٍ مرجعيٍّ على حدة على 980 محدِّدًا مولَّدًا، دون خلافٍ واحد.

لماذا هي مجانية؟

لأن تشغيلها لا يكلّف شيئًا. فالتحليلُ والعدّ يجريان في متصفحك؛ لا يُرفع محدِّد، ولا يرى ورقةَ أنماطك أيُّ خادم، ولا حسابَ في الأمر.

والقواعدُ من مواصفة محدِّدات CSS لا من درسٍ تعليمي، والاختباراتُ التي تتحقق منها محفوظةٌ إلى جانب الشفرة — ومنها أمثلةُ المواصفة نفسِها، وهي معيارٌ أعلى من موافقة حاسبةٍ أخرى.