پایان یک مشکل جهنمی، نحوه استفاده css3 در Internet Explorer

تمام طراحان وب در حال حاضر با یک معضل بزرگ و مشترکی در انجام طراحی صفحات وب مواجه هستند. و اون هم مرورگر وب جهنمی یعنی Internet Explorer است. Internet Explorer به راستی اشک طراحان وب رو درآورده. امکان نداره یک پروژه رو انجام بدهیم و شاهد نا هماهنگی هایی در نسخه های مختلف این مرورگر نباشیم.

از تمامی این ناهماهنگی ها بگذریم می رسیم به پیشتیبانی نکردن از ابزار ها جدید. یکی از این ابزار ها CSS3 می باشد .که با ظهورش قدرت زیادی به پویا کردن صفحات وب ارائه کرد. متاسفانه Internet Explorer در هیج کدام از نسخه های جدید و پایدارش از این ابزار پشتیبانی نمی کند. از آنجایی که این مرورگر بر روی کامپیوتر خیلی از کاربران نصب می باشد،  متاسفانه بیشتر بازدید کنندگان وب سایت ها از این مرورگر جهنمی بهره می بردند.

در بازار وب مخصوصا در ایران کارفرمایان و مشتریان خواهان استفاده از آخرین ابزار ها و تکنولوژی های روز در وب سایتشان هستند. و از طرف دیگر چون هنوز درصد زیادی از بازدید کنندگان از این مرورگر استفاده میکنند.  مجبورند یکی را انتخاب کنند یا هماهنگی با Internet Explorer یا استفاده از نوآوری های وب. در این وسط ما طراحان وب هستیم که هلاک می شویم تا در مرحله اول مشتری را توجیه کنیم و در مرحله دوم وب سایت را با Internet Explorer هماهنگ کنیم.

در راستای همین  مشکلات  یک برنامه نویس خوش ذوق به نام Jason Johnston که اتفاقا از دیار کفر و استکبار هم هست به همراه چند تن دیگر از برنامه نویس بیکار دنیای اوپن سورس (اصطلاحی که برنامه نویسان ایرانی برای توجیه کردن خود که چرا در پروژه های اوپن سورس شرکت نمی کنند )، پروژه ای را شروع کردنند تا  بتوان CSS3 را در نسخه های فراگیر Internet Explorer رو شبیه سازی و استفاده کرد.

اسم این پروژه CSS3PIE هست. در این پروژه به کمک جاوا اسکریپت خاصیت های ارائه شده در Css3  را شبیه سازی می کنند.همکنون  ۲ نسخه ارائه دادند که در نسخه اول مشکلات زیادی به همراه بود و در آخرین نسخه که  من در یکی از پروژه های دولتی از CSS3PIE بهره بردم ،  هیچ مشکل خاصی نه خودم شاهدش بود نه کسی گزارش داده.

CSS3PIE در حال حاضر می تواند از این خاصیت های CSS3 زیر پشتیبانی و آنها را به خوبی شبیه سازی کنید.

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

شما فقط کافیست فایل PIE.htc در روت وب سایت خود کپی نمایید. و در هر کجا که از خاصیت های CSS3 بهره میگیرید فقط خط زیر را درج نمایید.

behavior: url(PIE.htc);

همانند مثال زیر :

#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
behavior: url(PIE.htc);
}

نسخه نمایشی این شبیه ساز خالی از لطف نیست . دوستانی که به مشکلی برخوردند ابتدا به راهنمای این اسکریپت مراجعه نمایند و در صورت رفع نشدن مشکل در قسمت نظرات اعلام کنند.

#myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}