تعریف صورت مسئله
به عنوان یک برنامه نویس و یا طراح وب قطعا تابحال دموی خاص و یا استایل خاصی را دیده اید که بسیار جذاب بوده است و با یک هیجان زیاد تصمیم به پیاده سازی آن را برای پروژه ای که در حال ساختش هستید گرفته اید اما به محض اینکه شروع به پیاده سازی می کنید با یک سطل آب یخ رو به رو می شوید که شما را دل سرد نه, دل یخ می کند! بله روی این سطل اسم قشنگ IE حک شده است.
به عنوان مثال چک باکس فانتزی زیر:
See the Pen funny checkbox by Mojtaba Seyedi (@seyedi) on CodePen.
راه حل های موجود
خوشبختانه راه حل این موضوع وجود دارد و بسیار هم ساده است. مرورگرهای اینترنت اکسپلورر از نسخه 5 تا 9 طوری طراحی شده اند تا بتوان برای آنها محتوایی قرار داد که فقط آنها نمایش دهند و نه مرورگرهای دیگر.
قطعا با نحوه کامنت گذاری در HTML آشنا هستید, کافی است به صورت زیر عمل کنید:
<!-- توضیح و یا همان کامنت -->
هر مرورگری که خط بالا را ببیند از محتوای آن چشم پوشی می کند و آن را نمایش نمی دهد. مرورگرهای IE طوری برنامه نویسی شده اند که اگر به روش زیر کامنت گذاری کنیم متوجه می شوند که این یک کامنت نیست بلکه یک محتوای مخصوص برای آنها است.
<!--[if IE]>
محتوایی مخصوص مرورگرهای ماکروسافت
<![endif]-->
در نتیجه پس اگر می توان محتوایی مخصوص مرورگرهای ماکروسافت داشت پس می توان استایل های مخصوص برای این مرورگرها تنظیم کرد.
چندین روش وجود دارد مثلا می توانیم برای استایل های داخلی کامنت های مخصوص به IE بنویسیم:
<!--[if IE]>
<style type="text/css">
div {
background-color: khaki;
}
div:after {
content: ("IE Joon I'm sorry but hate you.")
}
</style>
<![endif]-->
که البته این روش کاملا مدرسه ای است و در یک پروژه استفاده از آن توصیه نمی شود.
راه حل بعدی که بهتر و کاربردی تر است, این است که یک فایل CSS جدا مخصوص IE تعریف کنیم:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
از آنجایی که معمولا استایل های مخصوص به IE چند خط بیشتر نمی شوند خیلی کار درستی نیست که یک درخواست جدا برای سرور فقط برای فایل استایل IE فرستاده شود ( به اندازه کافی مرورگرهای ماکروسافت کند هستند بیاین لطفا بیشتر بهشون زحمت ندیم ).
قبل از اینکه راه حل بهتر را بررسی کنیم جالب است بدانید که می توان دقیقا یک نسخه خاص از IE را هدف قرار داد و یا می توانید تعیین کنید نسخه های قبل از 8 و یا نسخه های بعد از 6 و…
فقط توجه داشته باشید که این نوع کامنت های شرطی فقط از نسخه 5 تا 9 پشتیبانی می شوند.
با نگاه به مثال های زیر و توضیحات مربوطه با نحوه این کار آشنا می شوید:
<!--[if IE 7]>
مخصوص به نسخه 7
<![endif]-->
<!--[if gt IE 6]>
مخصوص به نسخه های بالاتر از 6
<![endif]-->
<!--[if gte IE 8]>
مخصوص به نسخه های بالاتر و خود 8
<![endif]-->
<!--[if lt IE 9]>
مخصوص به نسخه های پایین تز از 9
<![endif]-->
<!--[if lte IE 7]>
مخصوص به نسخه های پایین تر از 7 و خود 7
<![endif]-->
<!--[if !IE]> -->
همه مرورگرهای به غیر از نسخه های 5 6 7 8 9 ماکروسافت اکسپلورر
<!-- <![endif]-->
بهترین راه حل
حال که با نحوه نوشتن تگ های شرطی IE کاملا آشنا هستید کافی است نگاهی به تکه کد زیر داشته باشید تا با نحوه استفاده از آنها به بهترین صورت برای داشتن استایل مخصوص به مرورگرهای IE نیز آشنا شوید:
<!DOCTYPE html>
<!--[if IE 7]> <html class="lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]> <html class="lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
<head>
<title></title>
</head>
<body>
</body>
</html>
در این روش با استفاده از تگ های شرطی برای تگ html کلاس هایی تعیین شده است که می توانید از آنها در فایل css پروژه استفاده کنید تا استایل های مخصوص به IE های هدفتان را بنویسید. مثلا اگر استایلی نیاز است فقط برای نسخه 8 و پایین تز از 8 باشد کافی است بنویسید:
.lt-ie9 .your-class {
}
و یا اگر می خواهید هدف نسخه 9 و پایین تر از آن باشد:
.lt-ie10 .your-class {
}
این نحوه نام گذاری کلاس ها تقریبا روش استاندارد سازی شده ای است و در پروژه های بزرگ کاملا کاربردی می باشد. اما اگر به هر دلیلی نیاز به تغییر نحوه نام گذاری و حتی روش داشته باشید به راحتی می توانید انجام دهید. مثلا شاید بخواهید یک کلاس فقط مخصوص به نسخه 8 داشته باشید, که به راحتی می توانید آن را به تکه کد بالا اضافه کنید.
چکباکس فانتزی با طعم IE
بدون بیان هیچ مقدمه ای این شما و این هم چکباکس فانتزی ما در مرورگرهای نسخه 9 به پایین:
در مورد مثال بالا کافی بود تا در IE های مورد نظر تگ label که تمام ظاهر کار را بر عهده داشت مخفی شود و عنصر چک باکس در دید کاربر قرار گیرد:
.lt-ie10 #switch {
position: static;
}
.lt-ie10 label {
display: none !important;
}
نکته اخلاقی
باتوجه به این مطلب می توانیم صفحات وب را جذاب تر بسازیم و به وسیله چنین روش هایی مرورگرهای قدیمی تر را نیز پشتیبانی کنیم.
تشکر
مطلب خوبی بود، استفاده کردم. به امید روزی که IE منسوخ بشه :)
سلام آقای سیدی
مثل همیشه مطلب بسیار خوب و کاربردی نوشته بودید. با تشکر
سلام. خوشحالم که مفید بوده. ممنون از شما دوستان با انرژی های مثبتتون :)
آقا سلام من یکی از فالورای پرو پا قرص سایتتون هستم.واقعا از نظرم بهترین مرجع فارسی برای آموزش css رو ارائه دادین.خیلی ازتون ممنونم ایشالا که همیشه موفق باشید.
سلام ، استاد از کدوم ie در نظر بگیریم که کلا از نظر مشتری هم به مشکل نخوریم؟
,واقعا خسته نباشی استاد بزرگوار
سلام، این موضوع بستگی به کاربران سایت یا اپلیکیشن شما داره ولی در “حالت عمومی” الان دیگه تقریبا ie11 هم از پشتیبانی ها خارج شده و کلا به ie توجهی نمیشه.