راه های دور زدن IE ! – دستورات شرطی برای اینترنت اکسپلورر

یکشنبه, ۳۰ام فروردین , ۱۳۸۸ | ۱۸ دیدگاه

طراحان وب سایت برای تست وب سایت طراحی شده می بایست وب سایت را در مرورگرهای مختلفی تست کنند تا بازدید کنندگان در همه مرور گر ها طرح یکسانی ببینند چون نمایش متفاوت در مرورگرهای متفاوت برای یک طراح یک ضعف بزرگ محسوب می شود .مثلا فرض کنید شما به عنوان طراح وب سایت طرح خود را در مرورگر محبوب فایرفاکس تست می کنید وآپلود می کنید. همه چیز عالی به نظر می رسد ولی یک مشکل بزرگ ! سفارش دهنده وب سایت را در مرورگر اینترنت اکسپلورر نسخه ۶ باز می کند(وای همه چیز به هم ریخته!!)
خوب راه حل چیست ؟
اول این که باید شرایطی فراهم آوریم تا بتوانیم وب سایت طراحی شده را در مرورگرهای مختلف خصوصا IE6 , IE5 تست کنیم . همیشه این رابه خاطر داشته باشید درست است که مرورگرهای firefox , opera,chrome جزء بهترین و روانترین مرورگرهای موجود میباشد ولی طبق آخرین آمارها با وجود IE8 هنوز هم اکثر کاربران اینترنت از IE5 ,IE6 استفاده میکنند و علاقه ای هم به آپدیت کردن مرورگرهای خود ندارند . پس وب سایت شما باید در همه مرور گرها درست نمایش یابد. همانطوری که گفتم که باید شرایطی فراهم آوریم تا بتوانیم وب سایت طراحی شده را در مرورگرهای مختلف تست کنیم . برای این کار باید باید نسخه های مختلف مرورگر را در کامپیوتر نصب داشته باشیم بعضی از مرور گر ها روی windows و بعضی مرورگر ها روی mac و بعضی روی Linux کار میکنند (firefox روی تمام سیستم عامل ها کار می کنند) پس باید سیستم عامل های متقاوتی هم داشته باشیم که به طور حتم کار جالبی نیست .راه بهتر این است که با یک برنامه بتوان از چند سیستم عامل در روی یک سیستم عامل به صورت مجازی استفاده کرد . مثل VirtualBox که آن را می توانید از آدرس http://www.asandownload.com دانلود کنید. نه به این صورت که چند سیستم عامل به صورت مجزا نصب شود، بلکه چند سیستم عامل در یک ویندوز بارگذاری شود و دقیقا به صورت مجازی!
البته یک وب سایت هم موجود است که همه این کارها رو برای شما انجام بدهد ولی برای این کار از شما هزینه دریافت می کند. وب سایت www.browsercam.com میتواند وب سایت شما را در همه سیستم عامل ها و در همه مرورگرها تست کرده و نتیجه را به شما نمایش دهد .البته این وب سایت برای عکس گرفتن از نتیجه کار چند روزی رایگان می باشد و مثلا نحوه نمایش وب سایت شما را در Linux با مرورگر Firefox به صورت فایل .jpg نمایش می دهد. حتما به این سایت سری بزنید مطمئن باشید ارزشش را دارد.

