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

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

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

زمان مورد نیاز برای مطالعه 5 دقیقه

یکسان سازی کدهای css در مرورگرهای chrome ,IE ,saffriو...

دپارتمان ‌ها: آموزش طراحی سایت
1398/08/02
3,534 بازدید

باید اول از همه با هم بررسی کنیم که این یکسان سازی کدهای  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 از دستورات شرطی زیر استفاده می کنیم :

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