نحوه استفاده از Css3 در مرورگر IE6 تا IE11

[m3hdi 15]

خوب برای خیلی از طراحان وب این مشکل پیش اومده که مشتری میخواد قالب سایتش بروی اینترنت اکسپلورر های ورژن 7 تا 11 ، خوب این یکی از دغدغه های طراحان وب هستش مخصوصا که سایتهاشون با استفاده از ساختار html5 و CSS3 بنا کردن .

کتابخانه که میخوام بهتون معرفی کنم اسمش هستش PIE یا همون Css3Pie که اکثر کدهای موجود در CSS3 ، بروی مرورگرهای مختلف اینترنت اکسپلورر قابل اجرا میکنه .

حالا باید از کجا شروع کنیم ؟!

برای استفاده از این کتابخانه از طریق لینک زیر این کتابخانه را دانلود کنید :

لینک دانلود

۴ تا فایل مهم داخلش هستش که فایلهای PIE_uncompressed.htc و PIE_uncompressed.js مختص برنامه نویسان و توسعه دهندگان حرفه ای هستش که میخواهند این کتابخانه را اختصاصی کنند و فایلهایی با نام های PIE.js و PIE.htc که مختص افرادی هستش که قصد اختصاصی کردن و همون دستکاری کردن کدها رو ندارن !

بعد از دانلود فایل و فراخوانی اون در پروژه تون کافی هستش که با ساختار و نحوه نوشتن کدهای مربوط به CSS3 آن آشنا بشوید … {منظور از فراخوانی آپلود کردن فایل در یک پوشه مشخص در قالبتون هستش }

برای مثال به کد زیر توجه کنید . این کد برگرفته از کد CSS3 هستش :

#myAwesomeElement {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

همونطور که همه میدونید دستور border-radius در IE8 هم قابل نمایش نیستش برای اثبات حرفم هم میتونید به این قسمت مراجعه کنید . حالا چطوری می توانیم با استفاده از کتابخانه PIE از این دستور طوری استفاده کنیم که در IE6/7/8/9 قابل نمایش باشه!!! به دستوری زیر دقت کنید :

behavior: url(pie_files/PIE.htc);

ما فایل PIE.htc را داخل پوشه ای به نام pie_files آپلود کردیم و از این طریق فراخوانی میکنیم و نکته دیگه اینکه برای استفاده از هر عنصری که داخلش از CSS3 استفاده شده باید قطعه کد بالا رو بهش بدهید .حالا فقط کافی هستش برید و در اینترنت اکسپلورر هم چک کنید …

خوب برای اینکه به خوبی متوجه این دستور بشوید من در قسمت زیر دقیقا مثالی که خود سایت مربوطه بهش اشاره کرده براتون توضیح می دهم :

در ابتدا کدهای HTML اون را قرار می دهم .

<div class="pie">
PIE example
</div>

حالا میرم سراغ کدهای CSS3 مربوطه ::

در حالت عادی و بدون این کتابخانه کدها را به صورت زیر می نویسیم . ( برای درک این موضوع شما هم اول به صورت زیر بنویسید و در IE هم تست کنید) :

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);

حالا کتابخانه PIE را هم بهش اضافه میکنیم :

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/pie/PIE.htc);

تقریبا میشه گفتش که این کتابخانه تمامی کدهای مربوط به CSS3 برای مرورگر IE9 به پایین پشتیبانی میکنه .

در آخر دستورات CSS3 که به وسیله این روش میتواند استفاده کرد و به راحتی در اینترنت اکسپلورر قابل نمایش هست ، عبارت است از :

• border-radius
  
• box-shadow
  
• border-image
  
• CSS3 Backgrounds (-pie-background)
  
• Gradients
  
• RGBA Color Values
  
• PIE Custom Properties
  
• -pie-load-path
  
• -pie-watch-ancestors
  
• PNG alpha transparency and -pie-png-fix
  
• Lazy Initialization (-pie-lazy-init)
  
• Layout polling (-pie-poll)
  
• :hover tracking (-pie-track-hover)
  
• :active tracking (-pie-track-active)
  
• 
  

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

مطالب آموزشی این سایت برگرفته از وب سایت " آموزش طراحی وب آکاوب " هستش که توسط خودم نوشته شده است .

همچنین برای درک بهتر این کتابخانه میتوانید به Document این کتابخانه واقع در آدرس زیر مراجعه کنید ::

CSS3 PIE Document

موفق باشید .

مهدی

[tareno 10]

این خیلی کمک میکنه ولی من اصلا متوجه نشدم ممنون میشم بیشتر در باره نحوه کار توضیح بدید