تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر

چرا باید تنظیمات مخصوص مرورگر اینترنت اکسپلورر را اعمال کنیم؟

شاید برایمان جای سوال باشد که چرا باید تنظیمات مخصوص مرورگر اینترنت اکسپلورر را در صفحه وب خود داشته باشیم؟
در پاسخ باید گفت که البته این کار همیشه هم ضروری نیست، اگر صفحه وب به خوبی در نسخه های مختلف مرورگر اینترنت اکسپلورر و سایر مرورگرها نمایش داده می شود و تمام عناصر آنطور که انتظار داریم سر جای خودشان هستند دیگر نیازی نیست تنظیمات جداگانه ای را اعمال کنیم، چرا که هدف از تنظیمات CSS مخصوص، در نظر گرفتن استایل سفارشی و سازگار کردن صفحه وب از لحاظ نمایش ظاهری و درست عمل کردن امکانات مبتنی بر CSS در نسخه های مختلف مرورگرها به شکل یکسان است، بر این اساس صرفا در حالتی که صفحه وب در برخی نسخه های مرورگرها آنطور که مد نظر داریم نمایش داده نشود و ایراداتی مانند جابجایی یا مخفی شدن عناصر مشاهده شود، راه حل متداول می تواند در نظر گرفتن استایل CSS مخصوص باشد.

برای تنظیم ویژگی های CSS خاص اکسپلورر، چه روش هایی وجود دارد؟

معمول ترین و متداول ترین روش تنظیم ویژگی های CSS خاص مرورگر اینترنت اکسپلورر استفاده از پیام های شرطی یا (Conditional Comments) است که در ادامه آموزش حاضر به طور مفصل در این رابطه خواهیم گفت، شیوه های دیگری تحت عنوان هک یا CSS Hack نیز وجود دارند که در واقع به معنی استفاده از علائم مخصوص در هنگام تعریف خاصیت های CSS است که صرفا توسط نسخه های خاصی از مرورگر اینترنت اکسپلورر پردازش می شود، این علائم برای سایر مرورگرها تاثیرگذار نیست و مفهوم خاصی را القاء نمی کند.

کدنویسی استایل CSS مخصوص مرورگر اینترنت اکسپلورر

برای کدنویسی استایل CSS مخصوص مرورگر اینترنت اکسپلورر ابتدا باید سایت، وبلاگ یا قالب طراحی شده را با برنامه هایی نظیر IETester که از آدرس www.my-debugbar.com قابل دریافت و نصب است بررسی کنیم، اگر موردی به نظرمان دچار ناسازگاری و ایراد بود سعی کنیم کلاس یا آی دی CSS مربوط به آن قسمت را پیدا کرده و پس از اعمال تغییرات در راستای سازگاری مد نظرمان نتیجه را دوباره امتحان کنیم و این روند را تا جایی که مشکل حل شود ادامه دهیم، به طور مثال ممکن است به فرض نمایش خاصیت border در یک نسخه از مرورگر دچار اشکال باشد و نیاز به اعمال استایل اختصاصی برای آن نسخه ضرورت داشته باشد در این صورت اگر استایل اصلی به این شکل باشد:

<style type="text/css">
.compatible {
    display: inline-block;
    width: 600px;
    height: 800px;
    border: 1px solid #000000;
    line-height: 22px;
}
</style>

در استایل اختصاصی کافی است صرفا قسمت مربوط به خاصیت border را بر اساس نیازمان تغییر دهیم:

<style type="text/css">
.compatible {
    border: 2px solid #000000;
}
</style>

حال تکه کد اختصاصی مربوط به هر نسخه از اکسپلورر که با آن کد مشکل در آن نسخه مخصوص حل می شود را ترجیحا درون یک فایل CSS دیگر کپی می کنیم (معمولا تنها کافی است کلاس یا آی دی مورد نظر را به همراه ویژگی هایی که خاص مرورگر اکسپلور است کپی کنیم) تا آن را با دستوراتی که در ادامه خواهیم گفت پس از فایل CSS اصلی در صفحه به طور جداگانه وارد نمائیم.
نکته 1: قبل از اعمال هر نوع تغییراتی باید از استایل CSS اصلی پشتیبان بگیریم، دقت کنیم که فایل CSS اصلی قالب، مبنای کار ما است و تا حد امکان هر قالب باید از یک فایل استایل واحد پیروی کند، به عبارتی در نظر گرفتن استایل اختصاصی باید در حداقل موارد و ترجیحا در فایل های مجزا بوده و پس از فایل CSS اصلی در صفحه درج شود تا قانون اولویت بندی خاصیت های مشابه در CSS به درستی رعایت شود.
نکته 2: عبارت IE مخفف Internet Explorer است.

پیام های شرطی در مرورگر اینترنت اکسپلورر

نخستین روش اعمال تنظیمات مخصوص مرورگر اکسپلورر استفاده از پیام های شرطی (Conditional Comments) است که در اکسپلورر با علائم خاصی با فرمت نمونه زیر تعریف می شود:

<!--[if IE]>
آدرس فایل استایل مخصوص مرورگر اینترنت اکسپلورر
<![endif]-->

توضیح:
- حالت معمول ایجاد پیام در صفحات HTML درج عبارات متنی بین علامت های <-- !--> است، همانطور که در نمونه فرمت بالا مشخص است این شرط ها نیز مبتنی بر همین قاعده هستند و عبارات دستوری if IE و endif به صورت پیام درج شده اند.
- علت درج دستورات شرطی به صورت پیام این است که سایر مرورگرها نسبت به آن بی تفاوت باشند و صرفا به عنوان پیام یادآوری متن را پردازش کنند و خروجی در صفحه چاپ نشود.
- با توجه به دستور [if IE] در نسخه های مرورگر اکسپلورر هر آنچه که مابین دو تگ پیام درج شده به صورت متن یا دستور عادی تفسیر می شود، در واقع مقادیر موجود در این شرط برای اینترنت اکسپلورر حالت پیام صرف ندارد و به شکل متن قابل استفاده است اما سایر مرورگرها با آن مشابه یک پیام معمولی در صفحات وب برخورد و پردازشی اجرا یا خروجی در صفحه چاپ نمی کنند.
- درون این شرط ها می توانیم هر عبارت یا کدی قرار دهیم و صرفا محدود به درج استایل CSS نیست، به طور مثال می توانیم به کاربر پیامی مبنی بر اینکه مرورگر او قدیمی و منسوخ شده است نمایش دهیم و بخواهیم که از مرورگر به روزتر دیگری استفاده کند:

<!--[if IE]>
کاربر گرامی لطفا از مرورگر دیگری به غیر از اینترنت اکسپلورر استفاده کنید!
<![endif]-->

- این پیام های شرطی باید بعد از استایل اصلی و پیش فرض قالب که مخصوص تمام مرورگرها است ترجیحا در قسمت هدر و بین تگ های head قرار گیرند.

تنظیمات مخصوص نسخه های مختلف مرورگر اینترنت اکسپلورر

در ادامه آموزش لیست تقریبا کاملی از تنظیمات استایل CSS مخصوص نسخه های مختلف مرورگر اینترنت اکسپلورر به همراه توضیحات آنها را درج کرده ایم.
درج استایل مخصوص مرورگر اینترنت اکسپلورر در صفحه (تمام نسخه ها)

<!--[if IE]>
<link href="style/ie.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

توضیح:
- if به معنی اگر و IE مخفف اینترنت اکسپلورر (Internet Explorer) است.
درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه 6

<!--[if IE 6]>
<link href="style/ie6.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

توضیح:
-در صورتی که استایلی در فایل ie6.css داشته باشیم خاصیت های آن در مرورگر اینترنت اکسپلورر نسخه 6 با خواص مشترک استایل اصلی جایگزین خواهند شد.
درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه 7

<!--[if IE 7]>
<link href="style/ie7.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه 8

<!--[if IE 8]>
<link href="style/ie8.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه 9

<!--[if IE 9]>
<link href="style/ie9.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه بالا تر از 6

<!--[if gt IE 6]>
<link href="style/gtie6.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

توضیح:
- عبارت gt به معنی greater than یا بزرگتر از است.
درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه بالا تر از 7

<!--[if gt IE 7]>
<link href="style/gtie7.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه بالا تر از 8

<!--[if gt IE 8]>
<link href="style/gtie8.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه پائین تر از 7

<!--[if lt IE 7]>
<link href="style/ltie7.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

توضیح:
- عبارت lt به معنی less than یا کوچکتر از است.
درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه پائین تر از 8

<!--[if lt IE 8]>
<link href="style/ltie8.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه پائین تر از 9

<!--[if lt IE 9]>
<link href="style/ltie9.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه 6 و بالا تر از 6

<!--[if gte IE 6]>
<link href="style/gteie6.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

توضیح:
- عبارت gte به معنی greater than equal یا بزرگتر مساوی است.
درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه 7 و بالا تر از 7

<!--[if gte IE 7]>
<link href="style/gteie7.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه 8 و بالا تر از 8

