تعليقات CSS
أصبحتَ قادرًا على كتابة القواعد وربط ورقة الأنماط (stylesheet) بصفحتك. لكنك ستحتاج أحيانًا إلى ملاحظة تذكّرك بشيء ما، أو إلى طريقة توقف بها نمطًا معيّنًا أثناء الاختبار دون أن تحذف الشيفرة. هذا بالضبط ما تقدّمه لك تعليقات CSS.
ما هي تعليقات CSS؟
تعليق CSS هو ملاحظة تكتبها بين /* و*/. يتجاهلها المتصفح تمامًا عند تطبيق الأنماط. استخدمها لتذكيرات قصيرة، أو لوضع عناوين للأقسام داخل ورقة الأنماط، أو لتعطيل قاعدة مؤقتًا أثناء التجريب.
صياغة التعليق
اكتب التعليق هكذا: /* ملاحظتك هنا */. كل ما يقع بين /* الافتتاحية و*/ الختامية يتجاهله محرّك CSS. لا يرى الزوّار التعليقات كنص في الصفحة، فهي تبقى في شيفرة ورقة الأنماط نفسها، وتظهر أيضًا في أدوات المطوّر (DevTools) إذا فتحتَ الملف.
تعليق في سطر واحد
css/* Brand teal for the hero heading */
.hero {
color: #0f766e;
}لماذا تكفي الملاحظة القصيرة؟
يستطيع تعليق من سطر واحد فوق القاعدة أن يشرح لماذا وُضعت قيمة ما: لون الهوية، أو إصلاح مؤقت، أو خيار يخدم إمكانية الوصول. فضّل الملاحظات الموجزة على المقالات الطويلة؛ فكل ما ستحتاجه بعد أسابيع هو إشارة بسيطة تذكّرك.
التعليقات متعددة الأسطر
يمكن للتعليق أن يمتد على عدة أسطر. والنمط الشائع هو «لافتة قسم» صغيرة قبل مجموعة من القواعد المتقاربة، لتبقى ورقة الأنماط الطويلة سهلة التصفّح.
تعليق قسم متعدد الأسطر
css/*
Header styles
Keep logo and nav colors here
*/
.site-header {
background: #0f172a;
color: #f8fafc;
}اجعل التعليقات متعددة الأسطر قصيرة. فإذا ملأتَ الملف بفقرات شرح طويلة صارت قراءته أصعب مما لو لم تكتب أي تعليق.
تعطيل قاعدة مؤقتًا
يمكنك وضع تصريح (declaration) واحد، أو قاعدة كاملة، داخل تعليق لتعطيله دون حذفه. وحين تريد إعادته تكفي إزالة علامتي التعليق. هذه الحيلة مفيدة جدًا عندما تبحث عن الخاصية التي تُفسد التخطيط.
تعليق على تصريح واحد
css.hero {
color: #0f766e;
/* font-size: 2rem; */
font-family: Georgia, serif;
}عادة سليمة في الاختبار
عطّل أصغر جزء يفيدك في الفهم، وابدأ بتصريح واحد. فإن عادت الصفحة إلى شكلها الصحيح فقد عرفتَ السبب. بعدها إمّا أن تصحّح القيمة وإمّا أن تحذف الشيفرة الميتة. ولا تترك كتلًا كبيرة معطّلة في ورقة الأنماط النهائية إلى الأبد.
تعليق CSS ليس تعليق HTML
تعليق HTML يبدأ بـ<!-- وينتهي بـ-->، أما تعليق CSS فيستخدم /* و*/. لا تلصق علامات تعليق HTML داخل ملف .css، ولا داخل وسم <style> على أمل أن تُعامَل كتعليقات، فكل لغة لها صياغتها الخاصة. وإن تعلّمتَ تعليقات HTML من قبل فاعتبر هذه مهارة موازية لها، لكن بعلامات مختلفة.
التعليقات ليست مكانًا آمنًا
يستطيع أي شخص يفتح ورقة الأنماط (أو يستعرض مصدر الصفحة View Source أو تبويب Network) أن يقرأ تعليقاتك. لا تكتب أبدًا كلمات مرور أو مفاتيح خاصة أو رموز سرّية (tokens) داخل تعليقات CSS. التعليقات مخصّصة لملاحظات التطوير، لا لإخفاء البيانات الحساسة.
جرّبها بنفسك
- افتح ورقة أنماط للتجربة (أو وسم
<style>) فيها قاعدة.heroتضبطcolorوfont-size. - أضف فوق القاعدة تعليقًا من سطر واحد يشرح سبب اختيار اللون.
- ضع تصريح
font-sizeداخل/* … */، ثم احفظ وحدّث الصفحة؛ سيعود الحجم إلى وضعه الافتراضي بينما يبقى اللون مطبّقًا. - أزل علامتي التعليق حول
font-sizeوحدّث الصفحة مرة أخرى ليعود الحجم. - اختياريًا: أضف فوق مجموعة القواعد تعليقًا قصيرًا متعدد الأسطر كعنوان للقسم.
أخطاء شائعة
- استخدام علامات HTML (
<!-- -->) داخل CSS؛ فلن يعدّها محرّك CSS تعليقًا - نسيان
*/الختامية، فيُتجاهل ما تبقّى من ورقة الأنماط - محاولة تداخل التعليقات (
/* outer /* inner */ still broken */)؛ تعليقات CSS لا تتداخل بشكل صحيح - ترك أكوام من القواعد المعلّقة في ملفات المشروع النهائية لشهور
- كتابة أسرار أو روابط خاصة داخل التعليقات
الخلاصة
- تُكتب تعليقات CSS بين
/*و*/ - يتجاهل المتصفح نص التعليق عند تطبيق الأنماط
- استخدم التعليقات لملاحظات قصيرة أو عناوين أقسام أو تعطيل مؤقت أثناء الاختبار
- تعليق HTML شكله
<!-- -->؛ فلا تخلط بينه وبين CSS - التعليقات ظاهرة في المصدر، فلا تضع فيها أي سرّ أبدًا
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى