إذا كنت تخطط لاستخدام CSS على أساس منتظم ، فأنت بحاجة إلى تطوير فهم لماهية الخصوصية وكيفية تطبيقها.
بخلاف العوامات والمواقف ، قد تكون الخصوصية واحدة من أصعب الأشياء التي تعتاد عليها ، ناهيك عن إتقانها. جميع المحددات التي تستخدمها في CSS لديك لها أوزان مختلفة ويتم التحكم فيها عن طريق التحديد. هذا هو السبب في بعض الأحيان ، عندما تقوم بتطبيق قاعدة على عنصر ما ، فإنه لا ينعكس في التصميم الخاص بك.
إذا كنت تعتمد في أي وقت مضى على الكلمة الرئيسية المهملة لاختراق CSS ، فإن هذه المقالة تناسبك.
للحصول على أسس صلبة ، تحتاج إلى معرفة كيف يقرأ المتصفح بالفعل CSS وكيف يتم تجاوز القواعد.
أولاً ، سيقرأ المتصفح ورقة أنماط من أعلى إلى أسفل مما يعني أنه بهذا الرمز:
/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}سيتم تجاوز القاعدة التي حددتها في السطر 10 ، وستكون علامة الربط باللون الأزرق لأن المتصفح سينظر في القواعد إلى أسفل أسفل CSS لديك ليحمل أولوية أكبر.
يعمل هذا أيضًا مع الترتيب الفعلي الذي تستورد به ملفات css ، على سبيل المثال:
نظرًا لأنك وضعت custom.css بعد style.css أي شيء تكتبه في style.css (الخصم في الوقت الحالي ، وزن المحددات) سوف يتم تجاوزه واستبداله بما هو موجود في custom.css ، غالبًا ما تستخدم هذه التقنية من قبل المبدعين الموضوع لإعطاء المستخدم بعض المساحة لإضافة الأنماط الخاصة بهم دون تغيير الملف الرئيسي. (تجدر الإشارة إلى أن custom.css لا تحل محل style.css بالكامل ، ولكن سيتم استبدال القواعد التي تم تجاوزها بشكل محدد فقط.)
ينطبق كل ما سبق فقط إذا كنت تستخدم نفس الوزن في كل منتقي. إذا كنت تحدد معرفات أو فئات أو عناصر تكديس ، فأنت تعطيهم وزناً ، وهذا هو التحديد.
توجد أربع فئات تحدد مستوى محدد محدد: الأنماط المضمنة (يتم استخدام هذه الأنواع في بعض الأحيان بواسطة javascript) ومعرفات الهوية والفئات والعناصر. كيفية قياس الخصوصية؟ يتم قياس الخصوصية بالنقاط ، مع تطبيق أعلى قيمة للنقاط.
مع العلم بذلك ، إذا كنت تستخدم محددًا مثل:
#content .sidebar .module li aوزنه الإجمالي 122 نقطة (100 + 10 + 10 + 1 +1) ، وهو معرف وفئتان وعنصران.
ul li a {color: red;}سيحمل هذا المحدد 3 ، مما يعني أنه بمجرد إضافة فئة في مكان آخر ، يمكنك تجاوزها.
.content #sidebar {width: 30%;}يبلغ وزن هذا المحدد 110 نقاط ، ويرجع ذلك أساسًا إلى الرقم التعريفي الذي يضيف 100 نقطة من إجمالي 110 نقاط.
.post p:first-letter {font-size: 16px;}يبلغ وزن هذا المحدد 12 نقطة ، نظرًا لأن العنصر الزائف: الحرف الأول يزن فقط نقطة واحدة وكذلك العلامة p.
p {font-family: Helvetica, arial, sans-serif;}يزن هذا المحدد 1 نقطة فقط ، ويجب استخدام هذا النوع من المحددات في أعلى الصفحة عند وضع علامة على الأنماط الأساسية التي قد يتم تجاوزها لاحقًا لمناطق معينة.
ضع في اعتبارك دائمًا أنه لتجاوز محدد الهوية ، يجب عليك كتابة 256 فئة لنفس العنصر ، مثل:
#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}بهذه الطريقة فقط سيختار المنتقى الثاني الواحد باستخدام المعرّف.
الخصوصية ليست جانبا مبهرا من CSS ، ولكن في رأيي فإن المنطقة هي الأكثر إغفال. إن الحصول على خصوصيتك ليس فقط يساعدك على تجنب الأخطاء ، ولكنه سيسرع في تطوير موقعك وموقعك النهائي.
هل تفرط في استخدام المعرفات عند كتابة CSS؟ هل سبق لك أن ارتدت من جديد؟ اسمحوا لنا أن نعرف في التعليقات.