شناسایی مرورگر با هک CSS
547 روز پیش
پويا صادقى , آموزش CSS, مرورگر
نحوه تفسیر کدهای CSS درمرورگر های مختلف متفاوته و مهمه که یک
صفحه HTML در اکثر مرورگرهای رایج به خوبی نمایش داده بشه
ممکنه کدهای CSS ما باعث بشه که صفحه HTML در مرورگری مثل فایرفاکس به درستی نمایش داده بشه ولی در مرورگی مثل اینترنت اکسپلورر مشکل داشته باشه،
برای حل این مشکل، باید کد CSS جداگانه ای برای اون مرورگر بنویسیم.
روش های مختلفی برای شناسایی مرورگرها هست که هک CSS یکی ازاونهاست ! هک CSS یا CSS Filter یه ترفند برای اجرای بعضی کد ها در مرورگری خاص یا یک ورژن خاص از یک مرورگره. مثلا وقتی کدهای CSS در همه مرورگرها درست نشون داده میشه ولی در اینترنت اکسپلورر 6 مشکل داره، یه کد CSS مینویسیم که فقط در اینترنت اکسپلورر 6 اجرا بشه و مشکل رو برطرف کنه
در کد زیر همه مرورگرها width رو 100 پیکسل نشون میدن ولی اینترنتاکسپلورر 6 و 7 width رو 120 پیکسل نشون میدن. علامت * در ابتدای width باعث شده که فقط در IE6 و IE7 اجرا بشه:
#my_box{
width:100px;
*width:120px;}
در این کد اینترنت اکسپلورر 6 (و قبل از اون) سایز فونت رو 5em نمایش میدن:
* html p {font-size: 5em; }
و این کد هم فقط در اینترنت اکسپلورر 7 اجرا میشه:
*+html p { font-size: 5em; }
اینترنت اکسپلورر 6 از خاصیت child selector پشتیبانی نمیکنه (مثلا برای انتخاب li هایی که درون ul هستند ul > li ). پس این این پاراگراف در همه مرورگرها بهجز IE6 آبی خواهد بود:
html > body p { color: blue; }
اینترنت اکسپلورر 7 از child selector پشتیبانی میکنه، پس برای اجرای کد در همه مرورگر ها بهجز IE7 باید از این حقه استفاده کنیم:
html >/**/ body p { color: blue; }
اینترنت اکسپلورر 6 و 7 و8 از خاصیت not ( که قبلا معرفی کرده بودم ) پشتیبانی نمیکنن. با این کد رنگ متن در IE قرمز میشه ولی در مرورگرهایی مثل فایرفاکس ، سافاری ، اپرا و کروم (که not رو میشناسن ) نارنجی میشه:
/* values for IE */
.yourSelector {color:red;}
/* values for Safari, Chrome, Opera and Firefox */
html:not([anything]) .yourSelector {color:orange;}
در این کد ، رنگ نوشته در 7 Internet Explorer و Internet Explorer 6 ، آبی و در بقیه مرورگر ها مشکی خواهد بود:
/* Make text blue in IE7 and below, black in all other browsers */
body {
color: black;
color: blue !ie;}
اگه از خاصیت important! برای تعیین اهمیت سلکتور استفاده کنیم، اینترنت اکسپلورر 6 نمیفهمه که important یعنی چی؟! . در اینجا، IE6 رنگ آبی نشون میده ولی بقیه مرورگرها رنگ مشکی:
/* Make text blue in IE6 and lower */
body {
color: black !important;
color: blue;
}
اگه از خاصیت important! استفاده کنیم و یه علامت تعجب ! اضافی آخرش بذاریم ، فقط مرورگر IE7 به بالا اون رواجرا میکنن:
/* Make text blue in IE7 and earlier, black in all other browsers */
body {
color: black;
color: blue !important!;
}
کد زیر در مرورگر Opera 9.27 و پایینتر اجرا میشه:
/* Opera 9.27 and below */
html:first-child .yourclass {color:red;}
برای مرورگر سافاری:
/* Safari */
html[xmlns*=""] body:last-child .yourclass {color:red;}
برای سافاری 3 به بعد ؛ کروم 1 به بعد ، اپرا 9 به بعد و فایرفاکس 3.5 به بالا:
/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:nth-of-type(1) .yourclass {color:red;}
/* AND: */
body:first-of-type .yourclass {color:red;}
برای سافاری 3 به بالا و گوگل کروم 1 به بالا:
/* Safari 3+, Chrome 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0){.yourclass {color:red;}}
یه روش دیگه برای تشخیص ورژن های مختلف IE استفاده از کامنت های HTML هست. برای همه ورژنهای IE:
<!--[if IE]>-->
body{color:red;}
برای IE6 ونسخه های قبلی:
<!--[if lt IE 7]>-->
body{color:red;}
برای همه مرورگرها بهجز IE:
<!--[if !IE]>-->
body{color:red;}
<!--
