طراحان وب سایت در تلاشند تا بتوانند وب سایتهایی طراحی کنند تا در تمامی مرورگرها و رزولوشن های مختلف صفحات نمایش به درستی دیده شود ، این موضوع یکی از اصول طراحی صفحات وب است و هر طراح وب سایت به صورت ایده آل باید این موضوع را مد نظر خود قرار دهد .
چگونه برای مرورگرهای اینترنت اکسپلورر سی اس اس اختصاصی بنویسیم ؟
یکی از چالشهای هر طراح وب سایت باگ هایی است که به واسطه استفاده از مرورگر اینترنت اکسپلورر به وجود می آید . از آنجایی که معمولا مشتریان و بازدید کنندگان وب سایت هنوز از IE استفاده می کنند ( و خوشبختانه با حضور مرورگرهای قدرتمندی چون کروم و فایرفاکس این روند رو به کاهش است ) باید به رفع باگ ها و ایرادات نمایش صفحات در این مرورگر بپردازیم . قبلا در مرود استفاده از سی اس اس ریست – CSS Reset برای یکسان سازی و یکپارچه سازی کدهای سی اس اس در مرورگرهای متفاوت نیز مطالبی ارائه شده است که خواندن آن توصیه میشود . یکی از بهترین شیوه ها برای خلاص شدن از دست این نا هماهنگی ها استفاده از کامنت های شرطی conditional comments است . البته راه های زیادی هم علاوه بر دستورات شرطی وجود دارد .
کامنت های شرطی IE conditional comments
کامنت گذاری به صورت HTML برای طراحان وب سایت شناخته شده است . کامنت ها به طراحان کمک میکند تا کدهای تمیز تری داشته باشند و کدها از خوانایی بیشتری برخوردار شوند .
به صورت معمول برای گذاشت کامنت در سورس کدهای HTML از کد زیر استفاده میشود
<!-- -->
توجه داشته باشید در اینجا از کامنت گذاری در کدهای اچ تی ام ال صحبت میشود و این کامنت ها در کدهای سی اس اس و … به صورت های دیگری مورد استفاده قرار میگیرند .
مرورگر اینترنت اکسپلورر دارای خصوصیت دستورهای شرطی است که در مرورگرهای دیگر پشتیبانی نمیشود و این مورد به طراحان وب سایت کمک خواهد کرد تا دستورات و کدهای HTML اختصاصی برای مرورگرهای IE را در کدهای اچ تی ام ال قرار دهند .
در این نوع از کامنت گذاری در صورت صحیح بودن شرط کدهای داخل کامنت که به صورت HTML نوشته شده اند خوانده و اجرا میشوند . این محتوا میتواند لینک یک Style خارجی و یا یک تگ باشد و یا دستورات سی اس اس داخلی و …
این کامنت ها در مرورگرهای دیگر به عنوان کامنت محسوب میشوند و دستورات شرطی نادیده گرفته خواهند شد .کامنت های شرطی برای مرور گر IE از متداول ترین راه های رفع باگ های نسخه های (IE6,IE7,IE8) می باشد. کامنت های شرطی به ما کمک خواهند کرد که نسخه مرورگر IE کاربر را مورد هدف قرار دهیم و برای رفع نا هماهنگی ها در آن نسخه ، دستورات سی اس اس به خصوصی بنویسیم . در زیر نمونه کد هایی ارائه شده است و میبینید که هدف آنها نسخه های مختلف IE می باشد :
<!--[if IE]> According to the conditional comment this is IE<br /> <![endif]--> <!--[if IE 6]> According to the conditional comment this is IE 6<br /> <![endif]--> <!--[if IE 7]> According to the conditional comment this is IE 7<br /> <![endif]--> <!--[if IE 8]> According to the conditional comment this is IE 8<br /> <![endif]--> <!--[if IE 9]> According to the conditional comment this is IE 9<br /> <![endif]--> <!--[if gte IE 8]> According to the conditional comment this is IE 8 or higher<br /> <![endif]--> <!--[if lt IE 9]> According to the conditional comment this is IE lower than 9<br /> <![endif]--> <!--[if lte IE 7]> According to the conditional comment this is IE lower or equal to 7<br /> <![endif]--> <!--[if gt IE 6]> According to the conditional comment this is IE greater than 6<br /> <![endif]--> <!--[if !IE]> --> According to the conditional comment this is not IE<br /> <!-- <![endif]-->
در دستورات شرطی میتوانید از gt و lte برای هدف قرار دادن یک بازه از نسخه های مرورگر اینترنت اکسپلورر استفاده نمائید
- gt: نسخه بالاتر از
- gte: نسخه بالاتر از یا برابر
- lt: نسخه پایین تر
- lte: نسخه پایین تر یا برابر
برای هدف قراردادن مرورگرهای به غیر از اینترنت اکسپلورر میتوانید از دستور شرطی زیر استفاده نمائید
<!--[if !IE]> -->
قوانین مخصوص CSS برای اکسپلورر
موارد دیگری در قوانین CSS بیان شده است که فقط در اینترنت اکسپلور اجرا می شود. برای مثال افزودن علامت ستاره (*) قبل از خصوصیت ((property ، CSS برای IE7 یا افزودن علامت آندر اسکور (_) قبل از خصوصیات ((property، CSS برای IE6 . این روش ها معمولا پیشنهاد نمی شود زیرا به اندازه کافی معتبر نیستند.
- IE8 یا نسخه پائین تر : برای نوشتن قوانین CSS مخصوصا برای IE8 یا پائین تر یک بک اسلش backslash (/9)در آخر قبل از (;) اضافه کنید
- IE7 یا پائین تر : افزودن ستاره (*) قبل از خصوصیات ((property CSS
- IE6 : افزودن آندر اسکور (_) قبل از خصوصیات ((property
.box { background: gray; /* standard */ background: pink\9; /* IE 8 and below */ *background: green; /* IE 7 and below */ _background: blue; /* IE 6 */ }
استفاده از کلاس های شرطی در تگ HTML برای اینترنت اکسپلورر
سومین راه حل افزودن کلاس های CSS برای نسخه های IE به تگ های HTML بوسیله کامنت های شرطی IE می باشد . این روش اساسا بررسی می کند در صورتی که مرور گر ما IE بود، به تگ HTML یک کلاس اضافه میکند و از کلاس IE به عنوان گزینشگر parent میتوان برای هدف قرار دادن کلاسها در مرورگرهای اینترنت اکسپلورر با نسخه های مختلف استفاده کرد . ( برای مثال ie6.box ).
<!--[if lt IE 7 ]> html class="ie6" <![endif]--> <!--[if IE 7 ]> html class="ie7" <![endif]--> <!--[if IE 8 ]> html class="ie8" <![endif]--> <!--[if IE 9 ]> html class="ie9" <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> html <!--<![endif]-->
دستورات شرطی راه مطمئنی برای صحیح انجام شدن دستورات سی اس اس شما در مرورگ اینترنت اکسپلورر کاربر شماست اما به طور کلی استفاده از روشهای استاندارد کد نویسی میتواند نیاز شما به استفاده از هک برای مرورگرهای اینترنت اکسپلورر را بر طرف کند .( البته این فقط یک شوخی بود :-) نظر شما در مورد مرورگر اینترنت اکسپلورر چیست ؟
علی اقدم
14 May 2012
آفرین، به نکات جالب و مفیدی اشاره کردی که مطمعنا میتونه مفید باشه
محسن
15 May 2012
مطلب به درد بخوری بود.. مرسی.
فقط یه ابهامی وجود داره:
gt درسته یا gte؟
lt درسته یا lte؟
توی مثالها به دو صورت نوشته شده.
———-
خدایا!
اگر IE هدایت پذیره، هدایتش کن؛ در غیر این صورت، نابودش گردان!
امیر سروری
15 May 2012
محسن @ هدایت پذیر که بعیده باشه باید رامش کرد :-) اون تفاوت به خاطر اضافه کردن و تاثیر گذاری روی نسخه های برابر بود که در نوشته اضافه شد .مرسی از نکته ای که گفتی ;-)
لقمان
9 October 2012
من فکر کنم gte برای بزرگتر یا مساوی بودنه و gt برای بزرگتر بودن . greater than or equal !
برای lt و lte هم همینطور .
رضا تسلیمی
16 May 2012
عالی بود ممنون.
محسن
17 May 2012
اگر بخوایم که کاربران، نتونن با نسخه های قبل از IE8 ، سایت مارو ببینن، چکار باید کرد؟
یعنی اگر مثلا کاربری با IE7 خواست سایت رو ببینه، سایت براش باز نشه یا اینکه فقط یک پیغام بهش نمایش داده بشه که بدونه باید از مرورگر جدیدتری استفاده کنه.
امیر سروری
17 May 2012
محسن @ این کار در عمل کار مناسبی نیست و از نظر استانداردی مشکل داره ولی اگر بخوای این کار رو انجام بدی میتونی از همین دستورات شرطی استفاده کنی .
مثلا یک باکس درست کنی با position : absolute بزاری وسط صفحه و بگی آقا یا خانم شما نسخه بروزرت قدیمیه ممکنه خوب نبینی وب سایتت رو . این باکس میتونه display : none باشه و با سی اس اسی که برای آی هفت مثلا نوشتی display: block بشه .
مسلم
18 May 2012
سلام و عرض خسته نباشید می خواستم بدونم چه طوری باید دستورات شرطی رو در کد های اچ تی ام المون قرار بدیم و این که من از روی سورس سایت شما نگاه کردم و اون رو بین تگ هد قرار دادم و لینک استایلی که برای اینترنت اکسپلورر ورژن 9 درست کرده بودم رو هم بهش دادم این صورت
ولی وقتی با اینترنت اکسپلورر صفحه رو باز می کنم تغییراتی که روش اعمال کردم دیده نمیشه .
خواهش می کنم در صورت امکان جواب منو بدین.
امیر سروری
18 May 2012
مسلم @ مرسی مسلم جان . اگر میخوای سی اس اس خارجی وارد سورس کنی بهتره در تگ هد قرار بدی و لینک سی اس اس خارجی رو در داخل این دستور شرطی بزاری . به نظرم میرسه در نوشتن این دستوری شرطی مقداری اشتباه داشتی و باید توجه کنی که این دستور دو قسمتی هست . یک قسمت شروع دستور بعد محتوایی که میخوای داخل شرط قرار بگیره و بعد قسمت پایانی دستور شرطی .
در مورد IE9 , و ورژن های پایین تر از اون میتونید از دستور
<!–[if lte IE 9]>–>
محتوا
<![endif]–>
استفاده کنید . موفق باشید .
سعید
28 May 2012
امیر جان خیلی ممنون وقعا مفید بود فقط ای کاش یه کمی بیشتر مطلب بزارید یا حداقل از دوستانی که در این کار می تونن کمکتون کنن استفاده کنید!
امیر سروری
28 May 2012
سعید @ ممنونم سعید جان ما همیشه آمادگیمون رو برای انتشار مطالب آموزشی میهمان اعلام کردیم . مهم اینه که اداره یک وب لاگ آموزشی و البته نوشتن مطالب آموزش وقت زیادی میبره و با مشغله کاری تداخل پیدا میکنه. امیدوارم دوستانی که توانایی نوشتن مطالب آموزش رو دارند بتونن این موضوع رو پوشش بدن .
سعید
28 May 2012
من هم به نوبه خودم خیلی دوست دارم به گسترش این وب سایت کمک کنم اما به شخصه بیشتر دوست دارم در باره زبان برنامه نویسی C# مقاله بنویسم!
امیر سروری
29 May 2012
سعید @ ممنون از نظرت سعید جان بیشتر سعی داریم در حیطه طراحی وب سایت حرکت کنیم و بتونیم توی این زمینه تاثیر گذار باشیم در هر صورت هر موقع مطلبی داشتید که فکر کردید قابلیت انتشار در این وبلاگ رو داره با کمال میل در خدمت هستیم . موفق باشید .
مسعود
31 May 2012
مطلب خوب ، جامع و کاملی بود.
تشکر
نیلوفر
4 June 2012
سلام . من از دستور شرطی
According to the conditional comment this is IE 7
استفاده کردم ولی وقتیکه مرورگرو باز می کنم به جای home page با پیغام Smarty error: [in home.htm line 11]: syntax error: unidentified token ‘]>’ (Smarty_Compiler.class.php, line 1410) روبرو میشم . واقعا دیگه نمیدونم مشکل چیه! ممنون میشم راهنماییم کنید.
امیر سروری
4 June 2012
نیلوفر @ سلام . این مشکل به نظر نمیرسه به دلیل استفاده کردن از دستورات شرطی به وجود اومده باشه ؟! یا شاید این تگها با سیستم برنامه نویسی وب سایت شما تداخل داره !
میترا
7 June 2012
این خیلی سخت بود من گیج شدم :(
سرگرمی
10 June 2012
این مرورگرهای خانواده IE کابوس شب طراحان وب هستن
بهمن
20 June 2012
این مرورگر مایکروسافت بدجوری هم اعصاب هم ارامش تو طراحی رو از من میگیره . مخصوصا نسخه 7 .
مخصوصا تو ایران که اکثر کاربران اینترنت انگار مال دوره ماقبل تاریخ هستند و زورشون میاد 15 دقیقه وقت صرف کنند و مرورگر خودشون رو آپدیت کنن به نسخه های بالاتر .
جدا از این مسئله به نظر من این مسئله یک راه حل اساسی داشت که میشد به راحتی حل بشه و اونم این بود که تمامی طراحان ، وب سایت هایی که طراحی میکردن از اول با مروگرهای قدیمی و از رده خارج شده مثل ie6 , 7 ناسازگار طراحی میکردن. این شکلی کاربران مجبور میشدن مرورگرشون رو ارتقا بدن . البته این یه حرفه و هیچ وقت عملی نمیشه (^_^)
به هر حال یک پروژه ای که میتونه 10 روزه تموم بشه به خاطر این اینترنت اکسپلورر های قدیمی و کاربرانش واسه من 15 رو طول میکشه و این به صورت خیلی جدی به همه طراح های دنیا ضرر میرسونه.
پیش بینی من اینه که این مشکل حدودا 5 سال دیگه زمان میبره حداقل تا کامل حل بشه .احتمالا تا 5 سال دیگه کسی از ویندوز ایکس پی استفاده نخواهد کرد که توش اینرتنت اکسلورر 7 باشه و اون موقع دیگه اهمیتی نداره که سایتی که طراحی میکنیم با اینترنت اکسپلورر 6 -7 -8 سازگار باشه یا نه . خدا کنه همینطور بشه
نیاز مندیها
22 June 2012
سایتتون پر محتواست ممنون از شما
علیرضا
8 August 2012
سلام خسته نباشی من میخوام طراحی سایت کار کنم اما هیچی بلد نیستم فقط زیاد علاقه دارم باید از کجا شروع کنم .مرسی اگه جواب بدین
امیر سروری
16 August 2012
سلام علیرضای عزیز . دارم یک مطلب در این مورد آماده میکنم که امیدوارم بتونه به شما کمک کنه . موفق باشید .
مهدی
23 October 2012
دوستان من این مطلب را کمی پیچیده دیدم یه راه حل عالی از همین نوع پیدا کردم و اونم اینه که شما دو فایل مجزای سی اس اس بنویسید و بعد با شرط اونا رو توی سایت لود کنید
خوب این هم نمونه چیزی که می گم :
و بعد از آن این کد را قرار دهید:
محمد مهذب
17 December 2012
با تشکر از شما
askariweb
28 December 2012
بعضی کدهای IE8 واسه IE9 هم کارایی داره ،مثه اورفلو ها (البته واسه سی اس اس رو می گم)
بهر حال یه هک هم واسه 9 اومده تو css که باید / بهش اضافه کنیم:
height:5px /;
askariweb
28 December 2012
جالبه این کد رو نمی شه تو کامنتاتون گذاشت. این لینک کامل توضیح داده:
http://webdesignandsuch.com/ie9-specific-css-hack/
rojyar
2 March 2013
کاش دوستان برای کروم هم مینوشتن،من از فایرفاکس استفاده میکنم وافعاً عالیه اما برای هماهنگشازی با کروم بعضی وقتا به مشکل برمیخورم…
سینا
30 May 2013
کروم و فابرفاکس تقریبا دو تا مرورگری هستن که علاه بر اینکه هیچ مشکلی در ظاهر سایت ایجاد نمیکنن، با هم دیگه سازگار هم هستن!
رها امیر چرمهینی
25 May 2013
با سلام و عرض ادب حضور شما استاد عزیز
و تشکر از بابت گردآوری چنین مطلب فوق العاده ای
من یه مشکل دارم اگه برای شما مقدوره و راه حلی براش دارید ممنون میشم راهنمایی کنین
روی ویندوز 8 و با نرم افزار های Dreamviewer و Visual Studio دارم یه قالب طراحی میکنم و روی مرورگرهای
Chrome , firefox , IE 10 , IE 9 , Safari
اون رو مرحله به مرحله تست میکنم و قالب رو با html5 و css3 استاندارد کرده ام اما بطور پیشفرض و با
html5 به هیچ وجه نمیتونه در IE 10 باز بشه و لینک به css رو نمشناسه ولی با اضافه کردن یک تگ قبل از Doctype که فرقی هم نمیکنه چه تگی باشه براحتی لینک به css میشناسه مثلا کافیه که قبل از Doctype
بنویسم
و با این کار براحتی و بشکل منظم در IE 10 باز میشه اما در مرورگرهای دیگه هیچ مشکلی نداره و داک تایپ html5 رو بخوبی جواب میده
اگه ممکنه و راه حلی دارید کمک کنید که این مشکل از کجاست البته خودم حدس میزنم بخاطر بعضی نرم افزارهام باشه چون روی ویندوز 8 که تازه نصب کردم و تا نرم افزارهام رو اون نبودن باز میشد و مشکلی نداشت اما همین که نرم افزارهام رو نصب میکنم این مشکل دوباره پیدا میشه
با تشکر از شما و ارزوی توفیق
zohreh
2 June 2013
به جای این کار ها میشه از css hack استفاده کرد که اصلا نیازی به هیج css جدا و jquery نداره
امید
19 June 2013
خوب خانم زهره می تونستین یه لینک یا منبعی هم در این رابطه به بچه ها معرفی کنین!
اگر پیشنهادی میدید کامل بدید تا همه بتونن استفاده کنن!
ممنون
parisa
9 November 2013
سلام امید جان ، فک میکنم با مطالعه این مقاله کوچولو دوستان متوجه css Hack ،نحوه استفاده و اجراش بشن ..
http://weblog.alvanweb.com/2005/07/17/php-css-hacks/
رضا
18 September 2013
سلام خسته نباشید
چرا در ببعضی از کدهای htmlاز دو کلاس همزمان استفاده شده مثلا
طراحی وب سایت
2 November 2013
بسیار عالی
اف. پـی. اس فـروم
9 June 2014
با سلام
سایت ما مشکلی دارد و آن هم این است که در مرورگر اکسپلورر (همه ی ورژن ها) هیچ کدام از استایل های فایل style.css رو بارگزاری نمیکنه و موقع لود صفحه، یه صفحه ی سفید میاد که شکل خاصی نداره و متن ها به هم ریخته توش قرار دارند!
خواهشمندم بررسی فرمایید و اگر علت رو متوجه شدید، یا از طریق ایمیل یا از طریق فرم تماس، یا از همینجا به ما اطلاع دهید.
آدرس فرم تماس: http://www.fpsforum.ir/contact
با تشکر
swallow
18 October 2014
سلام
من به درستی درک نکردم این کاندیشن ها چه می کنند و چطور استفاده میشوند. دستورات بین شرط ها چه می توانند باشند؟
web-Designer
26 January 2015
سلام دوست عزیز .. من به یه مشکلی برخوردم ! یه سری از دستورات css مثل linear-gradient توی IE کار نمیکنه به خاطر همین قبل این دستور عبارت -ms- رو قرار میدم اما باز هم کار نمیکنه مشکل چیه ؟؟؟ مگه -ms- برای IE نیست ؟؟
melody
16 May 2015
سلام
ممنون از مطالب عالی تون،
من از وردپرس فارسی استفاده میکنم و قالبم تا ie8 منو های اولیه و ثانویه رو درست نشان میده ولی در ie 9,10,11 منوها یک ثانیه نشان داده میشوند و بعد ناپید میشوند در حالی که این قالب با وردپرس انگلیسی روی ie هیچ مشکلی ندارد!!!
به نظر شما مشکل چیه؟
باتشکر
سجاد
25 June 2015
با سلام . من یک وب سایت برای یک شرکت راه اندازی کردم در مرور گر های فایر فاکس .و گوگل کروم خوب کار می کنند ولی وقتی در مرمو گر اکسپلورر باز میکنم رنک و هاوری که به منو و رنگ پس زمینه تغیر می کند به نظر شما در آی دی منو چه کدی را اضافه کنم تا این جور نشه ممنون میشم راهنمایی کنید
arman
22 September 2015
سلام
من یه سایت دارم طراحی می کنم که توش از بوت استرپ استفاده کردم و این سایت رسپانسیوه و تو همه ی مرورگرا درست کار می کنه حتی تو IE11 اما امان از IE 8 اصلا نمی فهمه من چی میگم :(( کاملا به هم ریخته و واقعا برام نمی صرفه که وقت بزارم و یه CSS دیگه برای IE طراحی کنم اصلا منطقی نیست باید بشینم تمام کلاس های بوت استرپ و تو CSS جدید با % جایگزین کنم .
حالا سوالم اینه خود بوت استرپ برای حل این مشکل چه کرده؟ خود این سایت که تو IE به هم نمیریزه پس چرا مال من به هم ریخت؟
پدرام
5 October 2016
دوست عزیز مرورگر کروم 99 درجه با فایرفاکس متفاوت عمل می کنه و موتورهای فراخوانی این دو جستجوگر زمین تا آسمون با هم متفاوت هست. شما میگید که کاملا با یکدیگر سازگار هستن !
این حرف کاملا نادرست هست.
دوستان اگر قسمتی از استایل قالب مورد نظر شما در مرورگر کروم به شکل نادرستی نشون میده می بایست برای رفع این مشکل به ترتیب استایل مورد نظر را از IE 9 شروع کنید به پائین یعنی تا IE 6 استایل را تنظیم کنید. در صورتی که این مرورگر با قالب مورد نظر شما مشکلی نداشتند بدین معنی ست که مرورگر کروم نیز به خوبی هرچه تمام تر می تونه با قالب شما همخوانی داشته باشه.
با تشکر
پایلاش
19 August 2018
مقاله ی خیلی خوبی بود