کامنتهای شرطی در CSS

تصویر مهدی

توجه این مقاله ترجمه مطلبی از سایت quirksmode.org است
کامنتهای شرطی تنها در اینترنت اکسپلورر مخصوص ویندوز کار می‌کنند، بنابراین مناسب دستوراتی هستند تنها برای اینترنت اکسپلورر در ویندوز در نظر گرفته شده‌اند. این کامنتها در اینترنت اکسپلورر نسخه 5 به بعد پشتیبانی می‌شوند و با استفاده از آنها امکان تشخیص نسخه‌های مختلف مانند 5.0، 5.5، و 6.0 وجود دارد.
کامنتهای شرطی به صورت زیر هستند:

<!--[if IE 6]>
	دستورات مخصوص اینترنت اکسپلورر نسخه 6
<![endif]-->
  1. ساختار پایه این کامنتها مانند کامنتهای HTML است (<!-- -->). بنابراین از دید سایر مرورگرها، تنها کامنتهای معمولی هستند که به طور کلی نادیده گرفته می‌شوند.
  2. از طرف دیگر اینترنت اکسپلورر ساختار خاص <!--[if IE]> را تشخیص داده، و در صورت برقرار بودن شرط، با محتوای کامنت مانند محتوای عادی صفحه برخورد می‌کند.
  3. از آنجایی که کامنتهای شرطی از ساختار کامنتهای HTML استفاده می‌کنند، از آنها می‌توان تنها در فایلهای HTML استفاده کرد و امکان استفاده از آنها در فایل CSS نیست. من شخصا ترجیح می‌دادم که این کامنتها را در فایلهای CSS استفاده می‌کردم ولی این کار عملی نیست. برای این کار شما باید کل تگ <link> که به یک استیل خارجی (فایل CSS) اشاره می‌کند را در یک کامنت شرطی قرار دهید.

مثال

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

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

<!--[if IE]>
	According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
	According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
	According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
	According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
	According to the conditional comment this is Internet Explorer 6<br />
<![endif]-->
<!--[if IE 7]>
	According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
	According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>
	According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
	According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
	According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->

دقت کنید که در این ساختار شرطها به صورت زیر است:

  • gt: بزرگتر از
  • lte: کوچکتر یا مساوی

هک CSS؟

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

تگ comment

یکی از خوانندگان به من گفت که اینترنت اکسپلورر (نسخه ویندوز و مکینتاش) از تگ (غیر استاندارد) <comment> پشتیبانی می‌کند.

<p>This is <comment>not</comment> Internet Explorer.</p>

This is not Internet Explorer.

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

نظرات

تگ comment

عرض سلام وخسته نباشيد
از تگ comment بي خبر بودم...
وبلاگ پرباري دارين، ممنون
عبدالله ميرزابيكي

مطلب خيلي جالبي بود من اين

مطلب خيلي جالبي بود من اين موضوع رو نمي دونستم
اگر فونت نوشته هاتون رو هم به tahoma تغيير بديد عالي ميشه چون اين فونت چشم رو اذيت مي كنه
مو.فق باشيد

تصویر مهدی

ممنون

سلام،
فونت متن رو هم عوض کرم. البته کلا سایت نیاز به تغییرات زیادی داره و هنوز شروع کاره و وقت نکردم زیاد به این چیزها برسم.
ممنون از نظر و پیشنهادتون.

تصویر saeid_mh83

کامنتهای شرطی در CSS (تشخیص مرورگرهای غیر از IE )

سلام
خیلی ممنون از مقالات جالبتون
در مورد کامنتهای شرطی یک نکته به نظرم اومد شاید بد نباشه که اضافه کنید
فرمت دستور بالا بصورت زیر هستش
روش مثبت :

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

روش منفی :

    <!--[if !condition]><![IGNORE]--><![IGNORE[]]>HTML<!--<![endif]-->

بعنی برای تشخیص مروگرهای غیر از IE میتونید از این دستور استفاده کنید با استفاده از علامت ! قبل از IE

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

اگر هم خواستید که مطمئن بشید میتونید از لینک زیر استفاده کنید.
http://www.javascriptkit.com/dhtmltutors/csshacks.shtml

موفق باشید
سعید محمدهاشم

تصویر مهدی

مرورگرهای غیر از IE

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

با اجازتون یکمی قالب نمایش کدهای شما رو ویرایش کردم تا کدها بهتر دیده بشن.