پایان یک مشکل جهنمی، نحوه استفاده 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;
}
صالح جان دست درد نکنه ، خدا امواتشون رو بیامرزه چه کاره خدا پسندی کردند :دی
بسیار عالیه من الان با ie6 تست کردم عین هلو کار میکنه ، به این میگن یه کار درست حسابی.
صالح اول بهت تبریک میگم که بدون غلط املایی تونستی یه مطلب رو کامل بنویسی بعد این مطلب یکی از بهترین مطالب و کارآمدترین مطالب برای طراحان وب هست.ممنون از نوشته کامل و کاربردیت.
عالی بود
ممنون بابت معرفیش
جالب بود. اما فکر می کنم در مواقع غیر ضرور پرهیز از اینکار بهتره. چون کمی باعث overhead میشه. یک نگاهی به source انداختم. کمی نیاز به بهینه سازی داره. می دونی از dynamic loading استفاده می کنه یا نه؟ چون تعداد اسکریپتها خیلی زیاد بود و تعداد http request ها بالا می ره اگر بخواد همه رو بارگذاری کنه.
به هر حال جالب بود.
فکر نمکنم این مورد رو رعایت کرده باشند چون هنوز بتا هست. اما یک مورد هست که خود Ie سرشار از overhead هست اینم روش
)
از این به بعد هم باید اینطوری باشه. می خوام دقت کنم
@admin
خوب دیگه بدتر! IE خودش سرعتش به شدت پایین هست و هی هم که دچار صرع و حملات قلبی می شه!دیگه روی یک صفحه پر از اسکریپت این بار اضافی هم بیاد چه شود! در کل IE 6 که منسوخ شد. بقیه رو هم jquery به اندازه کافی پشتیبانی میکنه. فکر کنم این اسکریپت به درد جاهایی می خوره که کسی می خواد فقط طراحی کنه و نه هیچ چیز دیگه!
@admin
نظرم رو تصحیح می کنم! IE 6 هنوز توی ایران از پرطرفدار هاست! :دی! مخصوصاً در دانشگاه ها و مراکز دولتی!!!
مطلب خوبی بود صالح جان، مطمئنا خیلی به درد می خوره، متشکرم.
ممنون
جالب بود..!
ممنون از اطلاع رسانیتون..:)
با تشکر
دستتون درد نکنه , مفید بود
سلام واقعا این یکی از بهترین چیزهایی بود که تو نت خوندم
/ ممنون بابت این پست خوبت/.
دوست عزیزم .
اینفدر دگم نباشین کارتون شده ازIE بد گفتن . اگر مشکلی داره درست اما IE واقا جهنم نیست . هنوز هم فیلتر هایی که IE داره هیچکدوم از بروزرهای به اصطلاح مدرن شما ندارن . خدا رو شکر که این حس مایکروسافت ستیزی توی ایران راه افتاد که دوستان هم از این راه خودی نشون بدن .
ممنون
مطلب جالب و مفیدی بود.
فقط اون دمو از تب ها تو IE خوب کار میکنه ولی تو Firefox کار نمیکنه !
دوست عزیز من شخصا حس مایکروسافت ستیزی ندارم. دارم از ویندوزش استفاده میکنم و الا آخر. اما باید دید ملاک خوب و بد بودن در چیست ، خوب یک سازمانی ایجاد شده و مسئولیت استاندارد سازی رو بر عهده گرفته. همه ایده ها و نیاز ها رو در کنار هم میزارند اعتبار سنجی میکنند و ….. در آخر یک استاندارد ایجاد میشه. و شرکت های که در این زمینه فعالیت می کنند. برای رعایت حال کاربرانشون و … این استاندارد رو نه کامل اما حداکثرش رو رعایت میکنه. سازمان w3 بالای ۳ سال هست که این کارو میکنه و تمومی تولید کنندگان با همکاری هم دیگه استاندارد ها رو رعایت می کنند. اما ماکروسافت کودوم از این ها رو رعایت کرده. فرض بر این که ماکروسافت اومده فیلترهای خاصی رو ایجاد کرده باشه؟ اما برای کی کاربران محصول خودش؟. پس بقیه افراد که از مرورگر دیگه ای استفاده می کنند. اونهایی که مک استفاده می کنند چی؟ می بینید! ماکروسافت رسما تو ارائه نسخه های ۷-۸ یه همه کاربران توهین کرد و اعلام کرد که من درست میگم بقیه مهم نیستند.
از طرفی دیگه استانداردی هم که برای خودش تعیین کرده رو قبول نداره و در هر نسخه یک سازی میزنند.
IE بخصوص در نسخه ۶ چرت ترین مرورگر در پشتیبانی از استانداردهای وب است. اصلا جای دفاع نداره. اینکه کسی بلد نباشه راه بره ، اما پشتک بزنه به درد جامعه نمی خوره .
این قضیه فقط یک مشکل داره : اونم اینکه روی تگ input گویا کار نمی کنه . مث textbox و button .
کار خوبی کردی که نوشتی این آموزش رو…
من توی وبلاگم ازش استفاده کردم…
هرچند همه امکانات رو پشتیبانی نمیکنه اما باز بهتر از هیچه…
@مهدی
یعنی شما تنها از IE استفاده می کنید؟ خوب پس باید به جرات بگم تا الان فقط تونستید حداکثر ۴۰ درصد توانایی های وب رو ببینید ( خیلی زیاد گفتم نه؟!).
البته IE9 یک چیز دیگه است و تلاش ماکروسافت برای ورود دوباره به عرصه وب قابل تقدیره.
جالب بود
سلام عالی بود
@مهدی
مسخرست، اصولا بد گفتن از چیزی که بده، عیبی نداره!!!
اما ممنون بابت معرفی. من کد رو طوری استفاده میکنم که فقط وقتی IE میاد تو صفحه گذاشته بشه. اگر هم overhead داره، مشکل اونیه که داره از IE استفاده میکنه!نه من.
IE6 هم که بیاد تو اکثر کارهام یه هشدار میگذارم و اصلا نمیذارم وارد سایت بشه.
دوست عزیز مشتری که خبر نداره می گه می خوام ساپورت کنه ! من و شما میدونیم که اکسپلورر استاندارد نداره
البته من هم با فروم موافقم. نباید دیگه تن داد به این لباس پوسیده، هم باید مشتری بفهمه هم باید کاربرها، من روش خوبی رو برای مشتری هام دارم، اون هم به این صورت هست که اعلام می کنم که چون استاندارد کار میکنم. اگر روی ای ای ۶ کاری رو میخواهند هزینه بیشتری باید بندند. چون اضافه کاری هست. خوب فکر میکنید. چی میگن؟! میگن نمی خواهیم میگیم کاربرا از مرورگر دیگه استفاده کنند. در ضمن شما طراح هم باید کاری کنید که کاربرانتون از ای ۶ استفاده نکنند. حالا با اختار یا غیر فعال کردن یک سری امکانات خیلی سریع میرن سراغ مرورگر دیگه ای
سلام
دستت درد نکنه
ممنون
@مرتضی
راجع به IE9 شوخی می کنید دیگه؟!
اگر به تاریخ ارسال مطلب دقت کنید. می بینید نسخه ای از ۹ که به صورت آزمایشی انتشار پیدا کرده بود اصلا پشتیبانی خوبی از css3 , html5 نداشت. اما خوب گویا از همه جلوتر افتاده
@صالح
خوبه… اگه از بتا تا فاینال ریلیز اینقدر پیشرفت داشته موندم چرا تو این چند سال خودش با خودش هم در گیر بوده؟! در هر صورت امیدوارم کاربران نسخه ۶ (شوالیه تاریکی!) و ۷ و ۸ به صفر برسه… آمین!
فقط تو IE کار میکنه ؟
مگر در مرورگر دیگری هم این مشکلات هست؟
عجیبه من در ie8 واسه منو استفاده کرد منو ناپدید شد
اما این روش یه اشکال بزرگ داره که هنوز رفعش نکردن. در IE وقتی صفحه رو zoom out میکنیم همه چیز به هم می ریزه!
این خیلی بده!
من این موضوع تست نکردم. اما باید در نظر داشته باشید که انتظار زیادی نباید داشته باشید. من شخصا بیخیال ای ۶ شدم و نمی زارم ویزیتور هایی که با ای ۶ و ۷ قصد ویزت سایت رو دارند. وارد سایت شوند. و ازشون دعوت میشه که یک مروگر دیگه رو انتخاب کنند.
تو قسمت پشتیبانیش یک سری توضیحاتی داده برای این مشکلات مثل استفاده از خاصیت position :realtive و یا zoom:1 ، برای اطلاعات بیشتر به داکیومنتش مراجعه کنید
من اون هارو هم تست کردمو درست نشد.
آخه نمیشه که بگی کسی از ۶ و ۷ و حتی ۸ استفاده نکنه چون ۸ هم خیلی ایراد داره…
من در یکی از وب سایت هایی که درست کردم و آمار بازدید بالایی بین شرکت های تجاری داره دیدم که نیمی از کل کاربر هایی که میان داخل اون وب سایت از IE 6 استفاده میکنن!!!
معمولا هم اگه نذاریم وارد بشن و پیغام بدیم که باید به مرورگر دیگه ای ارتقا پیدا کنن ۹۸% احتمال داره که صفحه رو ببندند و این یعنی خسارت!!!
بهتره تا اونجایی که میشه از Css3 استفاده نشه تا IE 6 کاملا از روی همه ی سیستم عامل ها منقرض بشه
به امید اون روز
دوست عزیز حرف شما رو قبول دارم اما برای این کار باید فرهنگ سازی کرد. و در حال حاضر همه امادگی این کار رو دارند. حتی خود ماکروسافت هم برای این کار بسیج شده.
من برای به مشتریانم زمانی که رو ای ۶ پافشاری میکننو ۳۰-۴۰% روی قیمت کار میبرم. البته توضیحات لازم رو هم میدم. نتیجه اینکه ۹۵% قبول می کنند که تحت ۶ و ۷ سایتشون بهینه نشه.
در مورد ویزیتور ها هم به دو صورت اعمل میکنم.
۱- اگر کار طوری باشه که بدون مرورگرهای جدید مشاهده سایت معنی نداشته باشه. در همون ابتدای بازدید از سایت به یک صفحه ارجاع میدمشون و کامل توضیح میدم. که چرا باید از یک مرورگر دیگه استفاده کنند. یکی از نکات مهم در این توضیحات اشاره به این هست اگر شما به این فکر میکنید. که چرا با داشتن آنتی ویروس باز سیستم شما دچار ویروس و بدافزار ها میشوید. بزرگترین دلیلش همین مرورکر اینترنت اکسپلورر هست و کلی لینک به فارسی و اینگلیسی براشوم گزاشتم.
در آخرین کار نکته جالب اینکه زمانی که سایت رو به نزدیکان خودم نشون دادم. دیدم که همشون کروم یا فایرفاکس نصب کردن. وقتی ازشون پرسیدم. گقتن همین که تو این سایت و جاهای دیگه که لینک شده بود متوجه شدم که یکی از دلایل هک، ویروسی و همین بدافزار ها به دلیل استفاده از ie6 هست. سریعا اقدام کردن و همه شون راضی بودن
۲- می تونند سایت رو مشاهده کنند و یک تولبار در بالای سایت قرار میدم. که پیشنهاد میکنم برای تست هم که شده یکبار با یک مرورگر دیگری این سایت رو ببند.
پس شما هم یا به همین روش یا روش های بهتری که سراغ دارید. شروع کنید.
البته شما درست می فرمایید باید فرهنگ سازی بشه
و روش دومتون رو من خودم هم اجرا کرده ام و جواب داده
این مسئله ای هست که تمام طراحان وب ایران باید رعایت کنند تا یک پارچه سطح فرهنگ بره بالا
من که به شخصه به تقلید از بزرگان طراح وب در مرحله اول طراحی ie رو در نظر نمی گیرم و کارم که تموم شد برای تمام نسخه های ie از ۶ گرفته تا ۸ کد های مخصوص به خودشون رو می نویسم جالب اینجاست هر کدوم مشکلات خودشون رو دارند مثلا مشکل کات شدن متن در نسخه ۸ در هیچ کدوم از نسخه ها وجود نداره ، اما اگه طراحی برای خودم باشه به نسخه های ۶ و ۷ اجازه ورود به سایتم رو نمیدم و به نظرم اگر همه ی ما همین عمل رو انجام بدیم و ماکروسافت رو تحریم کنیم مشکل برای همیشه حل خواهد شد چون بقیه مرورگر های ناسازگار اجباری به استفاده از اونها وجود نداره و کاربران کمی هم دارند.
در ضمن به دلیل عدم سازگاری ie با css همیشه سورس های سازگار با این مرورگر سنگین تر هستند پس گریزی نیست.
خیلی ممنون واقعا ابزار خوبیه
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
خدا قوت صالح خان …