پایان یک مشکل جهنمی، نحوه استفاده 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;
}

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

  1. سلام.
    ممنون که این کار رو کردید ولی شما خودتون که لالایی بلدین چرا خوابتون نمیبره ؟!!! والا من از ویندوز ۸ استفاده می کنم و آخرین ورژن IE روی سیستم من نصبه ولی همین صفحه ی سایت شما رو حتی باز نمیکنه اونم به صورت ساده و فقط یه صفحه ی خالی میاره.IE مزخرفترین مرورگری هستش که تا به حال دیدم و هر کسی از اون استفاده می کنه واقعا باید خل باشه !!!!
    ادعا نمی کنم و هیچ وقت نمی تونم بگم حرفه ای ولی من خودم طراح وب هستم و این مشکل رو نمیشه با پروژه هایی به این سادگی حل کرد.باید یه CSS مخصوص IE نوشت و از اون استفاده کرد واگرنه راه دیگه ای نداره !
    ولی در هر حال متشکر از زحمتی که کشیدید.

    • درود بر شما
      دوست عزیز بابت نظر و راهنمایی تون متشکرم.
      ابتدا باید خدمتتون عرض کنم. بنده برنامه نویس هستم، نه طراح صفحات وب، این وبلاگ ما نیز یک قالب آماده وردپرس هست و من دخالتی توش نداشتم.
      دوم اینکه اگر به تاریخ مطلب توجه داشته باشید. تاریخ انتشارش مقدار قدیمی هست. در حال حاضر به نظر من اشتباه محض هست که امکانات و قابلیت های html5 و css3 رو ندید بگیری،به خاطر اینکه پروژه باید در مرورگر های قدیمی جواب بده.
      من شخصا ie 8 به بالا رو در نظر میگیریم.
      مورد بعدی موضوع این مطلب استفاده از یک سری امکانات css3 در مرورگر های قدیمی مثل ie 6,7 هست. واقعا نمی دونم چه طور با ایجاد یک استایل مختص ie می توان قابلیت های هایی css3 رو پیاده سازی کرد.
      اما نکته آخر پیشنهاد میکنم مطالعه تون رو مقداری زیاد کنید و با پروژه های چون modernizr.com آشنا بشید و ببینید و بیاموزید که کار نشد ندارد. 🙂

  2. من که به شخصه به تقلید از بزرگان طراح وب در مرحله اول طراحی ie رو در نظر نمی گیرم و کارم که تموم شد برای تمام نسخه های ie از ۶ گرفته تا ۸ کد های مخصوص به خودشون رو می نویسم جالب اینجاست هر کدوم مشکلات خودشون رو دارند مثلا مشکل کات شدن متن در نسخه ۸ در هیچ کدوم از نسخه ها وجود نداره ، اما اگه طراحی برای خودم باشه به نسخه های ۶ و ۷ اجازه ورود به سایتم رو نمیدم و به نظرم اگر همه ی ما همین عمل رو انجام بدیم و ماکروسافت رو تحریم کنیم مشکل برای همیشه حل خواهد شد چون بقیه مرورگر های ناسازگار اجباری به استفاده از اونها وجود نداره و کاربران کمی هم دارند.

    در ضمن به دلیل عدم سازگاری ie با css همیشه سورس های سازگار با این مرورگر سنگین تر هستند پس گریزی نیست.

  3. البته شما درست می فرمایید باید فرهنگ سازی بشه
    و روش دومتون رو من خودم هم اجرا کرده ام و جواب داده
    این مسئله ای هست که تمام طراحان وب ایران باید رعایت کنند تا یک پارچه سطح فرهنگ بره بالا

  4. من اون هارو هم تست کردمو درست نشد.
    آخه نمیشه که بگی کسی از ۶ و ۷ و حتی ۸ استفاده نکنه چون ۸ هم خیلی ایراد داره…
    من در یکی از وب سایت هایی که درست کردم و آمار بازدید بالایی بین شرکت های تجاری داره دیدم که نیمی از کل کاربر هایی که میان داخل اون وب سایت از IE 6 استفاده میکنن!!!
    معمولا هم اگه نذاریم وارد بشن و پیغام بدیم که باید به مرورگر دیگه ای ارتقا پیدا کنن ۹۸% احتمال داره که صفحه رو ببندند و این یعنی خسارت!!!
    بهتره تا اونجایی که میشه از Css3 استفاده نشه تا IE 6 کاملا از روی همه ی سیستم عامل ها منقرض بشه
    به امید اون روز

    • دوست عزیز حرف شما رو قبول دارم اما برای این کار باید فرهنگ سازی کرد. و در حال حاضر همه امادگی این کار رو دارند. حتی خود ماکروسافت هم برای این کار بسیج شده.
      من برای به مشتریانم زمانی که رو ای ۶ پافشاری میکننو ۳۰-۴۰% روی قیمت کار میبرم. البته توضیحات لازم رو هم میدم. نتیجه اینکه ۹۵% قبول می کنند که تحت ۶ و ۷ سایتشون بهینه نشه.

      در مورد ویزیتور ها هم به دو صورت اعمل میکنم.
      ۱- اگر کار طوری باشه که بدون مرورگرهای جدید مشاهده سایت معنی نداشته باشه. در همون ابتدای بازدید از سایت به یک صفحه ارجاع میدمشون و کامل توضیح میدم. که چرا باید از یک مرورگر دیگه استفاده کنند. یکی از نکات مهم در این توضیحات اشاره به این هست اگر شما به این فکر میکنید. که چرا با داشتن آنتی ویروس باز سیستم شما دچار ویروس و بدافزار ها میشوید. بزرگترین دلیلش همین مرورکر اینترنت اکسپلورر هست و کلی لینک به فارسی و اینگلیسی براشوم گزاشتم.
      در آخرین کار نکته جالب اینکه زمانی که سایت رو به نزدیکان خودم نشون دادم. دیدم که همشون کروم یا فایرفاکس نصب کردن. وقتی ازشون پرسیدم. گقتن همین که تو این سایت و جاهای دیگه که لینک شده بود متوجه شدم که یکی از دلایل هک، ویروسی و همین بدافزار ها به دلیل استفاده از ie6 هست. سریعا اقدام کردن و همه شون راضی بودن

      ۲- می تونند سایت رو مشاهده کنند و یک تولبار در بالای سایت قرار میدم. که پیشنهاد میکنم برای تست هم که شده یکبار با یک مرورگر دیگری این سایت رو ببند.

      پس شما هم یا به همین روش یا روش های بهتری که سراغ دارید. شروع کنید.

    • من این موضوع تست نکردم. اما باید در نظر داشته باشید که انتظار زیادی نباید داشته باشید. من شخصا بیخیال ای ۶ شدم و نمی زارم ویزیتور هایی که با ای ۶ و ۷ قصد ویزت سایت رو دارند. وارد سایت شوند. و ازشون دعوت میشه که یک مروگر دیگه رو انتخاب کنند.

  5. فرود :
    @مهدی
    مسخرست، اصولا بد گفتن از چیزی که بده، عیبی نداره!!!
    اما ممنون بابت معرفی. من کد رو طوری استفاده میکنم که فقط وقتی IE میاد تو صفحه گذاشته بشه. اگر هم overhead داره، مشکل اونیه که داره از IE استفاده میکنه!‌نه من.
    IE6 هم که بیاد تو اکثر کارهام یه هشدار میگذارم و اصلا نمیذارم وارد سایت بشه.

    دوست عزیز مشتری که خبر نداره می گه می خوام ساپورت کنه ! من و شما میدونیم که اکسپلورر استاندارد نداره

    • البته من هم با فروم موافقم. نباید دیگه تن داد به این لباس پوسیده، هم باید مشتری بفهمه هم باید کاربرها، من روش خوبی رو برای مشتری هام دارم، اون هم به این صورت هست که اعلام می کنم که چون استاندارد کار میکنم. اگر روی ای ای ۶ کاری رو میخواهند هزینه بیشتری باید بندند. چون اضافه کاری هست. خوب فکر میکنید. چی میگن؟! میگن نمی خواهیم میگیم کاربرا از مرورگر دیگه استفاده کنند. در ضمن شما طراح هم باید کاری کنید که کاربرانتون از ای ۶ استفاده نکنند. حالا با اختار یا غیر فعال کردن یک سری امکانات خیلی سریع میرن سراغ مرورگر دیگه ای

  6. @مهدی
    مسخرست، اصولا بد گفتن از چیزی که بده، عیبی نداره!!!

    اما ممنون بابت معرفی. من کد رو طوری استفاده میکنم که فقط وقتی IE میاد تو صفحه گذاشته بشه. اگر هم overhead داره، مشکل اونیه که داره از IE استفاده میکنه!‌نه من.
    IE6 هم که بیاد تو اکثر کارهام یه هشدار میگذارم و اصلا نمیذارم وارد سایت بشه.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *