آموزش شیوه صحیح کدنویسی برای مرورگرهای IE ( هک Css برای IE )
بعد از قراردادن پستی در خصوص نرم افزار شبیه ساز ورژن های مختلف مرورگرهای اینترنت اکسپلورر , این پست رو جهت آموزش استاندارد نویسی برای این مرورگرها اختصاصی میدهم .
بارها عرض کردم که به شخصه خودم اعتقاد به استاندارد نویسی برای مرورگرهای قدیمی ندارم , چون کاربری هم که به دنیای اینترنت وارد میشود , باید حداقل قانون استاندارد که همان استفاده از مرورگرهای به روز میباشد را رعایت نماید.
به هر حال این پست را جهت استاندارد نویسی کد های Css برای مرورگرهای قدیمی IE ( به عبارت دیگر , هک Css برای IE ) به شما عزیزان تقدیم خواهم کرد .
همان طور که میدانیم , مرورگرهای قدیمی اینترنت اکسپلورر از بسیاری از مشخصه های Css و حتا Html پشتیبانی نمیکند و در نتیجه کدنویسان عزیز را برای ارائه یک دیزاین حرفه ای و جدید دچار مشکل می سازد .
اما با کمی تغییر در کدهای Css و همچنین کدنویسی مجزا برای این ورژنها میتوان به نتیجه مطلوبی دست پیدا کرد.
و اما آموزش :
اولین روش , استفاده از گزینه های شرطی در قسمت Head فایل اچ تی ام ال می باشد .
همان طور که میدانید ما برای شناسایی فایل Css , با استفاده از تگ link , آن را به فایل Html و در بین دو تگ <head> و <head/> قرار میدهیم .
به عنوان نمونه :
<link rel="stylesheet" type="text/css" href="style.css" />
حال کافیست بعد از این خط که برای Css اصلی و کلی سایت می باشد , از گزینه های شرطی برای IE استفاده کنیم و طبیعتا باید برای این ورژنها Css مجزای دیگری نوشت تا به محص استفاده کاربر از IE قدیمی , Css مخصوص به همان IE اجرا شود .
اگر میخواهید تمامی ورژنهای IE را در بر بگیرد , از کد زیر استفاده نمایید .
<!--[if IE]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->
اگر میخواهید فقط IE9 را در بر بگیرد , از کد زیر استفاده نمایید .
<!--[if IE 9]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل"> <![endif]-->
اگر میخواهید فقط IE8 را در بر بگیرد , از کد زیر استفاده نمایید .
<!--[if IE 8]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->
اگر میخواهید فقط IE7 را در بر بگیرد , از کد زیر استفاده نمایید .
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->
اگر میخواهید فقط IE6 را در بر بگیرد , از کد زیر استفاده نمایید .
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->
اگر میخواهید IE های 6 به پایین , 7 به پایین , 8 به پایین را در بر بگیرد از کدهای زیر استفاده نمایید .
توجه : 3 کد زیر به ترتیب بالا میباشد .
<!--[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 کد زیر به ترتیب بالا میباشد .
<!--[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
به عنوان نمونه :
background: #fff; استاندارد background: #fff\9; IE8 برای *background: #fff; IE7 برای _background: #fff; IE6 برای
گرداوری و آموزش : وحید مجیدی
پخش اختصاصی
مرسی
عالی بود اقا وحید
هرکاری میکردم هر اموزشی رو که دنبالش بودم اصلا خلاصه و خیلی گیج کننده توضیح داده بودند
مرسی
یه سوال در مورد سایت جتمع گلستان پیام نور چی که فقط میشه با اینترنت اکسپلورر بازش کرد و دیگه با هیچ مرورگر دیگه ای باز نمیشه ؟ آیا میشه کدها سمت خودمون رو تغییر داد تا بشه با مرورگرهای دیگه هم باز بشه
با استفاده از htaccess. این کار رو میکنن . تو نت سرچ کنی متوجه میشی داداشی
آقا وحید
اگه من بخوام همین شرط ها رو برای مروگر گوگل کروم استفاده کنم
باید چ تغییراتی بدم ؟
این کار فقط برای css3 میباشد که قدیما روی مرورگرها وجود نداشت . به زودی در سایت به عنوان پست قرار میدهم . انشاالله تا کمتر از 24 ساعت دیگه
تشکر
خدا از این مرورگر بددددددددددددددددددددددددددمممممممممممممممممممم میااااااااااااااااااااااااااااااااااد
همش دخترا ازش استفاده میکنن والا اونی که یکم اهل نت باشه از این مرورگر استفاده نمیکنه
مگر اینکه دختر باشه :)
منظــــــــــــــــــــــور!؟؟
ای آزاد اندیشان بدانید وآگاه باشید
عقل آدم مهمه دختر و پسر بودنش مهم نیست
آقا دستت در نکنه
وحید جان خدایی مردی