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

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

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

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

    ilnad.ir

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

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

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

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

  4. پورحسن :

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

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

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

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

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

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

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

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

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

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

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

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

پاسخ دهید

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