بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
لا شك بعد أن تعلمنا أساسيات html و css ، أصبح لزاما علينا أن ننتقل إلى الخطوة الموالية ونتعلم كيف نشتغل باحترافية ، ويمر ذلك عبر معرفة مشاكل وقواعد تصميم المواقع ، وصولا إلى التطبيق العملي المكثف والصبر على الصعوبات والأخطاء التي منها نتعلم.
والسؤال المطروح في هذا الدرس هو:
عندما تتضارب قواعد css كيف نعرف القاعدة التي ستفوز؟
وعندما تتعدد أنماط كتابة كود css وتتضارب القواعد بينها ما هو النمط الفائز؟
فعندما تشتغل على تصميم موقع قد تجد نفسك مضطرا لتغيير قاعدة معينة ، مثلا قد تحدد لونا معينا لكل الروابط a الموجودة في الصفحة ثم تصادف رابطا معينا في مكان ما في الصفحة تريد تخصيصه بلون مختلف .
وقد تجد نفسك أمام ملف css موجود في موقع تعرف مساره لكنك لا تستطيع التعديل عليه ، والحل الوحيد هو كتابة كودك الخاص الذي من المفترض أن يكون أقوى حتى يطبق عوضا عن الأول ، وهذه مشكلة تواجه مصممي قوالب بلوغر.
وقد تكون من الذين يستخدمون مكتبة bootstrap الشهيرة ، وهي مكتبة تحتوي على كلاسات جاهزة قد تضطر إلى الإلتفاف على بعض قواعدها في ملفك الأساسي.
كل هذا يدعونا إلى أن نكون على علم بترتيب القواعد.
النمط الخطي inline stylesheet
للتذكير فقط كما ذكرنا في بداية الدورة ، النمط الخطي هو كتابة كود css داخل عنصر html مباشرة.
أولا إعلم بأن النمط الخطي هو من أقوى أنماط كتابة كود css ، لأنه الفائز دائما إذا تضاربت القواعد ، ولا يمكن الإلتفاف عليه إلا باستخدام القيمة important! ، وسيأتي توضيح ذلك.
ليكن كود html التالي:
استخدمنا نمط خطي داخل الديف ووضعنا خلفية باللون الأحمر ، وسنضع تنسيقات أخرى في ملف خارجي style.css وسنحاول فرض خلفية باللون الأخضر، وهذا هو التنسيق:
وهذه هي النتيجة:
وكما ترى قاعدة الخلفية الخضراء التي كتبناها في ملف style.css لم تطبق وفاز النمط الخطي inline stylesheet على النمط الخارجي external stylesheet .
والطريقة الوحيدة هنا لمراوغة النمط الخطي هي إضافة القيمة important! لقاعدة الخلفية الخضراء داخل ملف style.css ، سنجرب ذلك ونرى:
والنتيجة هي كالتالي:
الخلاصة : أي قاعدة مكتوب أمامها important! فهي فائزة في كل الأحوال ، و النمط الخطي للكتابة فائز في كل الأحوال ما عدا في حالة وجود important! .
مبدأ التخصيص Specifity
في هذا المبدأ تحديدا قوة قاعدة css ترجع لقوة المعرف Selector ، وقد رأينا في الدروس الأولى كل أنواع المعرفات ، والجديد هنا أنها تختلف من حيث القوة ، وبالتالي عندما تتضارب القواعد هنا فإن القاعدة الفائزة هي المخصصة أكثر.
فعندما تشير للعنصر عن طريق id ليس كما تشير إليه عن طريق class ، لأن id أقوى من class ، وكذلك عندما يكون المعرف مكونا من عدة عناصر بعضها داخل بعض مثلا عندما تكتب div a img ليس كما تكتب img مباشرة لأن المعرف الأول أقوى من الثاني وأكثر تخصيصا ، وسأوضح كيفية حساب ذلك.
ليكن كود html التالي:
سننسق المحتوى مع محاولة تغيير بعض القواعد بمعرفات مختلفة لنفس العنصر :
والنتيجة:
أول قاعدة لم تشتغل هي التي أشرنا فيها إلى الديف الأب container عن طريق class وحاولنا تغيير لون الخلفية من الرمادي إلى البرتقالي وفشلنا لأن id أقوى من class وأكثر تخصيصا.
ثاني قاعدة لم تطبق هي التي حددنا فيها الديف header مباشرة دون الإشارة لأبيه container والنتيجة فشل في تغيير لون الخلفية من البرتقالي إلى الأحمر.
ثالث قاعدة لم تطبق هي التي استهدفنا فيها العنوان h1 مجردا عن آبائه وفشلنا في تغيير لون الخط من الأبيض إلى الأسود.
وإذا لاحظت تحت كل المعرفات التي كتبتها في ملف css أجريت عمليات حسابية ضمن تعاليق ، والعملية بسيطة جدا ، داخل كل معرف مهما كان أحسب id ب 100 و class ب 10 و عنصر html مجردا ب 1 ثم احسب المجموع ، والمعرف الأعلى مجموعا هو دائما الأكثر تخصيصا وقواعده هي الأقوى ، وهكذا تعرف القاعدة الفائزة بكل سهولة.
الخلاصة: عندما يطبق مبدأ التخصيص فإن القاعدة المخصصة أكثر هي الفائزة ويعرف ذلك بإجراء عملية حسابية تجمع فيها قيم المعرفات بتطبيق التالي:
id=100
class=10
tag name=1
مبدأ Cascade
بغض النظر عن التالي:
1- مبدأ التخصيص Specifity
2- وجود important!
3- وجود النمط الخطي inline style
فإن مبدأ ترتيب القواعد Cascade هو الفيصل في لغة css ، وهذا المبدأ يقول بأن آخر قاعدة مكتوبة هي التي تفوز على سابقاتها إذا تضاربت القواعد.
لكن مع وجود إحدى الحالات الثلاث التي استثنيناها فلا معنى لمبدأ Cascade .
ليكن كود html التالي:
والتنسيق التالي:
والنتيجة:
وكما ترى المعرف هو نفسه ، وفازت قاعدة الخلفية الخضراء باعتبارها الأخيرة ، كما فازت قاعدة لون الخط الأسود للسبب نفسه.
وينطبق مبدأ Cascade أيضا على إدراج ملفات css باستخدام العلامة link في رأس الصفحة ، فآخر ملف مدرج دائما هو الأوفر حظا بحكم ترتيب القواعد Cascade إلا في الحالات التي ذكرناها.
الخلاصة: يطبق مبدأ Cascade الذي يقول بأن القاعدة الأخيرة هي الفائزة إذا تضاربت القواعد إلا في حالة وجود إحدى الحالات التالية:
1- وجود النمط الخطي.
2- وجود القيمة important!
3- وجود قاعدة أكثر تخصيصا.
انتهت دورة الأساسيات في لغة css ، فبمعرفة كل ما سبق وتعلمناه نكون قد انتقلنا إلى المستوى الثاني ، وينبغي الآن على المتدرب أن يبدأ في تكويد قوالب عادية وصولا إلى قوالب أكثر احترافية وأخرى متوافقة مع الشاشات Responsive .
وفي تدوينة قادمة سأقدم لكم روابط لدروس موجودة على اليوتوب ، دروس تعلم تصميم قوالب من الألف إلى الياء ، وهي أفضل ما هو موجود في التطبيق العملي.
إلى اللقاء في دورات قادمة إن شاء الله ودمتم في رعاية الله و حفظه.