توضیحات شرطی برای اینترنت اکسپلورر

چهارشنبه, ۴ دی ۱۳۸۷ / نوشته شده در : HTML & CSS , آموزش

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

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

در این شرایط راه‌های زیادی وجود دارد که میتوان به کمک آنها نوع مرورگر را تشخیص داد، بیشتر این راه‌ها مارا مجبور به استفاده از نوعی اسکریپت میکنند.

اما در این مطلب قصد دارم تا امکان توضیحات شرطی (Conditional Comments) را که از نسخه اینترنت اکسپلورر ۵ به وسیله مایکروسافت در این مرورگر جای داده شده را توضیح دهم.

ابتدا باید انواع توضیحات شرطی را شرح دهیم :
توضیحات استاندارد در زبان HTML - این توضیحات که بطور استاندارد در زبان HTML وجود دارند و توسط تمام مرورگر‌ها شناخته میشوند، این توضیحات کار خاصی انجام نمیدهند و فقط برای نوشتن توضیحات در قسمتی از کد استفاده میشوند و هنگام تجزیه کد توسط مرورگر نادیده گرفته میشوند.
شیوه نگارش این نوع توضیحات به این صورت میباشد :

<!-- Comment Content -->

توضیحات شرطی از نوع downlevel-hidden – این نوع توضیحات در مرورگر‌هایی که توضیحات شرطی را نمیشناسند نادیده گرفته میشنود و محتوای آنها نمایش داده نمیشوند، شیوه نگارش آنها بصورت زیر است :

<!-- [if expression]>
HTML
<![endif]-->

توضیحات شرطی از نوع downlevel-revealed – این نوع توضیحات در مرورگر‌هایی که توضیحات شرطی را نمیشناسند بدون در نظر گرفتن نتیجه شرط اجرا میشوند ولی در مرورگر‌هایی که توضیحات شرطی را میشناسند فقط در صورتی که نتیجه شرط درست باشد اجرا میشوند، شیوه نگارش آنها بصورت زیر میباشد:

<![if expression]>
HTML
<![endif]>

خصوصیات توضیحات شرطی :

خاصیت مثال توضیح
IE [if IE] در صورتی که از اینترنت اکسپلورر استفاده کنید صحیح است
VALUE [if IE 7] یک عدد صحیح یا اعشاری که نسخه مرورگر را مشخص میکند
! [if !IE] عملگر NOT. اگر مرورگر استفاده شده با مورد مشخص شده یکی نباشد
it [if it IE 6] عملگر less-than. اگر نسخه مرورگر مورد استفاده از مورد مشخص شده کمتر باشد
ite [if ite IE 5.5] عملگر less-than or equal. اگر نسخه مرورگر استفاده شده از مورد مشخص شده کمتر با برار آن باشد
gt [if gt IE 7] عملگر greater-than. اگر نسخه مرورگر استفاده شده از مورد مشخص شده بیشتر باشد
gte [if gte IE 6] عملگر greater-than or equal. اگر نسخه مرورگر استفاده شده از مورد مشخص شده بیشتر یا برابر آن باشد
() [if !(IE 7)] برای تولید دستورات پیچیده‌تر
& [if (gt IE 5)&(lt IE 7)] اگر تمام دستورات درست باشد
| [if (IE 6)|(IE 7)] اگر یکی یا هردو دستور درست باشد
true [if true] همیشه مقدار درست را برمیگرداند
false [if false] همیشه مقدار غلط را برمیگرداند

نحوه استفاده :
نحوه استفاده از این دستورات در زیر بصورت کلی نمایش داده شده است.

<!--[if IE]> <p>You are using Internet Explorer.</p> <![endif]-->
<!--[if !IE]> <p>You are not using Internet Explorer.</p> <![endif]-->

<!--[if IE 7]> <p>Welcome to Internet Explorer 7!</p> <![endif]-->
<!--[if !(IE 7)]> <p>You are not using version 7.</p> <![endif]-->

<!--[if gte IE 7]> <p>You are using IE 7 or greater.</p> <![endif]-->
<!--[if (IE 5)]> <p>You are using IE 5 (any version).</p> <![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]> <p>You are using IE 5.5 or IE 6.</p> <![endif]-->
<!--[if lt IE 5.5]> <p>Please upgrade your version of Internet Explorer.</p> <![endif]-->

<!--[if true]> You are using an <em>uplevel</em> browser. <![endif]-->
<!--[if false]> You are using a <em>downlevel</em> browser. <![endif]-->

<!--[if true]><![if IE 7]> <p>This nested comment is displayed in IE 7.</p> <![endif]><![endif]-->

حالا برای مثال اگر بخواهیم که فایل CSS در مرورگر اینترنت اکسپلورر و دیگر مرورگر‌ها متفاوت باشد میتوانیم از کدی شبیه کد زیر استفاده کنیم.

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

۸ دیدگاه

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