البته شاید شما هم مثل من جزء آن دسته از طراحانی هستید که زیاد تمایل ندارید طرح خود را در سیستم عامل های غیر از Windows تست کنید زیرا بالای ۹۵ درصد از مردم ایران از این سیستم عامل استفاده می کنند .
پس کافی است مرورگرهای زیر را بر روی ویندوز نصب داشته باشیم :
IE5 , IE6 , IE7 , FireFox , Opera , Chrome
استاندارد های FireFox , Opera , Chrome بسیار شبیه به هم است ولی امان از IE5 , IE6 !
IE7 , IE8 بهتر از نسخه های قبل بوده و کارکردی تقریبا شبیه به نسخه های mozilla دارند و البته بازهم نه به خوبی آنها.
یه مشکل داریم ! چطور میتونیم نسخه های مختلف IE را کنار هم در ویندوز نصب داشته باشیم؟
خوب بازهم سراغ اینترنت میریم و از این دوست عزیز مدد می جوییم :
سایت www.tredosoft.com/Multiple_IE برنامه ای در اختیار شما قرار می دهد تا این کار را انجام دهید. اگرچه این نسخه ها Stable نیستند ولی برای تست وب سایت طراحی شده مناسب می باشند . من بر روی کامپیوتر خودم , FireFox3 , Opera IE5 ,IE6 ,IE8 را نصب دارم.
حالا همه این کارها رو انجام دادیم تا ببینیم تفاوت ها در نمایش روی مرورگرهای مختلف به چه صورت است .یعنی یک قدم به جلو . حداقل این است که میدانیم روی چه مرورگرهای وب سایت درست نمایش پیدا می کند و در چه مرورگرهای نمایشی دور از انتظار را داریم. البته طی تجربه دیده ام که مشکلات اکثرا روی IE6 و نسخه های پایین تر بروز می کند .
پس از کشف مشکلات که روی IE بوجود می آید باید آنها را برطرف کنیم .برای این کار باید دستورات شرطی اینترنت اکسپلورر ( (internet explorer condition components استفاده کنیم تا بتوانیم نسخه مرورگرIE مورد نظر در دستگاه کاربر را تشخیص داده و نسبت به آن رفتار وب سایت را تعیین کنیم .
دستورات شرطی اینترنت اکسپلورر می تواند ورژن ماشین هدف(نسخه مرورگر IE) رو تشخیص دهد و نسبت به آن رفتار خاصی داشته باشد .به طور مثال :
برای این که بخواهیم یک لایه در مرکز عرض صفحه با مارجین برابر از کنار ها قرار بگیرد پس از تعیین عرض لایه از دستور margin:auto ; استفاده می کنیم اما در مرورگر IE5 لایه در مرکز قرار نمیگیرد!
برای این که در این مرورگر هم در مرکز قرار بگیردباید از دستور text-align:center; در والد خودش استفاده کرد. پس باید یک فایل css جدا نوشت مختص IE5 مثلا به نام ie5style.css و در صفحه وب سایت تعیین کنیم که اگر مرورگر IE5 بود از این فایل ie5style.css استفاده کند.

دستورات برای شناسایی نسخه ها IE:

  1. <!–[if IE ]>
  2. <link href=“iecss.css” rel=“stylesheet” type=“text/css”>
  3. <![endif]>

این دستور بیان میکند اگر نسخه مرورگر IE با هر ورژنی بود از فایل iecss.css برای فرمت بندی صفحه استفاده کند و در غیر این صورت از فرمت بندی که در صفحه تعیین میشود استفاده کند

  1. <!–[if IE 6 ]>
  2. <p>Only IE 6 will see this</p>
  3. <![endif]>

اگر IE6 بود دستورات بین تگ p را مشاهده می کند که میتواند لینک به یک فایل css باشد مثل بالا و یا در همان جا به صورت internal دستورات css را تعریف کرد و یا در آنجا از دستورات javascript استفاده کرد.

  1. <!–[if lt IE 7 ]>
  2. <p>Only less than IE 7 will see this</p>
  3. <![endif]>

اگر نسخه پایین تر از IE7 بود دستورات بین تگ p را مشاهده می کند

  1. <!–[if lte IE 7 ]>
  2. <p>Only less than or equal to IE 7 will see this</p>
  3. <![endif]>

اگر نسخه IE7 و پایین تر از IE7 بود دستورات بین تگ p را مشاهده می کند

  1. <!–[if gt IE 7 ]>
  2. <p>Only greater than IE 7 will see this</p>
  3. <![endif]>

اگر نسخه بالاتر تر از IE7 بود دستورات بین تگ p را مشاهده می کند

  1. <!–[if gte IE 7 ]>
  2. <p>Only greater than or equal to IE 7 will see this</p>
  3. <![endif]>

اگر نسخه IE7 وبالا تر از IE7 بود دستورات بین تگ p را مشاهده می کند .

به همین ترتیب :

  1. <!–[if IE 5]>
  2. <p>This covers all versions of IE5 including IE5.5</p>
  3. <![endif]>
  4. <!–[if !IE 6]>
  5. <p>IE7 or IE5 only</p>
  6. <![endif]>
  7. <!–[if (IE 6)|(IE 7)]>
  8. <p>IE6 or IE7 only </p>
  9. <![endif]>

مقاله فوق توسط دوست بسیار عزیزم آقای بهزاد علیبگی نوشته شده و امیدوارم که از این به بعد شاهد فعالیت بیشتر ایان در سایت ITT باشیم

Be Sociable, Share!


۱۸ دیدگاه


  1. Afkhami
    ۳۰ فروردین ۱۳۸۸

    عالی ترین و شیواترین مطلب مفید که لازم است همه در طراحی از آن استفاده کنند. ممنونم از این مقاله جالب.




  2. هادی
    ۳ اردیبهشت ۱۳۸۸

    با سلام
    به این ،یک هدیه عالی می گویند.
    پیروز باشید و سربلند




  3. محمد حسن
    ۷ شهریور ۱۳۸۸

    با این روش دیگه نیازی نیست از هک‌های غیر استاندارد استفاده کنیم و CSS/HTML ای که می‌نویسیم valid باقی می‌مونه. ممنون




  4. تارا
    ۱۶ آذر ۱۳۸۸

    خیلی تُپل و عالی بود
    با تشکر از استاد علی بیگی




  5. سارا
    ۱۸ فروردین ۱۳۸۹

    فوق العاده بود واقعا ممنون که اطلاعاتتون رو روی سایت می ذارید تا دیگران هم استفاده کنن




  6. ایمان
    ۱ اردیبهشت ۱۳۸۹

    ممنون خیلی عالی بود




  7. علیرضا
    ۵ مرداد ۱۳۸۹

    من سوالی داشتم.؟
    اگه من بخوام یک قالب که برای یکی از سیستم های مدیریت محتوای رایگان،که با پی اچ پی هم ساخته شده را مشروط کنم که وقتی کاربر با IE سایت رو باز کرد از یک استایل دیگه استفاده کنه از چه کدی و کجا باید استفاده کنم.؟
    ممنون میشم اگه جواب بدید




  8. مهرشاد درزی
    ۱۲ مرداد ۱۳۸۹

    این روش دیگه قدیمی شده شما می تونید توسط تابع

    $browes = $_SERVER[‘HTTP_USER_AGENT’];
    $f = ‘Firefox’;
    $c = ‘Chrome’;
    $o = ‘Opera’;
    $e = ‘MSIE’;
    $s = ‘Safari’;

    این کار رو انجام بدید…..




  9. امیر
    ۱۲ مرداد ۱۳۸۹

    ممنون از راهنمایی شما مهرشاد جان . لطفا بیشتر در مورد استفاده از این تابع توضیح بدید تا دوستان استفاده کنند.




  10. koZZet
    ۱۰ آذر ۱۳۸۹

    سلام…
    من برنامه Multiple_IE رو نصب کردم و الان IE5.01 و IE5.5 و IE6 رو دارم… ولی وقتی که سایتم رو با این سه تا browser تست می کنم با IE8 باز میشه… باید همین طور باشه؟ و خوب وقتی هم که باز میشه توی همه ظاهرش هیچ فرقی نکرده و انگار مشکلی وجود نداره…
    به نظر شما، من از این browser ها واقعا دارم استفاده می کنم یا یه مشکلی هست؟




  11. حسین سعیدی
    ۵ دی ۱۳۸۹

    این روش دیگه قدیمی شده شما می تونید توسط تابع …

    این روش اصلا قدیمی نیست، حلقه های شرطی برای مرورگر ie هست که شما در کد html قرار می دهید و می توانید بین نسخه های متفاوت ie ، کد css دلخواه خود را انتخاب کنید.
    در توضیحاتی که شما دادید، به جای مشخص کردن نسخه های IE، شما مرورگر های مختلف را سفارشی کردید.
    موفق باشید




  12. حسین سعیدی
    ۵ دی ۱۳۸۹

    در ضمن، عنوان مقاله شما اشتباه هست.
    شما با این عملگر ها، IE را دور نمی زنید، بلکه از دستوراتی شرطی که مایکروسافت برای سهولت کار شما معرفی کرده استفاده می کنید




  13. مهدی هوشمندی
    ۶ دی ۱۳۸۹

    http://www.my-debugbar.com/ietester/install-ietester-v0.4.6.exe
    برنامه ای برای تست نحوه نمایش صفحه در مرورگرهای IE ورژن های مختلف




  14. sina
    ۸ خرداد ۱۳۹۰

    مقاله ارزشمندی بود از شما تشکر میکنم.
    نمیدانم چرا این مرورگرها هر کدام ساز خودشان را میزنند و از یک استاندارد یکسان پیروی نمیکنند تا به جای نگرانی از نمایش یک سایت در انواع مرروگر ، هزینه زمانی ما صرف تولید و ایجاد ایده های جدیدتر باشد.




  15. رضا
    ۲۸ مرداد ۱۳۹۰

    سلام
    من میخوام اگه اینترنت اکسپلورر ۹ به پایین بود از یه سی اس اس و اگه به بالا و دیگر مرورگرها بود از یه سی اس اس دیگه استفاده کنه. کد زیر برای من جواب نمیده.

    یعنی باز هم از لینک سی اس اس بیرون از ایف استفاده میکنه. باید چه کار کنم؟؟؟




  16. محمد
    ۱۸ آذر ۱۳۹۰

    با سلام. سایت browsershots.org بدون نیاز به پول سایت ما رو در مرورگرهای مختلف نشون میده.




  17. مهدی
    ۱۶ فروردین ۱۳۹۱

    دستوری وجود ندارد که اگر IE نبود (مثلا Fire fox) این بخش را اجرا کند.
    با تشکر




  18. مهدی
    ۲۷ فروردین ۱۳۹۱

    متأسفانه سایت شما نیز مانند بعضی از سایت ها در IE 5.5 و IE6 کیفیت مطلوبی ندارد!! آخه چرا شما…؟؟؟



دیدگاه خود را بنویسید