السبب في ذلك، هو ليس فقط في إختلاف المتصفح، المشكلة تكمن في إختلاف ما يسمى بـ “محرّك المظهر”، وفي الحقيقة المشكلة تكمن تحديداً في المحرّكات التي لا تتبع المعايير القياسية لإظهار العناصر بالشكل المفترض لها.

ماذا يعمل المحرّك؟

المحرّك هو المكوّن الأساسي والأهم في جميع المتصفحات. حيث مسؤوليته تتمركز حول تحويل تنسيقاتك من سطور HTML و CSS و JavaScript إلى مربعات وجداول وخطوط وألوان ورسومات وتحرّكات.. إلخ.

جودة محرّكات المظهر

أحد أهم الإختبارات التي تقوم بتقييم المتصفحات على أساس دعمها للمعايير القياسية، هو Acid3
حيث يقوم بإجراء فحص مكثف لكيفية عمل محرّك المتصفح، وفي النهاية يكون هناك تقييم حسب جودته، أو بمعنى آخر، مدى توافقيته مع المعايير القياسية لإظهار عناصر صفحات الويب من قبل منظمة W3.

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

وحتى تأتي تلك اللحظة، دعونا نطّلع على نتائج المتصفحات في إختبار Acid3:

• آبل سفاري (يستخدم محرّك webkit): ١٠٠٪
• جوجل كروم (يستخدم محرّك webkit): ١٠٠٪
• أوبرا (يستخدم محرّك Presto): ١٠٠٪
• فايرفوكس (يستخدم محرّك Gecko): ٩٦٪
• إنترنت إكسبلورر ٨ (يستخدم محرّك Trident): ٢٠٪
• إنترنت إكسبلورر ٧ (يستخدم محرّك Trident): ١٤٪
• إنترنت إكسبلورر ٦ (يستخدم محرّك Trident): ١٢٪

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

وحتى تقوم بحل هذه المشكلة، إن كنت ترغب في ذلك

يجب عليك إستخدام ما يسمى بـ “الهاكات” أو “التلفيقات” كما أسميها.

هذه الهاكات، تمكنك من تعديل مظهر الصفحة (تنسيق الصفحة) بإستخدام شفرات محددة من الـ CSS، بحيث يكون أمر الـ CSS موجّه لمتصفح محدد، ولن يؤثر بتاتاً على بقية المتصفحات.

إذا، كيف تصمم موقعك بنفس الشكل في جميع المتصفحات؟

حتى تصل إلى هذه النتيجة، يجب عليك إتباع الخطوتين التاليتين:

1. تصميم الموقع بالشكل المرغوب بإستخدام المتصفح الذي يروق لك.
2. تضمين الهاكات التي تقوم بإصلاح التصميم ليصبح متوافق في جميع المتصفحات.

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

الهاكات:

/* IE 6 and below  */
 
* html {}
 
/* IE 7 and below */
 
*:first-child+html {} * html {}
 
/* IE 7 only */
 
*:first-child+html {}
 
/* IE 7 and modern browsers only */
 
 html>body {}
 
/* Modern browsers only (not IE 7) */
 
 html>/**/body {}
 
/* Recent Opera versions 9 and below */
 
html:first-child {}

الفكرة بسيطة جداً، فقط قم بكتابة أسم الـ Selector (الـ Class أو الـ ID أو حتى الـ Html Tag) قبل الأقواس المنحنية، تماماً كما تستخدم الـ CSS العادي.

مثال:

* html span {color: red}

بإستخدام الطريقة السابقة، سيصبح لون أي نص داخل الوسم span لونه أحمر، فقط في IE6 أو إنترنت إكسبلورر ٦

أتمنى لك ترقيعاً سعيداً