تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


شاید به عنوان یک کاربر در دنیای وب، هر روز به سایت ها و وبلاگ های مختلفی سر بزنیم و بیش از هر چیز، رسیدن به محتوای مورد نظر برایمان مهم باشد، فارغ از اینکه ظاهر یک سایت چگونه است و چه معایب و محاسنی دارد، مطلبمان را می خوانیم و در آخر هم آن صفحه را ترک می کنیم، در حالی که برای مدیران حرفه ای وبسایت ها و وبلاگ ها، اینکه همه کاربرانشان بتوانند از محتوای آنها به یک شکل استفاده کنند، اهمیت زیادی دارد، جالب است اگر بدانید که مرورگرهای وب اگرچه از قوانین مشترکی پیروی می کنند، اما هر کدام در نحوه تفسیر این قوانین ساز خودشان را می نوازند، البته هرچه که پیش تر می رویم، سازگاری مرورگرها و یکسان سازی آنها نیز بیشتر می شود، اما دردسر همیشگی طراحان وب یعنی مرورگر اینترنت اکسپلورر (Internet Explorer) در این بین سرآمد مرورگرهای غیر استاندارد است، به همین دلیل شرکت مایکروسافت (خالق و مالک این مرورگر) که گویا از شاهکار خود اطلاع داشته، برای تنظیم استایل css مخصوص مرورگر خود (در نسخه های مختلف)، قابلیتهایی تحت عنوان پیام های شرطی یا (Conditional Comments) و هک هایی ویژه پیشنهاد داده است که بد نیست نگاهی به آنها بیندازیم.
چرا باید تنظیمات مخصوص مرورگر اینترنت اکسپلورر را انجام دهیم؟
شاید برای شما هم جای سوال باشد که چرا باید تنظیمات مخصوص اکسپلورر را در صفحه خود داشته باشیم، البته پاسخ سوال این است که این کار همیشه هم ضروری نیست، اگر صفحه شما به خوبی در نسخه های مختلف اینترنت اکسپلورر و سایر مرورگرها نشان داده می شود و تمام عناصر سر جای خودشان هستند، دیگر نیازی نیست از تنظیمات جداگانه استفاده کنید، چرا که هدف از تنظیم جداگانه استایل css سازگار کردن آن با نسخه های مختلف اکسپلورر از لحاظ نمایش ظاهری و یا مثلا درست عمل کردن امکانات مبتنی بر css است.
برای تنظیم یک ویژگی css خاص اکسپلورر، چه روش هایی وجود دارد؟
معمول ترین و متداول ترین روش استفاده از پیام های شرطی یا (Conditional Comments) است (که در ادامه به طور مفصل خواهیم گفت)، شیوه های دیگری تحت عنوان هک (با هک سایت فرق دارد!) یا CSS Hacks نیز وجود دارند که در واقع به معنی استفاده از علائم مخصوص در تعریف کدهای css و قابل پردازش توسط ورژن های خاصی از مرورگر اینترنت اکسپلورر است.
نحوه تنظیم استایل css مخصوص مرورگر اینترنت اکسپلورر
برای تنظیم استایل مخصوص مرورگر اینترنت اکسپلورر، ابتدا باید سایت، وبلاگ یا قالب طراحی شده را با برنامه هایی نظیر IETester که در آدرس www.my-debugbar.com وجود دارد، بررسی کنید، اگر موردی به نظرتان دچار ایراد است، سعی کنید کلاس یا آی دی css مربوط به آن را پیدا کنید و پس از اعمال تغییرات (قبل از اعمال تغییرات از استایل فعلی پشتیبان بگیرید) نتیجه را دوباره امتحان کنید، تا جایی که مشکل حل شود، حال تکه کد اختصاصی که مربوط به هر ورژن از اکسپلورر می شود (و با آن کد، مشکل در آن ورژن مخصوص حل می شود) را درون یک فایل دیگر کپی کنید (تنها کافی است کلاس یا آی دی مورد نظر را به همراه قسمتی که خاص مرورگر اکسپلور است، کپی نمائید) تا آن را با دستورات زیر در صفحه به طور جداگانه ایمپورت کنیم.
دستورات یا پیام های شرطی در مرورگر اینترنت اکسپلورر
دستورات شرطی در اکسپلورر با علائم خاصی تعریف می شوند:


<!--[if IE]>
آدرس فایل استایل مخصوص مرورگر اینترنت اکسپلورر
<![endif]-->

توضیح:
- حالت معمول ایجاد یک پیام در صفحات html استفاده از <-- !--> است، همانطور که می بینید این شرط ها نیز مبتنی بر همین قاعده هستند.
- این دستور به مرورگر اکسپلورر می گوید که باید از مقادیر موجود در آن استفاده کند (در واقع مقادیر موجود در این شرط، تنها برای اینترنت اکسپلورر قابل استفاده است و سایر مرورگرها با آن مثل یک پیام معمولی برخورد می کنند)، جالب است که بدانید درون این شرط می توان هر عبارت یا کدی قرار داد و فقط محدود به ایمپورت استایل css نیست، مثلا می توان به کاربر پیام داد که مرورگر او قدیمی است و باید از مرورگر دیگری استفاده کند و...
- این پیام های شرطی باید بعد از استایل اصلی و پیش فرض (که مخصوص تمام مرورگرها است) ترجیحا در قسمت هِدر و بین تگ های head قرار گیرند.
تنظیمات مخصوص ورژن های مختلف و معنی آنها
در زیر لیستی تقریبا کامل از تنظیمات استایل css مخصوص ورژن های مختلف مرورگر اینترنت اکسپلورر به همراه معنی عبارات آن آمده است.
ایمپورت استایل مخصوص اینترنت اکسپلورر (تمام ورژن ها)


