ورود به سایت

لوگو آکادمی آی تی
info[at]academyit.net 02144140935 09126492189

یکسان سازی کدهای css در مرورگرهای مختلف

دوست من سلام ، خوشحالم باز هم با یکی دیگه از مقالات جدید آکادمی آی تی با تو دوست عزیز همراه هستم ، در این مقاله میخوایم با هم بررسی کنیم که هک های css چی هستند فکر کنم خیلی از دوستان اسمش رو قبلا شنیده باشند اما شاید از اون استفاده نکرده باشند ، خب حالا من می خوام دراین مقاله تو دوست عزیز رو با هک های css آشنا کنم.

یکسان سازی کدها css در مرورگرهای مختلف


باید اول از همه با هم بررسی کنیم که این یکسان سازی کدهای  Css چی هستند وچطور استفاده میشن مثلا یه نمونه که ممکن تو کد زدن خیلی با اون برخورد کردی این است که برخی از خصوصیات و مشخصه هایی که ما به یک قسمت از سایتمون با css دادیم در مرورگرهای chrome ,IE,saffriو... اجرا کنیم می بینیم که اون خصوصیات اعمال نشده که در این صورت میایم و از هک های Css استفاده می کنیم مثلا وقتی شما به یک div  خصوصیت shadow میدید و آن را اجرا می کنید می بینید در مرورگر IE این خصوصیت اعمال نشده و شما چاره ای ندارید جز اینکه از کد Css استفاده کنید.
حتما الان پیش خودت فکر می کنی که خب الان کمتر کسی با IE سایتی رو باز می کنه اما بدون دوست من که من می خوام الان به تو بگم که چه مرورگرهایی به هک های css احتیاج دارند و تو بتونی با این روش سایت خودتو رو در مرورگر IE هم به زیبایی نمایش بدی.
مرورگرهایی که احتیاج به کد های css دارند
ما از بین مرورگر ها پیشفرض خودمون رو روی firefax قرار می دیم و نتایج کد نویسی رو روی آن بررسی می کنیم و برای بهینه سازی روی مرورگرهای دیگر انجام میدیم البته تمام مرورگرها به جز IE اکثرا نیاز به بهینه سازی ندارند البته در حال حاضر اکثرا از IE10 و IE11 استفاده می کنند که اکسپلورر در این نسخه ها کمی با فایرفاکس راه اومده و مشکلی بوجود نمیاره اما از IE9 به پایین دیگه استفاده نمیشه و توسط کدنویسان در طراحی سایت نیز پشتیبانی نمیشه، با این وجود بهینه سازی سایت برمیگرده به کاربران موجود در سایتت ، مثلا اگر قرار باشه تو قالب سایتت رو برای یک فروشگاه ساز بهینه سازی کنی ، نیازی به بررسی سایت در IE9 به پایین نخواهی داشت اما اگر بخواهی یک سایت برای یک سازمان و یا ارگان دولتی طراحی کنی می بایست برای IE9 , IE8 , IE7 و IE66 هم بهینه سازی انجام بدی، چرا که هنوز کارمندان دولتی از IE9 به پایین استفاده می کنند

 

استفاده از کدهای css

برای مثال به بررسی خصوصیت color در مرورگرها می پردازیم البته میدونیم که این خصوصیت روی تمام مرورگرها اعمال میشه اما من بیشتر برای مثال این خصوصیت رو عنوان کردم :
 
.color:red; All browsers

کدهای مربوط به IE

color:red !important; All browsers but IE6
 
_color:red; Only works in IE6
 
*color:red; IE6, IE7
 
+color:red; Only works in IE7
 
*+color:red; Only works in IE7
 
color:red\9;   IE6, IE7, IE8, IE9
 
color:red\0;   IE8, IE9
 
color:red\9\0; Only works in IE9

بین ورژن های مرورگر IE ورژن 10 آن باز بهتر از بقیه است و ما رو مثل ورژن های پایین تر اذیت نمیکنه ولی خب گاهی اوقات ممکنه بخوایم یه استایل متفاوت برای این نسخه از IE در نظر بگیریم، پس یادگیری هک این نسخه هم خالی از لطف نیست . برای هک IE10 راه های متفاوتی وجود داره اما میتونیم از یکی از دو روش زیر استفاده کنیم:
1. استفاده از media queries

@@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {    /* style here for IE10+ */ }
 
2. استفاده از html , css,javascrip
کد جاوااسکریپت زیر رو در صفحه وب قرار میدیم تا خصوصیت data-useragent رو برای صفحه  html مون ست کنه :
 
var doc= document.documentElement;doc.setAttribute
('data-useragent', navigator.userAgent);doc.setAttribute('data-platform', navigator.platform);
 

Useragent در IE10 بصورت زیر خواهد بود: 
 

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

کد زیر را در Html  اضافه می کنیم تا در css بتونیم ازش استفاده کنیم:

<"html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

 

حالا در css اونو فراخوانی می کنیم و بهش میگیم اگر IE10 بود مثلا رنگ H1رو آبی کنه: 

html[data-useragent*='MSIE 10.0'] h1 {color: blue;}

 

کد های مربوط به  مرورگرهای chrome , opera , safari


در مثال زیر نام انتخابگر شما selectorname است مثلا #TopMenu یا مثلا h1

safari 3+, chrome 1+, opera9+, ff 3.5+ 
body:nth-of-type(1) #selectorName { color: red }
 
safari 3+, chrome 1+, opera9+, ff 3.5+ 
body:first-of-type #selectorName {  color: red }
 
iPhone / mobile webkit 
@media screen and (max-device-width: 480px) {
 #selectorName { color: red  }
}
 
Chrome ,  Safari , Opera
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari , Chrome , Opera */
    #selectorName {
     color:#c00;
    }
    /* only Safari 5+*/
    ::i-block-chrome, #selectorName {
     color:#000;
    }
}

زمانی که ما هک های IE رو به کار می بریم باید دستورات مربوطه رو داخل یک فایل css ذخیره کنیم و با دستورات شرطی توی html  فرخوانی کنیم مثلا در IE9 یک سری استایل خاصی تعریف کنیم که دستورات css آن به این صورت خواهد شد
 

 
h1{color: red\9; font:13px tahoma\9}

 

بعدش ما این دستورات در فایلی مثلاIE9.css یا هراسمی که خودت دوست داری ذخیره می کنید

 

توی مثال بالا مربوط به IE9 ، H1 ما رنگش قرمز و فونت اون هم Tahoma با اندازه 13px رو خواهد داشت.
If condition ها در html  چیست؟
برای اضافه کردن فایل های  css بخصوص هر نسخه IE از دستورات شرطی زیر استفاده می کنیم :
تمام نسخه IE

 
فقط نسخه 6
 

 
فقط نسخه 7
 

 
فقط نسخه 8
 

 
فقط نسخه 9
 

 
IE نسخه ی 8 و بالاتر از 8
 

 
IE نسخه ی 9 به پایین (یعنی IE9 محسوب نمیشه)
 

 
IE نسخه ی 7 و پایین تر از نسخه ی 7
 

 
بالاتر از نسخه ی IE6
 

 
اگر که مرورگر IE نباشه
 

عبارت gte , lt , lte , gt معانی زیر رو دارند:
Gt = Greater than( بزرگتر از)
Lt = little than(کوچکتر از)
Gte = greater than And Equal (مساوی و بزرگتر از)
Lte = little than And Equal (مساوی و کوچکتر از)