ساخت CSS برای مرورگرهای مختلف

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

روش استفاده

برای استفاده کردن از این روش کافی است نسخه مرورگری که موردنظرتان است را در کد HTML وارد کنید. دقت داشته باشید که حتما در HTML باید وارد شود نه فایل CSS !
برای مثال کد زیر در صورتیکه مرورگر اینترنت اکسپلورر باشد اجرا خواهد شد :

<!--[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]-->

نمونه های مختلف این کد را در زیر می بینید :

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

در کدهای فوق واژه های gt و lt به معنی greater than و less than می باشد یعنی اگر برای مثال gt IE6 به کار ببرید در صورتیکه نسخه مرورگر بزرگتر از 6 باشد اجرا خواهد شد و یا lt IE7 در صورتیکه کمتر از 7 باشد اجرا می شود. اگر به انتهای gt و lt حرف e را اضافه کنید همان نسخه را هم در بر می گیرد یعنی lte IE7 به معنی less than و equal نسخه 7 خواهد بود.

سایر مرورگرها

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

<script src="css_browser_selector.js" type="text/javascript"></script>

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

• ie – Internet Explorer
• ie8 – Internet Explorer 8.x
• ie7 – Internet Explorer 7.x
• ie6 – Internet Explorer 6.x
• ie5 – Internet Explorer 5.x
• gecko – Mozilla, Firefox (all versions), Camino
• ff2 – Firefox 2
• ff3 – Firefox 3
• ff3_5 – Firefox 3.5
• opera – Opera
• opera8 – Opera 8.x
• opera9 – Opera 9.x
• opera10 – Opera 10.x
• konqueror – Konqueror
• webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
• safari3 – Safari 3.x
• chrome – Google Chrome
• iron – SRWare Iron

چند مثال :

html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac.ie .mylink { font-weight: bold; }