إعادة تصميم موقع أو تحديث ملف الأنماط خطوة ممتعة، لكنها تحمل خطراً صامتاً: عنصر مهم يختفي فجأة بعد النشر. قد تكون صورة الواجهة الرئيسية، أو زر الشراء، أو قائمة التنقل على الهاتف. المشكلة أن الصفحة لا تُظهر أي رسالة خطأ؛ فقط يبدو الموقع ناقصاً أو باهتاً للزائر. القائمة التالية تُراجَع قبل نشر أي تعديل على CSS، ومعها الأسباب الأكثر شيوعاً لاختفاء العناصر وطريقة كشف كل منها.
لماذا تختفي العناصر بعد إعادة التصميم؟
نادراً ما يكون السبب سطراً واحداً واضحاً. في الغالب يتراكم تعديل صغير فوق قواعد قديمة لم يعد أحد يتذكرها. أشهر الأسباب:
- قاعدة إخفاء عامة: مثل
display:noneأوvisibility:hiddenوُضعت لمحدِّد واسع (كل الصور داخل قسم معيّن) أثناء تجربة، ثم بقيت في الملف النهائي. - تعارض الأولوية (Specificity): قاعدة جديدة بمحدِّد أضعف لا تتغلب على قاعدة قديمة أقوى، أو العكس؛ فتفوز قاعدة لم تكن تقصدها.
- استعلامات الوسائط (Media Queries): عنصر يظهر على الحاسوب لكن قاعدة داخل
@media (max-width: …)تخفيه على الهاتف أو الجهاز اللوحي. - ترتيب تحميل الملفات: ملف قديم يُحمَّل بعد الملف الجديد فيلغي تعديلاته، أو ملف مكتبة خارجية يعيد ضبط الأنماط.
- مشكلات التموضع والطبقات: عنصر موجود فعلاً لكنه خلف عنصر آخر بسبب
z-index، أو خارج الإطار بسببposition:absoluteوقيم سالبة، أو مقصوص بسببoverflow:hiddenعلى الحاوية. - أبعاد صفرية: حاوية بلا ارتفاع لأن محتواها كله عائم أو متموضع مطلقاً، أو صورة خلفية لحاوية بلا ارتفاع صريح.
- مسار صورة خاطئ: صورة خلفية في CSS مسارها نسبي إلى موقع ملف الأنماط لا إلى الصفحة، فيتعطل عند نقل الملف إلى مجلد آخر.
- الذاكرة المؤقتة: المتصفح أو شبكة التوزيع تقدّم نسخة قديمة من ملف CSS مع HTML جديد، فتظهر الصفحة بخليط غير متوقع.
القاعدة الأولى: اكسر الذاكرة المؤقتة بطريقة منضبطة
كثير من «الأعطال» التي تراها أنت ولا يراها غيرك (أو العكس) سببها التخزين المؤقت. الحل الأكثر موثوقية هو ربط اسم الملف أو رابطه بإصدار واضح:
<link rel="stylesheet" href="/assets/site.css?v=2026-09-27">
<!-- أو اسم ملف يحتوي بصمة المحتوى -->
<link rel="stylesheet" href="/assets/site.4f9c2a.css">غيّر رقم الإصدار مع كل نشر يمسّ الأنماط. إن كنت تستخدم أداة بناء (مثل Vite أو Webpack) فهي تضيف بصمة المحتوى تلقائياً. وإن كان موقعك خلف شبكة توزيع محتوى، فاعرف كيف تمسح ذاكرتها لملف واحد بعينه بدلاً من مسحها كاملة.
قائمة المراجعة قبل النشر
1. راجع الفروق لا الملف كاملاً
- اعرض الفرق (diff) بين النسخة الحالية والجديدة في نظام التحكم بالإصدارات، وابحث تحديداً عن:
display:none،visibility،opacity:0،height:0،overflow:hidden،z-index، والقيم السالبة للهوامش والتموضع. - أي قاعدة إخفاء جديدة يجب أن يكون لها سبب مكتوب في رسالة الإيداع أو تعليق قصير.
2. اصنع قائمة «عناصر لا يجوز أن تختفي»
لكل موقع عناصر حرجة: الشعار، صورة الواجهة، عنوان الصفحة الرئيسي، زر الدعوة لاتخاذ إجراء، قائمة التنقل، نموذج التواصل، التذييل. اكتبها في ملف داخل المشروع، وراجعها بصرياً قبل كل نشر. هذه القائمة الصغيرة وحدها تمنع أغلب المفاجآت.
3. اختبر على أحجام الشاشات الرئيسية
استخدم وضع الأجهزة في أدوات المطوّر (F12 ثم أيقونة الجهاز) وجرّب على الأقل:
- هاتف صغير بعرض 360 بكسل تقريباً.
- هاتف كبير أو جهاز لوحي عمودي بين 390 و768 بكسل.
- حاسوب محمول بعرض 1280 إلى 1366 بكسل.
- شاشة عريضة بعرض 1920 بكسل.
ثم جرّب على هاتف حقيقي واحد على الأقل؛ فالمحاكاة لا تكشف دائماً سلوك شريط العنوان المتحرك أو الخطوط المثبّتة على الجهاز.
4. اختبر اتجاه النص العربي
في المواقع العربية تحديداً، تأكد من أن dir="rtl" مضبوط على عنصر html، واستخدم الخصائص المنطقية مثل margin-inline-start وpadding-inline-end وinset-inline-start بدلاً من left وright حيث أمكن. العناصر التي تُزاح بقيم يسار ويمين ثابتة قد تخرج من الشاشة عند قلب الاتجاه.
5. افحص العناصر المخفية بأدوات المطوّر
إن اختفى عنصر، لا تخمّن. افتح أدوات المطوّر واتبع هذا الترتيب:
- ابحث عن العنصر في تبويب Elements (أو استخدم Ctrl+F داخل شجرة DOM). إن لم يكن موجوداً، فالمشكلة في HTML أو JavaScript لا في CSS.
- إن كان موجوداً، انظر إلى تبويب Computed: ما قيمة
displayوvisibilityوopacityوالعرض والارتفاع؟ - انقر على القيمة لتعرف أي قاعدة وأي ملف وأي سطر مسؤول عنها.
- عطّل القاعدة مؤقتاً بمربع الاختيار بجوارها لتتأكد أنها السبب.
- تحقّق من الحاويات الأب: عنصر مرئي داخل أب مخفي أو مقصوص سيبقى غير مرئي.
6. راقب طلبات الشبكة
في تبويب Network، صفِّ حسب CSS والصور، ثم أعد التحميل مع تعطيل الذاكرة المؤقتة. ابحث عن أي طلب بحالة 404 أو 403، وعن ملفات CSS تُحمَّل من مسار قديم. صورة خلفية مفقودة لن تظهر كخطأ في الصفحة، لكنها ستظهر هنا بوضوح.
7. قارن لقطات الشاشة قبل وبعد
خذ لقطات للصفحات الرئيسية قبل التعديل وبعده بالأحجام نفسها، وضعها جنباً إلى جنب. للمشاريع الأكبر، توجد أدوات اختبار الانحدار البصري (Visual Regression) التي تلتقط الصفحات آلياً وتنبّهك إلى أي اختلاف في البكسلات، مثل تلك المدمجة مع Playwright أو أدوات مخصصة مثل BackstopJS.
8. تحقّق من حالات الحالة التفاعلية
لا تكتفِ بالحالة الافتراضية: افتح القائمة المنسدلة، مرّر المؤشر فوق الأزرار، ركّز على الحقول بلوحة المفاتيح، وافتح قائمة الهاتف. قواعد :hover و:focus و[aria-expanded] مصدر شائع للعناصر التي تظهر ثم لا تعود.
9. اختبر مع تعطيل JavaScript ومع بطء الشبكة
بعض التصاميم تخفي المحتوى حتى يضيف سكربت ما صنفاً مثل .is-loaded. إن فشل السكربت أو تأخر، يبقى المحتوى مخفياً للأبد. اجعل الحالة الافتراضية مرئية، واستخدم السكربت لإضافة المؤثرات فقط. جرّب كذلك وضع Slow 3G في أدوات المطوّر.
10. انشر على بيئة تجريبية أولاً
حتى لو كانت بيئة بسيطة على نطاق فرعي محمي بكلمة مرور، فالنشر عليها ثم المراجعة من أجهزة متعددة يكشف مشكلات لا تظهر على جهازك المحلي، مثل حساسية أسماء الملفات لحالة الأحرف على خوادم لينكس.
مثال عملي: صورة واجهة اختفت على الهاتف فقط
لنفترض أنك نشرت تصميماً جديداً، وبدت الصفحة الرئيسية ممتازة على الحاسوب، لكن صورة الواجهة اختفت تماماً على الهواتف. باتباع القائمة: تفتح أدوات المطوّر وتختار حجم هاتف، فتجد عنصر الصورة موجوداً في شجرة DOM، ما يعني أن HTML سليم. في تبويب Computed تظهر قيمة display مساوية لـ none، وبالنقر عليها تصل إلى قاعدة داخل استعلام وسائط للشاشات الصغيرة كُتبت لإخفاء صورة زخرفية قديمة، لكن محدِّدها العام التقط صورة الواجهة الجديدة أيضاً. الحل هنا ليس حذف استعلام الوسائط، بل تضييق المحدِّد ليستهدف الصورة الزخرفية بصنفها الخاص فقط، ثم رفع رقم إصدار ملف الأنماط، وإضافة صورة الواجهة إلى قائمة العناصر الحرجة. استغرق التشخيص دقائق لأن الخطوات كانت مرتبة، بدلاً من ساعات من التخمين وتجربة تعديلات عشوائية.
ممارسات تقلّل المشكلة من الأساس
- نظّم CSS في طبقات: استخدم
@layerأو منهجية واضحة (أساس، مكوّنات، أدوات مساعدة) حتى تعرف أين تضع كل قاعدة ولماذا تفوز. - قلّل المحدِّدات العامة: بدلاً من
.hero img { display:none }استخدم صنفاً صريحاً على العنصر المقصود فقط. - تجنّب
!important: إلا في الأدوات المساعدة الموثّقة؛ فهو يجعل تتبّع المشكلات أصعب بكثير. - اضبط أبعاد الوسائط: حدّد
widthوheightأوaspect-ratioللصور لمنع انهيار الحاويات وتحسين استقرار التخطيط. - استخدم مدقّقاً آلياً: أدوات مثل Stylelint تكشف القواعد المكررة والمحدِّدات غير الصالحة قبل النشر.
- احذف الكود الميت: القواعد التي لم تعد تُستخدم تتحول مع الوقت إلى ألغام. تبويب Coverage في أدوات المطوّر يوضح نسبة CSS غير المستخدمة في كل صفحة.
ماذا تفعل إن اكتشفت المشكلة بعد النشر؟
- تراجع فوراً إلى النسخة السابقة من ملف الأنماط إن كان العنصر المختفي حرجاً؛ الإصلاح الهادئ أفضل من الإصلاح المتسرّع على موقع حي.
- حدّد القاعدة المسؤولة بأدوات المطوّر كما شرحنا.
- أصلحها بأضيق نطاق ممكن، وارفع رقم الإصدار في رابط الملف.
- امسح ذاكرة شبكة التوزيع للملف المعني إن وُجدت.
- أضف العنصر إلى قائمة «لا يجوز أن تختفي» إن لم يكن فيها.
حالات تتكرر بعد النشر
أرى التعديل على جهازي ولا يراه العميل، لماذا؟
غالباً بسبب الذاكرة المؤقتة لدى متصفحه أو لدى شبكة التوزيع. أضف رقم إصدار إلى رابط الملف واطلب منه تحديثاً قسرياً بـ Ctrl+F5 للتأكد.
هل display:none يضر بمحركات البحث؟
إخفاء عناصر تصميمية أو قوائم على الهاتف أمر طبيعي. لكن إخفاء المحتوى الرئيسي عن الزائر مع إبقائه في الكود تجربة سيئة للمستخدم، وقد تُعد ممارسة مخالفة إن كان الهدف خداع محركات البحث.
كم يستغرق تطبيق هذه القائمة؟
بعد أول مرة، تستغرق المراجعة الأساسية (الفروق، العناصر الحرجة، ثلاثة أحجام شاشات، تبويب الشبكة) نحو عشر إلى خمس عشرة دقيقة، وهو وقت أقل بكثير من إصلاح عطل على موقع حي.