1391
جزئیات وبلاگ
CSS های اختصاصی برای مرورگرهای اینترنت اکسپلورر – IE
طراحان وب سایت در تلاشند تا بتوانند وب سایتهایی طراحی کنند تا در تمامی مرورگرها و رزولوشن های مختلف صفحات نمایش به درستی دیده شود ، این موضوع یکی از اصول طراحی صفحات وب است و هر طراح وب سایت به صورت ایده آل باید این موضوع را مد نظر خود قرار دهد .
چگونه برای مرورگرهای اینترنت اکسپلورر سی اس اس اختصاصی بنویسیم ؟
یکی از چالشهای هر طراح وب سایت باگ هایی است که به واسطه استفاده از مرورگر اینترنت اکسپلورر به وجود می آید . از آنجایی که معمولا مشتریان و بازدید کنندگان وب سایت هنوز از IE استفاده می کنند ( و خوشبختانه با حضور مرورگرهای قدرتمندی چون کروم و فایرفاکس این روند رو به کاهش است ) باید به رفع باگ ها و ایرادات نمایش صفحات در این مرورگر بپردازیم . قبلا در مرود استفاده از سی اس اس ریست – CSS Reset برای یکسان سازی و یکپارچه سازی کدهای سی اس اس در مرورگرهای متفاوت نیز مطالبی ارائه شده است که خواندن آن توصیه میشود . یکی از بهترین شیوه ها برای خلاص شدن از دست این نا هماهنگی ها استفاده از کامنت های شرطی conditional comments است . البته راه های زیادی هم علاوه بر دستورات شرطی وجود دارد .
کامنت های شرطی IE conditional comments
کامنت گذاری به صورت HTML برای طراحان وب سایت شناخته شده است . کامنت ها به طراحان کمک میکند تا کدهای تمیز تری داشته باشند و کدها از خوانایی بیشتری برخوردار شوند .
به صورت معمول برای گذاشت کامنت در سورس کدهای HTML از کد زیر استفاده میشود
|
1
|
<!-- --> |
توجه داشته باشید در اینجا از کامنت گذاری در کدهای اچ تی ام ال صحبت میشود و این کامنت ها در کدهای سی اس اس و … به صورت های دیگری مورد استفاده قرار میگیرند .
مرورگر اینترنت اکسپلورر دارای خصوصیت دستورهای شرطی است که در مرورگرهای دیگر پشتیبانی نمیشود و این مورد به طراحان وب سایت کمک خواهد کرد تا دستورات و کدهای HTML اختصاصی برای مرورگرهای IE را در کدهای اچ تی ام ال قرار دهند .
در این نوع از کامنت گذاری در صورت صحیح بودن شرط کدهای داخل کامنت که به صورت HTML نوشته شده اند خوانده و اجرا میشوند . این محتوا میتواند لینک یک Style خارجی و یا یک تگ باشد و یا دستورات سی اس اس داخلی و …
این کامنت ها در مرورگرهای دیگر به عنوان کامنت محسوب میشوند و دستورات شرطی نادیده گرفته خواهند شد .کامنت های شرطی برای مرور گر IE از متداول ترین راه های رفع باگ های نسخه های (IE6,IE7,IE8) می باشد. کامنت های شرطی به ما کمک خواهند کرد که نسخه مرورگر IE کاربر را مورد هدف قرار دهیم و برای رفع نا هماهنگی ها در آن نسخه ، دستورات سی اس اس به خصوصی بنویسیم . در زیر نمونه کد هایی ارائه شده است و میبینید که هدف آنها نسخه های مختلف IE می باشد :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!--[if IE]>According to the conditional comment this is IE<br /><![endif]--><!--[if IE 6]>According to the conditional comment this is IE 6<br /><![endif]--><!--[if IE 7]>According to the conditional comment this is IE 7<br /><![endif]--><!--[if IE 8]>According to the conditional comment this is IE 8<br /><![endif]--><!--[if IE 9]>According to the conditional comment this is IE 9<br /><![endif]--><!--[if gte IE 8]>According to the conditional comment this is IE 8 or higher<br /><![endif]--><!--[if lt IE 9]>According to the conditional comment this is IE lower than 9<br /><![endif]--><!--[if lte IE 7]>According to the conditional comment this is IE lower or equal to 7<br /><![endif]--><!--[if gt IE 6]>According to the conditional comment this is IE greater than 6<br /><![endif]--><!--[if !IE]> -->According to the conditional comment this is not IE<br /><!-- <![endif]--> |
در دستورات شرطی میتوانید از gt و lte برای هدف قرار دادن یک بازه از نسخه های مرورگر اینترنت اکسپلورر استفاده نمائید
- gt: نسخه بالاتر از
- gte: نسخه بالاتر از یا برابر
- lt: نسخه پایین تر
- lte: نسخه پایین تر یا برابر
برای هدف قراردادن مرورگرهای به غیر از اینترنت اکسپلورر میتوانید از دستور شرطی زیر استفاده نمائید
|
1
|
<!--[if !IE]> --> |
قوانین مخصوص CSS برای اکسپلورر
موارد دیگری در قوانین CSS بیان شده است که فقط در اینترنت اکسپلور اجرا می شود. برای مثال افزودن علامت ستاره (*) قبل از خصوصیت ((property ، CSS برای IE7 یا افزودن علامت آندر اسکور (_) قبل از خصوصیات ((property، CSS برای IE6 . این روش ها معمولا پیشنهاد نمی شود زیرا به اندازه کافی معتبر نیستند.
- IE8 یا نسخه پائین تر : برای نوشتن قوانین CSS مخصوصا برای IE8 یا پائین تر یک بک اسلش backslash (/9)در آخر قبل از (;) اضافه کنید
- IE7 یا پائین تر : افزودن ستاره (*) قبل از خصوصیات ((property CSS
- IE6 : افزودن آندر اسکور (_) قبل از خصوصیات ((property
|
1
2
3
4
5
6
7
8
9
10
11
|
.box { background: gray; /* standard */ background: pink\9; /* IE 8 and below */ *background: green; /* IE 7 and below */ _background: blue; /* IE 6 */} |
استفاده از کلاس های شرطی در تگ HTML برای اینترنت اکسپلورر
سومین راه حل افزودن کلاس های CSS برای نسخه های IE به تگ های HTML بوسیله کامنت های شرطی IE می باشد . این روش اساسا بررسی می کند در صورتی که مرور گر ما IE بود، به تگ HTML یک کلاس اضافه میکند و از کلاس IE به عنوان گزینشگر parent میتوان برای هدف قرار دادن کلاسها در مرورگرهای اینترنت اکسپلورر با نسخه های مختلف استفاده کرد . ( برای مثال ie6.box ).
|
1
2
3
4
5
|
<!--[if lt IE 7 ]> html class="ie6" <![endif]--><!--[if IE 7 ]> html class="ie7" <![endif]--><!--[if IE 8 ]> html class="ie8" <![endif]--><!--[if IE 9 ]> html class="ie9" <![endif]--><!--if |!><!--> html <!--<![endif]--> |
دستورات شرطی راه مطمئنی برای صحیح انجام شدن دستورات سی اس اس شما در مرورگ اینترنت اکسپلورر کاربر شماست اما به طور کلی استفاده از روشهای استاندارد کد نویسی میتواند نیاز شما به استفاده از هک برای مرورگرهای اینترنت اکسپلورر را بر طرف کند .( البته این فقط یک شوخی بود :-) نظر شما در مورد مرورگر اینترنت اکسپلورر چیست ؟
CSS های اختصاصی برای مرورگرهای اینترنت اکسپلورر – IE