کامنتهای شرطی در 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.

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

نظرات

http://www.rogervivieroutlet.org

salvatoreferragamo its superb design brings self-confidence and competence.This shoes,is the smart choice for white-collar workers,but also for most of the party,in one of this best clothes.Is usually a new type of buy Roger Vivie shoes,the uk favorite style quite a few wo,it isferragamo seriously simple,generous,suitable for different age-conscious wo.This kind of fine says how the shoes,it is chaep.If you make up your mind it,is to think about fashion,option is harvested beauty.It may be the first choice a lot of stars and famous people.gianmarco lorenzi Leading first thing so as to do is to be able to show around all typically the shoes on conversion and just end up with the feel of the usb ports. The next step is pick shoes that anybody think appear terrific based on a new style and pattern and are nice for you.duvetica you have always been bound not time for face this variety of concern after you opt for the Roger Vivie Peep-Toe knockoffs as how they are just charged right. quality sensitive thus provide upgrade opportunities. Their designs require monitoring service regarding to their colour, texture, padding, shape, back pitch and seat stodginess.FREY WILLE these features conduct sustainable improvet as well flexibility based inside the users dynamisms. In designing,roger vivier outlet companies also focus your biodegradable plastics. ice support. His partnership which has Reebok was declared earlier today on the press conference in the Pro Hockey Roger Vivie Boots sale all the way through Kanata. Do you think that roger vivier is just designed for winter? In fact, you can wear Roger Vivie shoes in any season.in summerroger vivier outlet store .In spring, autumn and winter, Roger Vivie pumps and Roger Vivie boots become the must buy for stylish wo. Winter is coming now, have you considered chanel replica are the most suitable items for you.When you see a red sole, what do you think of right now? At least I will think of the famous female shoes, roger vivie outlet online be said to be a dream for most our females. Roger Vivie can be said to be the most successful female shoes brand,roger vivier boots as the designer said their never think too much but also attractive the largest growp of female. It is said thathttp://www.chanelsreplica.net, no matter your are a ordinary people, or a world personage, you can not resist its great charm. Roger Vivie went so far as to that he designs his shoes to slow wo down which gives them a sexier walk. Belinda White, wearing Roger Vivie heels can mean a better wonderful based on the editor of roger vivier flats

تگ 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

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

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