پایان یک مشکل جهنمی، نحوه استفاده 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 بهره میگیرید فقط خط زیر را درج نمایید.

[css] behavior: url(PIE.htc);
[/css]

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

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

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

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

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

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

  2. سلام من به پیشنهاد سایت stackoverflow.com تگ meta خودم رو با تگ زیر عوض کردم تمام مشکلات توی ie رفع شد گفتم شما هم استفاده کنید شاید به درد خورد!

  3. منم روی IE8 تست کردم ، جواب نداد.

    به نظرم باید از همون پنجره ای که باز میشه و به کاربر میگه لطفاً مرورگر IE رو با فایرفاکس یا یه چیز دیگه عوض کنید ، استفاده کنیم تا هر چه زودتر نسل این IE رو منقرض کنیم همه راحت بشن…

  4. سایت که من طرحی کردم یه مشکل اساسی داره و آن هم اینه که در مرورگر اکسپلورر (همه ی ورژن ها)  و فایرفاکس هیچ کدام از استایل های فایل style.css رو بارگزاری نمیکنه (دیگه اشکم داره  در میاد ) و موقع لود صفحه، همه چیز به هم ریخته !

    ilnad.ir

    مشکل بارگذاری فایل css چی می تونه باشه و چه جوری می تونم رفعش کنم.

    ممنونم از راهنماییتون

    • محسن عزیز .متاسفانه من در پروژه های خودم فقط ای یی ۹ به بالا رو درنظر میگیرم. و خیلی وقته از این هک استفاده نکردم.

      اما قالبا بیشتر مشکلات در آدرس دهی PIE.htc بوجود میاد. پیشنهاد می کنم از سایت پروژه بازدید کنید و ببینید ایا مشکلی وجود دارد و چه راه حلی ارائه شده است.

  5. پورحسن :

    دوست عزیز نمیدونم چرا ما کلا هر کاری رو باید بعد از گذراندن سختیش به نتیجه اش برسیم
    من فایل ها رو دانلود کردم و پوشه زیپش رو قرار دادم تو روتم. فایل PIE.htc رو ازش آوردم بیرون.بعد فقط دستور behavior: url(PIE.htc); رو اضافه کردم به خط های مورد نظرم ولی اجرا نمیده.

    آیا نباید بقیه فایل ها رو هم تو روت اکسترک کنیم؟آیا نباید فایل های js رو به header اضافه کنیم؟

    درود بر شما.
    قصد جسارت ندارم. اما (به طور کلی) ما(کاربران فارسی زبان) عادت نداریم داکیومنت ها انگلیسی رو دقیق مطالعه کنیم. فقط دنبال این هستیم. سریع کارمون راه بیوفته. در صورتی که در این داکیومنت ها مثل همین پروژه استثناها رو هم گوشزرد کردن.
    اما مشکل شما می تونه یکی از دو حالت باشه.
    ۱- کد behavior: url(PIE.htc); باید به آخرین خط رول سی اس اس تون اضافه بشه.
    ۲- بعضی مواقع وب سرور ها از content-type ها به خوبی پشتیبانی نمی کنند. برای همین یک فایل PIE.php قرار داده و داخل علت و نحوه استفاده صحیح رو توضیح داده.
    امید وارم این دو مورد مشکلتون رو حل کنند.

  6. دوست عزیز نمیدونم چرا ما کلا هر کاری رو باید بعد از گذراندن سختیش به نتیجه اش برسیم
    من فایل ها رو دانلود کردم و پوشه زیپش رو قرار دادم تو روتم. فایل PIE.htc رو ازش آوردم بیرون.بعد فقط دستور behavior: url(PIE.htc); رو اضافه کردم به خط های مورد نظرم ولی اجرا نمیده.

    آیا نباید بقیه فایل ها رو هم تو روت اکسترک کنیم؟آیا نباید فایل های js رو به header اضافه کنیم؟

  7. آقا خاصیت box-shadow تو ie به شدت با این ابزار مشکل داره. سرعت صفحه به شدت کاهش پیدا میکنه و مثلا منوهایی که افکت های جاوا اسکریپتی دارن اصلا درست عمل نمیکنن.

    چطور میشه این مشکل رو حل کرد؟

  8. سلام دوست گرامی . بنده یک مشکل اساسی با قالب سایتم دارم که متاسفانه ظاهرا حتی طراح قالب هم نمی تونه حلش کنه . و اون اینکه قالب پست های سایت بنده به رنگ روشنه که در اکسپلور این رنگ رو نشون نمیده حتی در برخی سیستمها در سایر مرورگرها هم همین مشکل پابرجاست . تمنا می کنم نگاهی به سایت بنده بیندازید اگر این مشکل حل شدنی است برام توضیح بفرمایید . خواهشی که دارم اینه که توضیحات رو با جزئیات بیان بفرمایید تا متوجه بشم مثلا توضیح این مطلب شما رو متوجه نشدم که کدوم فایل رو کجا کپی کنیم و کدها رو دقیقا کجا قرار بدیم. اگر ممکنه منت بذارید و توضیحات رو درباره سایت بنده برام ایمیل بفرمایید سپاسگزارم.

    • درود بر شما، مشکل شما بر می گرده به این که طراح شما برای قرار دادن اون حاشور ها در گوشه ها از قابلیتی که در css3 ارائه شده استفاده کردن.
      سه راه وجود دارد
      ۱- استفاده از همین هک که در این پست معرفی شده.
      ۲- بیخیال شدن اون حاشور ها در اینترنت اکسپلورر و تعریف یک بگراند با روش هک مختص در اکسپلورر
      ۳-پیاده سازی به روش های دیگر مثلا قرار دادن یک حاشور در یک div و که هر دیو رو میتوان با خاصیت position:absulote و مختصات نمایش در نقاط مورد نظر قرار داد

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

  9. IE یه مرورگر نون بره … من خودم قالب میزدم برای شیرترانیکس ولی واقعا پوست آدم کنده میشد زمانی که مشتری میگفت : با IE سازگاره؟؟؟؟

    واقعا من به همین دلیل قالب زدن را بوسیدم گذاشتم کنار چون کلا اعصاب میزون ندارم

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

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