<!--[if IE]>
<link href="style/ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

توضیح:
- if به معنی اگر و IE مخفف اینترنت اکسپلورر (Internet Explorer) است.
ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 6


<!--[if IE 6]>
<link href="style/ie6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 7


<!--[if IE 7]>
<link href="style/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 8 


<!--[if IE 8]>
<link href="style/ie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 9


<!--[if IE 9]>
<link href="style/ie9.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن بالا تر از 6


<!--[if gt IE 6]>
<link href="style/gtie6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن بالا تر از 7


<!--[if gt IE 7]>
<link href="style/gtie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن بالا تر از 8


<!--[if gt IE 8]>
<link href="style/gtie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->


توضیح:
- عبارت gt به معنی greater than یا بزرگتر از، است.
ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن پائین تر از 7


<!--[if lt IE 7]>
<link href="style/ltie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->


ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن پائین تر از 8


<!--[if lt IE 8]>
<link href="style/ltie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->


ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن پائین تر از 9


<!--[if lt IE 9]>
<link href="style/ltie9.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->


توضیح: عبارت lt به معنی less than یا کوچکتر از، است.
ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن بالا تر از 6 و خود آن


<!--[if gte IE 6]>
<link href="style/gteie6.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->


ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن بالا تر از 7 و خود آن


<!--[if gte IE 7]>
<link href="style/gteie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->


ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن بالا تر از 8 و خود آن


<!--[if gte IE 8]>
<link href="style/gteie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->


توضیح:
- عبارت gte به معنی greater than equal یا بزرگتر مساوی، است.
ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن پائین تر از 7 و خود آن  


<!--[if lte IE 7]>
<link href="style/lteie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->


ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن پائین تر از 8 و خود آن


<!--[if lte IE 8]>
<link href="style/lteie8.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->


ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن پائین تر از 9 و خود آن


<!--[if lte IE 9]>
<link href="style/lteie9.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->


توضیح:
- عبارت lte به معنی less than equal یا کوچکتر مساوی، است.
ایمپورت استایل در حالتی که مرورگر اینترنت اکسپلورر نباشد


<!--[if !IE]>
<link href="style/notie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

 

هک های مخصوص اینترنت اکسپلورر
علاوه بر روش های بالا در موارد خیلی خاصی می توان از حفره ها و اشکالات موجود در مرورگرها جهت مقاصد خیرخواهانه استفاده کرد!، تعجب نکنید، حفره های نرم افزاری همیشه هم بد نیستند (البته بهتر است پدیدآورندگان این گونه برنامه ها بیش تر به فکر رفع مشکلات باشند تا کاربران مجبور به استفاده از این شیوه ها نشوند!)، هک css در مرورگرهای مختلف بی شباهت به هکی که به طور معمول با آن آشنایی داریم نیست، چرا که در اینجا هم از نقایص موجود در برنامه نویسی مرورگر استفاده می کنیم، با این تفاوت که هدف ما تنظیم ظاهر صفحه و رفع مشکلات ناخواسته است، بحث هک در css جزئیات زیادی دارد، به همین دلیل در این مطلب صرفا به ذکر چند نمونه اکتفا می کنیم، البته به یاد داشته باشیم، استفاده از هک css توصیه نمی شود، چرا که بهتر است حتی المقدور بر کدهای ساده css تکیه داشته باشیم، از طرفی این هک ها در مرورگرهای مختلف که از به روز رسانی های متفاوت استفاده می کنند، یک جور رفتار نمی کنند.
هک با عبارت html+*
در این روش یک آی دی یا کلاس را دو بار به صورت عادی و با  html+*  ایجاد می کنند، به عنوان مثال کد زیر دو ویژگی متفاوت برای یک آی دی تعریف می کند، قسمتی که html+* در ابتدای آن قرار دارد، تنها در مرورگر IE 7 پردازش می شود.


<style type="text/css">
#my-id{
    border:#333 2px dotted;
}
*+html #my-id{
    border:#333 2px solid;
}
</style>

هک با زیر خط یا underline
روش هک زیر خط یا underline که عنوان صحیح تر آن underscore است برای هک نسخه های مختلف اینترنت اکسپلورر مخصوصا نسخه 6 کاربرد دارد، در این روش در همان آی دی یا کلاس، ویژگی مورد نظر را با یک زیرخط در ابتدای آن تعریف می کنند.


<style type="text/css">
body{
    font-size:18px;
    font-family:Arial, Helvetica, sans-serif;
    _font-size:10px;
    _font-family:Tahoma, Geneva, sans-serif;
}
</style>

هک با استفاده از علامت ستاره *
این روش هک هم برای مرورگر اینترنت اکسپلورر ورژن 7 به پائین به کار می رود، که در آن برای عناصر خاص اکسپلورر یک ستاره در ابتدای آنها قرار می دهند.


<style type="text/css">
.my-class{
    background-color:#CCC;
    *background-color:#0CC;
}
</style>

هک با قرار دادن عبارت 9\
این شیوه هک هم برای مرورگر اینترنت اکسپلورر ورژن 9 یا 8 و پائین تر به کار می رود، در این روش برای ویژگی خاص اکسپلورر، عبارت 9\ را به آخر آن اضافه می کنند.


<style type="text/css">
.my-class{
    background-color:#CCC;
    background-color:#0CC\9;
}
</style>


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین