دليل المبتدئين لخصوصية CSS

نشرت: 2023-03-29

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

يمكن أن تكون قواعد خصوصية CSS من أكثر المفاهيم إرباكًا لفهمها ، خاصة للمبتدئين.

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

لذلك دعونا نقسم ما هي خصوصية CSS وكيفية استخدامها بكفاءة.

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

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

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

كيف يعمل؟

يمكن تصنيف خصوصية المحدد في المستويات الأربعة التالية:

  1. النمط المضمن أو CSS
  2. المعرفات
  3. الفئات والفئات الزائفة والسمات
  4. العناصر أو العناصر الزائفة

الأنماط المضمنة أو CSS ، حيث يتم تطبيق CSS مباشرة على مستند HTML ، تبدو هكذا <p> . ستتمتع الأنماط المضمنة دائمًا بأعلى مستوى من الخصوصية.

الثانية في هذا الترتيب هي المعرفات ، مثل #content . لذا فإن أي محدد يستخدم معرّفًا سيحصل على ثاني أعلى مستوى خصوصية.

تأتي الفئات والفئات الزائفة والسمات في المرتبة الثالثة في هذا الترتيب. وهي تبدو مثل: .post و :hover و [title] على التوالي.

العناصر والعناصر الزائفة لها أقل قيمة. li و :after هي أمثلة أساسية لعنصر وعنصر زائف.

رجل الترميز على المكتب بالقرب من الجدار الأزرق الساطع

الحساب

يمكن حساب قيمة الخصوصية بالمبدأ التوجيهي التالي:

  • النمط المضمن أو css: 1،0،0،0
  • المعرف: 0،1،0،0
  • الفئة أو الفئة الزائفة والسمة: 0،0،1،0
  • العناصر والعناصر الزائفة: 0،0،0،1
  • المحدد العام (*): 0

للتحقق من مستوى خصوصية المحدد الخاص بك ، يمكنك استخدام حاسبة الخصوصية.

القواعد الأساسية لخصوصية CSS

الآن بعد أن أصبحت لديك فكرة عن كيفية تنظيم الخصوصية ، دعنا نناقش بعض القواعد والأمثلة العامة!

هذا هو HTML الأساسي الذي سأستخدمه في الأمثلة الخاصة بي. لدي هنا قائمة صغيرة داخل حاوية بها #content .

 [css] &amp;amp;amp;lt;div id=&amp;amp;quot;content&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;ul class=&amp;amp;quot;list&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;li&amp;amp;amp;gt;Item 1&amp;amp;amp;lt;li&amp;amp;amp;gt; &amp;amp;amp;lt;li&amp;amp;amp;gt;Item 2&amp;amp;amp;lt;/li&amp;amp;amp;gt; &amp;amp;amp;lt;li&amp;amp;amp;gt;Item 3&amp;amp;amp;lt;/li&amp;amp;amp;gt; &amp;amp;amp;lt;/ul&amp;amp;amp;gt; &amp;amp;amp;lt;/div&amp;amp;amp;gt; [/css]

المادة 1

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

في مقتطف CSS التالي ، يتمتع كلا المحددين بخصوصية متساوية ، لذا سيكون لون li أصفر ، حيث يتم وضعه في أسفل السطر.

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]
حاويات css مشفرة بالألوان بالأرقام

القاعدة 2

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

في المثال التالي ، يتم استهداف li بواسطة محددين مختلفين ويؤثر كلاهما على لون الخط. إذن ، ما هي القاعدة التي يجب أن تنطبق؟

مثل المثال السابق ، في مفهوم ترتيب CSS ، يجب تطبيق الثانية (لذا سيكون لون li أخضر) ولكن نظرًا لأن .list li لها قيمة خصوصية أعلى من ul li ، سيظل اللون أحمر.

 [css] .list li{ color: red; } ul li{ color: green; } [/css]
حاويات css مشفرة بالألوان بالأرقام

القاعدة 3

لقد رأينا أن الصف يفوق العناصر في مستوى الخصوصية ، فلنرى الآن ما يحدث مع المعرف.

في المثال التالي ، لدينا فئة ومعرف كلاهما يستهدف نفس العنصر ويؤثر على لون الخط. مرة أخرى نفس السؤال: أي قاعدة يجب أن تنطبق؟

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

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

حاويات css مشفرة بالألوان بالأرقام

القاعدة 4

!important سوف يتجاوز أي محدد لأي قيمة خصوصية. لكن ضع في اعتبارك أن !important لا ينبغي الإفراط في استخدامه ، لأنه لا يعتبر من أفضل ممارسات CSS.

إذا كنت مؤلف CSS الخاص بك ولا تتخطى قاعدة موجودة ، فلن تحتاج إلى استخدام !important .

استخدام !important فقط عندما تحاول تجاوز CSS لشخص آخر ولا تستطيع خصوصيتك أن تفوق المحدد السابق ، خاصةً عندما لا يمكنك التحكم في ترتيب وضع CSS في HTML.

سيحدث هذا في الغالب أثناء العمل في WordPress ، حيث ستجد العديد من ملفات CSS المضافة بالفعل بواسطة مكونات إضافية وسمات مختلفة.

بشكل عام ، يكون المكون الإضافي CSS خاصًا بالمكوِّن الإضافي ويستخدم المعرفات أو inline-css أو حتى !important للحصول على دقة أعلى لتجنب أي تعارض في CSS. لتجاوز CSS ، عليك استخدام خصوصية أعلى ؛ لهذه السيناريوهات يمكنك استخدامها !important .

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

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important يمنحك القوة لفرض CSS الخاص بك فوق أي مستوى محدد.

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

استثناءات قليلة

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

في هذا المثال ، سترى :first-child (فئة زائفة) و: سطر أول (عنصر زائف). لقد تعلمنا للتو أن الفئات الزائفة سيكون لها خصوصية أعلى من العناصر الزائفة ، لذلك وفقًا لذلك ، يجب أن يكون لون السطر الأول للفقرة أخضر ، ولكن بدلاً من ذلك سيكون ورديًا.

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

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

حاويات css مشفرة بالألوان بالأرقام

هذا هو المكان الذي تصبح فيه الخصوصية مربكة بعض الشيء. لا يمكنني إلا أن أفترض أن سبب هذه النتيجة هو :first-line أقرب إلى العنصر وربما يتم التعامل معه على أنه نمط مضمّن. يمكنك التحقق من jsfiddle للحصول على مثال آخر.

كيف تستخدم الخصوصية بكفاءة؟

إذا كنت تفهم قواعد خصوصية CSS ، فيمكنك استخدامها بكفاءة عالية وجعل CSS قابلة لإعادة الاستخدام.

لنفترض أنك تريد استخدام نفس .button ولكن بألوان خلفية مختلفة ، لذلك قمت بإعداد محدد معين: .red-block .button .

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

إذا كان .button ملفوفًا في حاوية .red-block ، فسيتغير لون خلفية الزر الافتراضي إلى اللون الأحمر.

تعد خصوصية CSS مفيدة جدًا عند تخصيص سمات WordPress ، حيث تحاول تجاوز CSS لمؤلف القالب بمؤلفك.

يجب تجنب الأخطاء الشائعة

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

 [css] div#content ul.list li{ color: purple; } [/css]

إذا كنت شديد الدقة في استخدام CSS الخاص بك ، فسيصبح جامدًا ويصعب إعادة استخدامه. يمكنك بسهولة كتابة .list li بدلاً من div#content ul.list li ، مما يجعل CSS أكثر نظافة.

مصادر إضافية

  • W3 org على الخصوصية
  • حاسبة خصوصية CSS
  • IE علة
  • آي إي هاك

خاتمة

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