هاكات الـ CSS للإنترنت اكسبلورر IE 6 , IE 7

كتب يوم : 29 يوليو 2012 - تصنيف : تصميم مواقع انترنت - مشاهدات 142

i-hate-ie-donald-duck

” كم أكره انترنت اكسبلورر “

كلمة يقولها الكثير من مصممي المواقع قاصدين الإصدارات القديمة من انترنت اكسبلورر مثل IE 6 , IE 7 … والسبب يرجع الى عدم دعمهم الكامل للغة الـ CSS ، وفي أغلب الأحيان تواجهم مشاكل في المارجن margin والقوائم المنسدلة ، على أي حال هناك طرق بسيطة لمعالجة هذه الأمور وسأعطيك مفاتيحها في هذه التدوينة .

من المعروف أن الأوامر في لغة الـ CSS تنفذ بطريقة متتالية ، بمعنى أنك اذا كتبت الكود :

فإن المتصفح يقوم بقراءة الكود بالتريتب بمعنى قراءة قيم display أولاً ثم background-color ثم width وهكذا

أعتقد أنه شيء بديهي وأنك بدأت تتساءل عما أقصد ، تابع معي

لنفترض أعدت كتابة الكود مع تكرار قيمة الwidth مرتين مع تغيير القيمة

أصبح الآن width = قيمتين ( 900 / 980 ) ، في رأيك أي القيمتين سيتخدمها المتصفح ؟ بالضبط 980 900

سيقوم المتصفح بقراءة 900 أولاً ثم يجد بعدها 980 فيقوم بإهمال القيمة 900 والتعامل مع آخر قيمة مضافة 980

ما علاقة ذلك بهاكات انترنت اكسبلورر ؟؟

نأخذ المثال التالي للتوضيح أكثر

كما لا حظت هناك ثلاث قيم لل width ولكن قيمتان يسبقهما حروف ( _ / * )

قيمة ال width المسبوقة ب ( _ ) يتعرف عليها متصفح انترنت اكسبلورر 6 IE فقط ويقوم بتنفيذها واهمال القيم السابقة ،  ولا يتعرف أصلاً على القيمة التالية المسبوقة بت ( * )

بينما يتعرف انترنت اكسبلورر 7 IEعلى قيمة ال width المسبوقة بـ ( * ) ويتجاهل أي قيم سابقة

بكل بساطة هذه هي هاكات انترنت اكسبلورر 6 ، 7 ، وكما هو اوضح في الكود السابق لابد أن تكون القيمة الصحيحة width التي تعرف عليها باقي المتصفحات مثل firefox , chrome , opera , maxton وغيرها مكتوبة أولاً ثم يليها الهاكات والسبب في ذلك يرجع إلى أن انترنت اكسبورر يقرأ القيمة العادية ويتعرف عليها ولكن اذا وجد الهالك بعدها يقوم بإهمالها ويتعرف على (width) / (_width*)

وإذا واجهتك مشكلات مع القوائم مثل عدم ظهور عناصر القائمة بجانب بعضهم البعض فيمكنك استخدام نفس الفكرة وإعادة توظيفها ، مثال الكود التالي :

لاحظ انني غيرت أسلوب العرض على متصفحات اكسبلورر

تأكيد : لابد أن تكون الهاكات بعد الكود الأصلي وليس قبله حتى يقوم انترنت اكسبلورر بتنفيذه وتجاهل الاوامر السابقة

ملحوظة هامة : المتصفحات القياسية مثل chrome و firefox تتعامل مع الهاكات على أنها أكواد خاطئة وتقوم بتجاهلها

أعجبتك التدوينة ! أترك تعليق 🙂

  • محمود إبراهيم

    شرح رائع ومميز …. شكرا لك

    • جزاك الله خيراً أخي الكريم … شكرا لمرورك 🙂

  • محمد قاسم

    المشكلة لنل بعد ماتخلص الكود تجد انك يجب اعادة كتابته من جديد 🙁
    هل من طربقة تساعد على عمل الخطوة هذه بسرعة

    • أهلاً أخي محمد … باستخدام هذه الطريقة لابد أن تقوم بإعادة كتابة الأكواد .. لكن هذا لا يعني أن تعيد كتابة كل صفحة الإستايل … إنما تعيد كتابة الأكواد التي بها خلل والشائع منها الـ :
      width
      height
      margin

  • محمد قاسم

    مشكور اخى