راه های دور زدن 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:

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

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

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

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

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

منبع: www.ittutorial.ir
/س