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

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

۱۶ شهریور ۱۳۸۹ بازدید 3442 مرتبه, 1 دیدگاهتان را بنویسید دیدگاه های این نوشته

تمام طراحان وب در حال حاضر با یک معضل بزرگ و مشترکی در انجام طراحی صفحات وب مواجه هستند. و اون هم مرورگر وب جهنمی یعنی 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;
}
  1. ۱۷ شهریور ۱۳۸۹ در ۰۰:۱۳ | #1

    صالح جان دست درد نکنه ، خدا امواتشون رو بیامرزه چه کاره خدا پسندی کردند :دی

  2. scooter
    ۱۷ شهریور ۱۳۸۹ در ۰۰:۱۳ | #2

    بسیار عالیه من الان با ie6 تست کردم عین هلو کار میکنه ، به این میگن یه کار درست حسابی.

  3. ۱۷ شهریور ۱۳۸۹ در ۰۰:۴۸ | #3

    صالح اول بهت تبریک میگم که بدون غلط املایی تونستی یه مطلب رو کامل بنویسی بعد این مطلب یکی از بهترین مطالب و کارآمدترین مطالب برای طراحان وب هست.ممنون از نوشته کامل و کاربردیت.

  4. ۱۷ شهریور ۱۳۸۹ در ۰۰:۴۹ | #4

    عالی بود
    ممنون بابت معرفیش

  5. ۱۷ شهریور ۱۳۸۹ در ۰۰:۵۶ | #5

    جالب بود. اما فکر می کنم در مواقع غیر ضرور پرهیز از اینکار بهتره. چون کمی باعث overhead میشه. یک نگاهی به source انداختم. کمی نیاز به بهینه سازی داره. می دونی از dynamic loading استفاده می کنه یا نه؟ چون تعداد اسکریپتها خیلی زیاد بود و تعداد http request ها بالا می ره اگر بخواد همه رو بارگذاری کنه.

    به هر حال جالب بود.

  6. admin
    ۱۷ شهریور ۱۳۸۹ در ۰۱:۱۰ | #6

    فکر نمکنم این مورد رو رعایت کرده باشند چون هنوز بتا هست. اما یک مورد هست که خود Ie سرشار از overhead هست اینم روش :) )

  7. admin
    ۱۷ شهریور ۱۳۸۹ در ۰۱:۱۱ | #7

    از این به بعد هم باید اینطوری باشه. می خوام دقت کنم

  8. ۱۷ شهریور ۱۳۸۹ در ۰۲:۱۵ | #8

    @admin
    خوب دیگه بدتر! IE خودش سرعتش به شدت پایین هست و هی هم که دچار صرع و حملات قلبی می شه!دیگه روی یک صفحه پر از اسکریپت این بار اضافی هم بیاد چه شود! در کل IE 6 که منسوخ شد. بقیه رو هم jquery به اندازه کافی پشتیبانی میکنه. فکر کنم این اسکریپت به درد جاهایی می خوره که کسی می خواد فقط طراحی کنه و نه هیچ چیز دیگه!

  9. ۱۷ شهریور ۱۳۸۹ در ۰۲:۱۶ | #9

    @admin
    نظرم رو تصحیح می کنم! IE 6 هنوز توی ایران از پرطرفدار هاست! :دی! مخصوصاً در دانشگاه ها و مراکز دولتی!!!

  10. ۱۷ شهریور ۱۳۸۹ در ۰۲:۱۷ | #10

    مطلب خوبی بود صالح جان، مطمئنا خیلی به درد می خوره، متشکرم.

  11. ۱۷ شهریور ۱۳۸۹ در ۰۵:۳۲ | #11

    ممنون

  12. ۱۷ شهریور ۱۳۸۹ در ۰۸:۲۵ | #12

    جالب بود..!
    ممنون از اطلاع رسانیتون..:)
    با تشکر

  13. ۱۷ شهریور ۱۳۸۹ در ۰۸:۵۵ | #13

    دستتون درد نکنه , مفید بود

  14. ۱۷ شهریور ۱۳۸۹ در ۰۹:۳۰ | #14

    سلام واقعا این یکی از بهترین چیزهایی بود که تو نت خوندم :) / ممنون بابت این پست خوبت/.

  15. ۱۷ شهریور ۱۳۸۹ در ۱۱:۳۰ | #15

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

  16. ۱۷ شهریور ۱۳۸۹ در ۱۲:۲۳ | #16

    ممنون
    مطلب جالب و مفیدی بود.
    فقط اون دمو از تب ها تو IE خوب کار میکنه ولی تو Firefox کار نمیکنه !

  17. admin
    ۱۷ شهریور ۱۳۸۹ در ۱۳:۵۵ | #17

    دوست عزیز من شخصا حس مایکروسافت ستیزی ندارم. دارم از ویندوزش استفاده میکنم و الا آخر. اما باید دید ملاک خوب و بد بودن در چیست ، خوب یک سازمانی ایجاد شده و مسئولیت استاندارد سازی رو بر عهده گرفته. همه ایده ها و نیاز ها رو در کنار هم میزارند اعتبار سنجی میکنند و ….. در آخر یک استاندارد ایجاد میشه. و شرکت های که در این زمینه فعالیت می کنند. برای رعایت حال کاربرانشون و … این استاندارد رو نه کامل اما حداکثرش رو رعایت میکنه. سازمان w3 بالای ۳ سال هست که این کارو میکنه و تمومی تولید کنندگان با همکاری هم دیگه استاندارد ها رو رعایت می کنند. اما ماکروسافت کودوم از این ها رو رعایت کرده. فرض بر این که ماکروسافت اومده فیلترهای خاصی رو ایجاد کرده باشه؟ اما برای کی کاربران محصول خودش؟. پس بقیه افراد که از مرورگر دیگه ای استفاده می کنند. اونهایی که مک استفاده می کنند چی؟ می بینید! ماکروسافت رسما تو ارائه نسخه های ۷-۸ یه همه کاربران توهین کرد و اعلام کرد که من درست میگم بقیه مهم نیستند.

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

  18. ۱۷ شهریور ۱۳۸۹ در ۱۴:۱۶ | #18

    مهدی :
    دوست عزیزم .
    اینفدر دگم نباشین کارتون شده ازIE بد گفتن . اگر مشکلی داره درست اما IE واقا جهنم نیست . هنوز هم فیلتر هایی که IE داره هیچکدوم از بروزرهای به اصطلاح مدرن شما ندارن

    IE بخصوص در نسخه ۶ چرت ترین مرورگر در پشتیبانی از استانداردهای وب است. اصلا جای دفاع نداره. اینکه کسی بلد نباشه راه بره ، اما پشتک بزنه به درد جامعه نمی خوره .

  19. ۱۷ شهریور ۱۳۸۹ در ۱۵:۲۶ | #19

    این قضیه فقط یک مشکل داره : اونم اینکه روی تگ input گویا کار نمی کنه . مث textbox و button .

  20. ۱۷ شهریور ۱۳۸۹ در ۲۰:۵۸ | #20

    کار خوبی کردی که نوشتی این آموزش رو…
    من توی وبلاگم ازش استفاده کردم…
    هرچند همه امکانات رو پشتیبانی نمیکنه اما باز بهتر از هیچه…

  21. ۱۸ شهریور ۱۳۸۹ در ۰۱:۰۱ | #21

    @مهدی
    یعنی شما تنها از IE استفاده می کنید؟ خوب پس باید به جرات بگم تا الان فقط تونستید حداکثر ۴۰ درصد توانایی های وب رو ببینید ( خیلی زیاد گفتم نه؟!).
    البته IE9 یک چیز دیگه است و تلاش ماکروسافت برای ورود دوباره به عرصه وب قابل تقدیره.

  22. حمید
    ۱۸ شهریور ۱۳۸۹ در ۰۳:۰۳ | #22

    جالب بود

  23. ۱۸ شهریور ۱۳۸۹ در ۰۹:۴۰ | #23

    سلام عالی بود

  24. ۱۹ شهریور ۱۳۸۹ در ۲۲:۳۹ | #24

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

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

  25. ۲۴ شهریور ۱۳۸۹ در ۰۱:۱۲ | #25

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

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

  26. ۲۴ شهریور ۱۳۸۹ در ۰۶:۲۴ | #26

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

  27. یاشار
    ۱۲ آذر ۱۳۸۹ در ۱۰:۵۵ | #27

    سلام
    دستت درد نکنه
    ممنون

  28. ۱۴ آذر ۱۳۸۹ در ۲۲:۵۸ | #28

    @مرتضی
    راجع به IE9 شوخی می کنید دیگه؟!

  29. ۱۶ آذر ۱۳۸۹ در ۱۹:۰۰ | #29

    اگر به تاریخ ارسال مطلب دقت کنید. می بینید نسخه ای از ۹ که به صورت آزمایشی انتشار پیدا کرده بود اصلا پشتیبانی خوبی از css3 , html5 نداشت. اما خوب گویا از همه جلوتر افتاده

  30. ۱۶ آذر ۱۳۸۹ در ۲۳:۳۳ | #30

    @صالح
    خوبه… اگه از بتا تا فاینال ریلیز اینقدر پیشرفت داشته موندم چرا تو این چند سال خودش با خودش هم در گیر بوده؟! در هر صورت امیدوارم کاربران نسخه ۶ (شوالیه تاریکی!) و ۷ و ۸ به صفر برسه… آمین!

  31. ۲۱ اسفند ۱۳۸۹ در ۱۱:۲۰ | #31

    فقط تو IE کار میکنه ؟

  32. ۲۳ اسفند ۱۳۸۹ در ۱۸:۵۲ | #32

    مگر در مرورگر دیگری هم این مشکلات هست؟

  33. علی
    ۳ اردیبهشت ۱۳۹۰ در ۲۳:۵۲ | #33

    عجیبه من در ie8 واسه منو استفاده کرد منو ناپدید شد

  34. سروش
    ۲۶ اردیبهشت ۱۳۹۰ در ۱۰:۳۸ | #34

    اما این روش یه اشکال بزرگ داره که هنوز رفعش نکردن. در IE وقتی صفحه رو zoom out میکنیم همه چیز به هم می ریزه!

    این خیلی بده!

  35. ۲۶ اردیبهشت ۱۳۹۰ در ۲۱:۲۹ | #35

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

  36. ۲۶ اردیبهشت ۱۳۹۰ در ۲۱:۳۰ | #36

    تو قسمت پشتیبانیش یک سری توضیحاتی داده برای این مشکلات مثل استفاده از خاصیت position :realtive و یا zoom:1 ، برای اطلاعات بیشتر به داکیومنتش مراجعه کنید

  37. سروش
    ۲۶ اردیبهشت ۱۳۹۰ در ۲۳:۳۱ | #37

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

  38. ۲۶ اردیبهشت ۱۳۹۰ در ۲۳:۵۰ | #38

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

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

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

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

  39. سروش
    ۲۷ اردیبهشت ۱۳۹۰ در ۱۰:۲۲ | #39

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

  40. ATR
    ۱۲ خرداد ۱۳۹۰ در ۲۳:۴۹ | #40

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

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

  41. مرتضی
    ۲۰ تیر ۱۳۹۰ در ۱۲:۰۷ | #41

    خیلی ممنون واقعا ابزار خوبیه

  42. ۱ مرداد ۱۳۹۰ در ۰۰:۳۶ | #42

    MAN BA ATR MOVAFEGHAM
    MICROSOFT MASKHARE TARIN MAHSOLAT RO DARE
    MAN KHODAM OPEN SPURCE KAR MIKONAM
    BE NAZARE MAN NA TANHA IE HATA WINDOWS HAM BAYAD MAHV BESHE

  43. amin
    ۳ مرداد ۱۳۹۰ در ۲۰:۱۶ | #43

    خدا قوت صالح خان …

  1. بدون بازتاب