<!--[if gte IE 8]>
<link href="style/gteie8.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه 7 و پائین تر از 7 

<!--[if lte IE 7]>
<link href="style/lteie7.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه 8 و پائین تر از 8

<!--[if lte IE 8]>
<link href="style/lteie8.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

درج استایل مخصوص مرورگر اینترنت اکسپلورر نسخه 9 و پائین تر از 9

<!--[if lte IE 9]>
<link href="style/lteie9.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

درج استایل برای حالتی که مرورگر کاربر اینترنت اکسپلورر نباشد

<!--[if !IE]>
<link href="style/notie.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

توضیح:
- کاراکتر علامت تعجب (!) برای منفی سازی پیام شرطی استفاده می شود.

هک های مخصوص اینترنت اکسپلورر

علاوه بر روش های بالا در موارد خیلی خاصی می توان از حفره ها و اشکالات موجود در مرورگرها جهت مقاصد خیرخواهانه استفاده کرد!، از این نظر شاید وجود حفره در نرم افزارها همیشه هم بد نباشد هرچند بهتر است پدیدآورندگان برنامه ها زمان بیشتری برای رفع مشکلات اختصاص دهند تا کاربران مجبور به استفاده از این شیوه ها نشوند، در هر صورت اصطلاح هک CSS در مرورگرهای مختلف بی شباهت به مفهوم کلی هک که به طور معمول با آن آشنایی داریم نیست، به عبارتی در اینجا نیز از نقایص موجود در برنامه نویسی مرورگر استفاده می کنیم با این تفاوت که هدف ما صرفا تنظیم ظاهر صفحه وب و رفع مشکلات ناخواسته آن است، بحث هک در CSS جزئیات زیادی دارد به همین دلیل در این مطلب صرفا به ذکر چند نمونه اکتفا می کنیم، البته به یاد داشته باشیم در کل استفاده از هک CSS توصیه نمی شود چرا که بهتر است حتی المقدور بر سلکتورها و خاصیت های استاندارد CSS تکیه داشته باشیم از طرفی این هک ها در مرورگرهای مختلف که از به روز رسانی های متفاوتی استفاده می کنند، به شکل واحدی ممکن است پردازش نشوند.

هک با عبارت html+*

در این روش یک آی دی یا کلاس را هم به صورت عادی و هم با درج عبارت html+*  در ابتدا تعریف می کنیم، به عنوان مثال در نمونه کد زیر دو ویژگی متفاوت برای یک آی دی تعریف کرده ایم، قسمتی که عبارت html+* در ابتدای آن قرار دارد تنها در مرورگر IE 7 پردازش می شود.

<style type="text/css">
#my-id{
    border:#333 2px dotted;
}
*+html #my-id{
    border:#333 4px solid;
}
</style>

هک با زیر خط یا underline

روش هک زیر خط یا underline که عنوان دیگر آن underscore است برای هک نسخه های مختلف اینترنت اکسپلورر مخصوصا نسخه 6 کاربرد دارد، در این روش در همان آی دی یا کلاس هدف ویژگی مورد نظر را با یک زیرخط در ابتدا تعریف می کنیم.

<style type="text/css">
body{
    font-size:18px;
    font-family:Arial, Helvetica, sans-serif;
    _font-size:10px;
    _font-family:Tahoma, Geneva, sans-serif;
}
</style>

هک با استفاده از علامت ستاره *

روش هک با علامت ستاره * برای مرورگر اینترنت اکسپلورر نسخه 7 به پائین به کار می رود، در این روش برای عناصر خاص اکسپلورر یک ستاره در ابتدای آنها قرار می دهیم.

<style type="text/css">
.my-class{
    background-color:#CCC;
    *background-color:#0CC;
}
</style>

هک با قرار دادن عبارت 9\

این شیوه هک برای مرورگر اینترنت اکسپلورر نسخه 9 یا 8 و پائین تر به کار می رود، در این روش برای ویژگی خاص اکسپلورر عبارت 9\ را به انتهای خاصیت اضافه می کنیم.

<style type="text/css">
.my-class{
    background-color:#CCC;
    background-color:#0CC\9;
}
</style>

در پایان این آموزش یادآور می شویم که استفاده از استایل CSS مخصوص مرورگر اکسپلورر برای قالب صفحه وب تنها در شرایطی ضروری است که اشکال یا ایراد قابل توجهی در نسخه بخصوصی مشاهده شود، در غیر اینصورت بهتر است همواره از یک استایل استاندارد و واحد برای تمام مرورگرها استفاده کنیم.