بعد از قراردادن پستی در خصوص نرم افزار شبیه ساز ورژن های مختلف مرورگرهای اینترنت اکسپلورر , این پست رو جهت آموزش استاندارد نویسی برای این مرورگرها اختصاصی میدهم .
بارها عرض کردم که به شخصه خودم اعتقاد به استاندارد نویسی برای مرورگرهای قدیمی ندارم , چون کاربری هم که به دنیای اینترنت وارد میشود , باید حداقل قانون استاندارد که همان استفاده از مرورگرهای به روز میباشد را رعایت نماید.
به هر حال این پست را جهت استاندارد نویسی کد های Css برای مرورگرهای قدیمی IE ( به عبارت دیگر , هک Css برای IE ) به شما عزیزان تقدیم خواهم کرد .
همان طور که میدانیم , مرورگرهای قدیمی اینترنت اکسپلورر از بسیاری از مشخصه های Css و حتا Html پشتیبانی نمیکند و در نتیجه کدنویسان عزیز را برای ارائه یک دیزاین حرفه ای و جدید دچار مشکل می سازد .
اما با کمی تغییر در کدهای Css و همچنین کدنویسی مجزا برای این ورژنها میتوان به نتیجه مطلوبی دست پیدا کرد.
و اما آموزش :
اولین روش , استفاده از گزینه های شرطی در قسمت Head فایل اچ تی ام ال می باشد .
همان طور که میدانید ما برای شناسایی فایل Css , با استفاده از تگ link , آن را به فایل Html و در بین دو تگ <head> و <head/> قرار میدهیم .
به عنوان نمونه :
|
2
3
4
5
6
|
<link rel=”stylesheet” type=”text/css” href=”style.css” />
|
حال کافیست بعد از این خط که برای Css اصلی و کلی سایت می باشد , از گزینه های شرطی برای IE استفاده کنیم و طبیعتا باید برای این ورژنها Css مجزای دیگری نوشت تا به محص استفاده کاربر از IE قدیمی , Css مخصوص به همان IE اجرا شود .
اگر میخواهید تمامی ورژنهای IE را در بر بگیرد , از کد زیر استفاده نمایید .
|
2
3
4
5
6
|
<!–[if IE]> <link rel=”stylesheet” type=”text/css” href=”مخصوص آن Css آدرس فایل” /> <![endif]–>
|
اگر میخواهید فقط IE9 را در بر بگیرد , از کد زیر استفاده نمایید .
|
2
3
4
5
6
|
<!–[if IE 9]> <link rel=”stylesheet” type=”text/css” href=”مخصوص آن Css آدرس فایل”> <![endif]–>
|
اگر میخواهید فقط IE8 را در بر بگیرد , از کد زیر استفاده نمایید .
|
2
3
4
5
6
|
<!–[if IE 8]> <link rel=”stylesheet” type=”text/css” href=”مخصوص آن Css آدرس فایل” /> <![endif]–>
|
اگر میخواهید فقط IE7 را در بر بگیرد , از کد زیر استفاده نمایید .
|
2
3
4
5
6
|
<!–[if IE 7]> <link rel=”stylesheet” type=”text/css” href=”مخصوص آن Css آدرس فایل” /> <![endif]–>
|
اگر میخواهید فقط IE6 را در بر بگیرد , از کد زیر استفاده نمایید .
|
2
3
4
5
6
|
<!–[if IE 6]> <link rel=”stylesheet” type=”text/css” href=”مخصوص آن Css آدرس فایل” /> <![endif]–>
|
اگر میخواهید IE های 6 به پایین , 7 به پایین , 8 به پایین را در بر بگیرد از کدهای زیر استفاده نمایید .
توجه : 3 کد زیر به ترتیب بالا میباشد .
|
2
3
4
5
6
7
8
|
<!–[if lt IE 7]> <link rel=”stylesheet” type=”text/css” href=”مخصوص آن Css آدرس فایل” /> <![endif]–>
<!–[if lt IE 8]> <link rel=”stylesheet” type=”text/css” href=”مخصوص آن Css آدرس فایل” /> <![endif]–>
<!–[if lt IE 9]> <link rel=”stylesheet” type=”text/css” href=”مخصوص آن Css آدرس فایل” /> <![endif]–>
|
اگر میخواهید IE های 6 به بالا , 7 به بالا , 8 به بالا را در بر بگیرد از کدهای زیر استفاده نمایید .
توجه : 3 کد زیر به ترتیب بالا میباشد .
|
2
3
4
5
6
7
8
|
<!–[if gt IE 5.5]> <link rel=”stylesheet” type=”text/css” href=”مخصوص آن Css آدرس فایل” /> <![endif]–>
<!–[if gt IE 6]> <link rel=”stylesheet” type=”text/css” href=”مخصوص آن Css آدرس فایل” /> <![endif]–>
<!–[if gt IE 7]> <link rel=”stylesheet” type=”text/css” href=”مخصوص آن Css آدرس فایل” /> <![endif]–>
|
نکته بسیار مهم : لازم به استفاده از تمامی کد های بالا در وب سایت خود ندارید و فقط بر حسب نیاز خود میتوانید از یک یا دو یا سه تا از کد های بالا استفاده نمایید .
مثلا میتوانید فقط از کد مربوط به تمامی مرورگر ها یا مثلا فقط میتوانید از 3 کد مخصوص ورژنهای 8 , 7 و 6 به پایین استفاده نمایید .
نکته : با توجه به نیاز خود میتوانید از 4 گزینه زیر در کدهای بالا استفاده نمایید و کدهای جدید به دلخواه خود بسازید :
- gt : نسخه بالاتر از
- gte : نسخه بالاتر از یا برابر
- lt : نسخه پایین تر
- lte : نسخه پایین تر یا برابر
اما آموزش دوم :
استفاده از هک در کدهای Css میباشد که میتوانید از آن استفاده نمایید .
- IE8 : یک (9\ ) در آخر و قبل از ( ; ) اضافه کنید
- IE7 : افزودن ستاره ( * ) قبل از خصوصیت کد Css
- IE6 : افزودن آندر اسکور ( _ ) قبل از خصوصیت کد Css
به عنوان نمونه :
|
2
3
4
5
6
7
8
9
|
background: #fff; استاندارد
background: #fff\9; IE8 برای
*background: #fff; IE7 برای
_background: #fff; IE6 برای
|