هذه المرة حديثنا حول متصفح الIE ، فاذا كنت مطور ويب تقوم بصيانة مواقع تعمل على نسخ قديمة من ال IE ، أو تقوم بتطوير مواقع حديثه Modern Web (باستخدام CSS 3/JQuery) ولكنها سوف تعمل ك Intranet Web Applications (لاحظ انترانت وليس انترنت) بمعنى سوف تعمل ضمن الشبكة الداخلية Local Networks في الشركات Enterprise والمؤسسات، فهذا الموضوع سوف يهمك.
حيث للأسف كثير جداً من المستخدمين في الجهات الرسمية ما زالوا يستخدموا IE 8/9 بشكل أساسي أما بسبب وجود تطبيقات Legacy ما زالو يستخدموها ك ERP أو CRM والتي في الغالب لها اعتماديات على نسخة المتصفح سواء في ActiveX Controls أو في من الCustom Features بها، أو بسبب تخوف من عملية الUpgrade عموماً وأنها قد تؤثر على سير العمل فيها بعد.
لذلك تغيير نسخ المتصفحات أو حتى اعتماد متصفحات أخرى غير ال IE أمر لا يمكن تغييره في ليلة وضحاها خصوصاً للبنوك أو شركات التأمين أو اي جهة كبيرة بها الالاف من الموظفين متوزعين في مدن مختلفة، هو بالامكان نظرياً ولكن عملياً الأمر لا يتم كما قد تتصور.
المتصفح IE 8 مازال يستخدم حتى هذه اللحظة
مشكلة ال Background Compatibility من المشاكل الأزلية سواء في انظمة التشغيل، البرامج وحتى المكتبات البرمجية، والتي تبدأ عندما تطرح نسخة جديدة من نظامك وفي نفس الوقت تريد الحفاظ على المشاريع أو البرامج التي تعتمد على تلك النسخة السابقة من نظامك بدون أي تأثير عليها.
أحد الحلول المطروحة لهذه المشكلة في متصفح Internet Explorer هي اضافة خاصية ال Compatibility View والتي قدمت بدءاً من الاصدار 8 والتي تحدد كيف سيُعرض Rendering موقعك في المتصفح وعلى اي نسخة IE Engine بالتحديد سوف يتم عرضه (هل IE 6, IE 7 , IE 8 , IE 9 والخ) ، وهكذا سمحت للمواقع القديمة أن تعمل على نسخ المتصفح الجديدة (بشرط تحديد الRendering Engine المناسب لذلك الموقع القديم) الى ان يقوموا المبرمجين بتحديث موقعهم حتى يتماشي مع المعايير القياسية والحديثة.
مثلاً شركة لديها نظام داخلي منذ 15 سنة وهو يعمل على IE 7 بشكل ممتاز ولكنه لا يعمل على ال IE 9، لذلك اما ان يقوم كل مستخدمي الشركة بتحميل الIE 7، أو ان يحدد ذلك الموقع القديم أنه يحتاج أن يعمل على ال IE 7 في ال Compatibility View وبالتالي عندما يعمل الموقع على ال IE 9 سوف يعرف أنه قديم ويحتاج أن يعرض Render في ال IE 7 وهكذا يقوم ال IE 9 باختيار ذلك المحرك وعرضه، وسوف يعمل ذلك الموقع على المتصفح الجديد.
هذا الحل ادخل بسبب أن ال IE 8 عندما ظهر بدء بتطبيق معايير الويب وبالتالي كل المواقع القديمة التي طورت في IE 6/7 (والتي لم تكن موافقة لمعايير الويب) لم تعمل جيداً في IE 8 بالوضع الافتراضي، لذلك طورت مايكروسوفت هذا الخاصية حتى تسمح للمطورين بتحديد مواقعهم بأنها تعمل على النسخة المعينة الى أن يقوموا بتحديث موقعهم وجعله متوافق مع النسخ الجديدة وبالتالي لا حاجة لاستخدام ال Compatibility View عندما يتم ترقية مواقعهم.
فقط باستثناء واحد الا وهي المواقع التي تعمل في الشبكة الداخلية Intranet سوف تعرض بالوضع الافتراضي داخل Compatibility View (وذلك لفرضية أن أغلب مواقع ال Enterprise هي Legacy ولا يوجد بها تحديثات وتحتاج أن تعمل في نسخ قديمة من المتصفح “وهم محقين في ذلك!”)، طبعاً الفرضية اتت بعد احصائيات لكثير من المواقع الداخلية وقد سمتها مايكروسوفت بال Smart وقتها Compatibility View and Smart Defaults
هذا يعني حتى لو قمت بكتابة Modern Site يعمل في شبكة داخلية Intranet فسوف يعرض موقعك بهذا الوضع Compatibility View ولن تستطيع تغييره برمجياً كما سيتوضح فيما بعد، واذا لم تقم بتحديد النمط للموقع Document Mode فسوف يعرض بنمط قد يؤثر في شكل موقعك (في IE 9 سوف يعرض موقعك بIE 7 ولك أن تتخيل دعم الHTML5/CSS في تلك النسخة) وبالتالي فموقعك لن يظهر بشكل جيد وقد لا تعمل أحدى جزئياته، وهذه احد الاسباب التي دفعتنا لكتابة هذا المقالة.
من أهم ما تم تطويره في خاصية ال Compatibility View هي ادخال فكرة ال Browser Mode وال Document Mode، يمكنك فتح المتصفح IE والضغط على F12 والذهاب للDeveloper Mode ومن ثم تستطيع مشاهدة الModes كما بالصورة التالية (في ال IE 11 غيرت اسمها ب Emulation لمشاهدة تلك الModes):
تحديد ال Modes في نسخ ال IE
الBrowser Mode يحددها المتصفح تلقائياً، ولا تستطيع برمجياً تغيير ذلك، ومن النقاط المهمة في تحديد ال Mode وهل سوف يعرض بال Compatibility View أم لا: نسخه المتصفح نفسها، و بالاعتماد على الZone في الموقع (هل هو Internet أم Intranet) فجميع مواقع الويب تعتبر Internet وبالتالي تكون هذه الخاصية مغلقة Off عندما تقوم بفتحها وسوف يكون ال Browser Mode في هذه الحالة على حسب اصدار المتصفح نفسه IE 9 أو 10 الخ ، بينما المواقع الداخلية Intranet والتي تقوم بفتحها من خلال DNS مثلاً http://myPortal سوف تستخدم هذا الوضع On افتراضياً وبالتالي يتم تفعيل خاصية ال Compatibility View في ذلك الموقع، وفي حال قمت بفتح موقع داخلي من خلال العنوان FDQN فسوف يتم اعتباره داخل ال Internet Zone.
الذي يهم المبرمج أن هذا الBrowser Mode لا تستطيع تغييرها من الCode وانما يتم فقط تغييره من اعدادات المتصفح نفسه من خلال Developer Tools بعد الضغط على F12.
بعد أن يقوم المتصفح بتحديد ال Browser Mode فيقوم أيضاً بتحديد ال Document Mode المناسب على حسب خوارزمية ثانية يعمل بها وهي التي يتم من خلالها عمل Render للصفحة، وفي بعض الأحيان سوف يتم اختيار Document Mode لا يناسب موقعك وقد يؤدي لوجود مشكلة في كيفية عرض موقعك
طريقة تحديد ال Document Mode والذي سوف يعرض موقعك بمحرك معين Rendering بناء على معاملين أساسين:
- قيمة ال Compatibility View التي يحددها الموقع (اذا كانت هناك قيمة)
- وجود ال !DOCTYPE في كود الموقع
الموقع يمكن ان يحدد ال Compatibility View من خلال الMeta Tag أو من خلال اضافة HTTP Header في الRequest والأولوية سوف تكون للMeta Tag في حال قمت باستخدامهم الاثنين في نفس الوقت.
استخدام ال Meta Tag بسيط، فقط كل ما عليك تحديد قيمة ال IE ووضعه في جزئية ال Head في صفحتك (تضع في البداية قبل أي JS/CSS)
<meta http-equiv=“X-UA-Compatible” content=“IE=7” />
أما ال HTTP Header ، سوف تحتاج أن ترسل القيمة التالية سواء تضعها برمجياً أو من خلال اعدادات الويب سيرفر تستطيع اضافتها مع اي طلب:
X-UA-Compatible: IE=7
تستطيع تبديل IE=7 بحسب النسخة التي تود أن يتم العرض بها، بدءاً من 5 وانتهائاً ب11 وتستطيع تحديد IE=Edge والتي تعني أن يستخدم اخر Rendering Mode متوفر في المتصفح (بمعنى استخدام نسخة المتصفح الحالية في العرض)، مثال على اضافة ال Header في ASP.NET:
Response.Headers.Add("X-UA-Compatible", "IE=edge, Chrome=1");
تستطيع ايضاً استخدام اكثر من Mode وسوف يتم استخدام اعلى Mode متوفر (سواء كانت في الHTTP Request Header أو من خلال الMeta Tag):
<meta http-equiv=“X-UA-Compatible” content=“IE=7; IE=8” />
بعد تحديدك للCompatibility View يبقى وجود الDOCTYPE وقد يؤثر وجوده أو عدمه في بعض ال Modes وبالتالي قد يعرض المتصفح الموقع بMode أخر، فلو لم تكن DOCTYPE فسيتم عرض موقعك بQuark Mode وهذا يغير شكل الموقع ولا يعرضه بالشكل الذي صممته به (لأنه سيعرض بال IE 5!).
المخطط يوضح كيف يتم اختيار ال Document Mode في المتصفح
كيف يتم تحديد ال Document Mode في المتصفح
خلاصة للمشكلة:عندما يعرض موقعك في الIntranet فسوف يعرض بالCompatibility View وعليك بتحديد الDocument Mode حتى لا يفسد عليك التصميم للموقع.
الحل البرمجي: اضافة X-UA-Compatible في ال HTTP Response (أو الميتا تاق) وتحدد ال IE=Edge وبالتالي سوف يكون الDocument Mode هو على حسب الاصدار اصدار متصفح المستخدم.
حلول أخرى: يقوم المستخدم نفسه بتغيير خصائص المتصفح من خلال الاعدادات التي ستوضح بعد قليل ، أو يقوم مسؤول النظام بتطبيق هذا الخيار من ال Group Policy على مستوى الشبكة أو الموقع، ولكن للأسف ايضاً هذا الخيارات غير عملية مع الجهات الكبيرة.
التحكم باعدادات ال Compatibility View من المتصفح:
أمر أخر في نفس السياق وهو ال Compatibility List وهي كل المواقع التي تعمل بنمط Compatibility وهي تكون معرفة داخل متصفحك (المستخدم يقوم باضافة اي موقع في هذه القائمة حتى يعمل مباشرة في ال Compatibility) أو من خلال المجموعه معرفة لدى ميكروسوفت، وتستطيع اضافة موقع في هذه القائمة من خلال Tools -> Compatibility View كما في الصورة التالية
خيارات اعدادات ال Compatibility من المتصفح
لاحظ في الوضع الافتراضي ان هناك علامة صح على عرض كل المواقع الداخلية Intranet ب Compatibility View بشكل افتراضي، و ايضاً تستطيع وضع صح على تشغيل كل المواقع في الCompatibility View أو ازاله الصح وبالتالي تعمل بدون هذه الخاصية.
كيف تختبر موقعك في نسخ قديمة من ال IE:
اذا كنت مطور وتريد عمل بيئة مشابه لبيئة العميل من ناحية ال IE9/8 لاختبار موقعك، فالافضل تحميل هذه ال Virtual Machines الجاهزة على حسب نظام التشغيل الذي تود ان تعمل فيه بدءاً من اصدارة IE 6 من موقع Modern.IE
لا تنسى مسح كل ال console.log من أكواد الجافا سكربت حتى يعمل موقعك تحت IE:
أخر نقطة وهي Bug واجهتنا لأحد العملاء في الIE9 حيث اذا كنت تستخدم اي console/logs داخل كود الJavaScript فهذا سيمنع الملف من التحميل على الIE9، المشكلة سوف تنحل عندما تضغط على F12 فقط وستجد أن الموقع عمل وحمل الملف بشكل صحيح، ولكن عند فتح الموقع بشكل عادي من المتصفح فلا يستطيع ان يحمل تلك الملفات، لذلك وبشكل عام لا تستخدم Console Logs في الجافا سكربت في ال Production Environment ، للمزيد Why Javascript only works after opening developer tools in IE once?
الخلاصة:
- قمت بتطوير موقع حديث على الانترنت فلا حاجة لأن تستخدم اي من الCompatibility View Feature فقط ضع Standard DOCTYPE
- لديك موقع قديم وتريد عرضه على الانترنت فعليك بتحديد ال Compatibility View وتحديد الDocument Mode المناسب لموقعك، حتى تقوم بترقيته لاحقاً وبعدها طبق خلاصة رقم (1)
- قمت بتطوير موقع حديث ويعمل على شبكة داخلية (وظهر تحت الCompatibility View) فعليك أن تقوم بعمل Override للDocument Mode وتختار الEdge.
- نمط ال Document Mode يعتبر لاغياً حالياً في IE 11 وأنه Document modes are deprecated
- اذا كنت تعمل في قسم ال IT فالأفضل أن تتبنوا أخر الاصدارات من المتصفحات وتستطيع دعم المواقع القديمة من خلال خاصية الجديدة Enterprise Mode in IE 11
مراجع مفيدة:
