پراکنده درباره IE
خرداد ۲۰م, ۱۳۸۹
یک. یه اسکریپت هست برای پشتیبانی از Border-Radius در همه نسخه های IE. فقط باید این رو به فایل CSSتون اضافه کنید:
.round {
behaviour: url('path/to/border-radius.htc');
}
دستور BEHAVIOUR رو تنها IE پشتیبانی می کنه و الباقی مرورگرها ندید می گیرندش.
نحوه کارش به این صورت هست که فایل استایل تون رو برای دستورات border-radius با هر prefixای که زده باشید بررسی می کنه و این گوشه گردی رو به اون عناصر اضافه می کنه.
از این جا بگیریدش: http://code.google.com/p/curved-corner/
دو. تکنیکی هست برای پشتیبانی از RGBA در IE. با فیلتر گرادینت که آشنایید؟ کافیه طیف رنگی که هر دو رنگ مبدا و مقصدش یکی باشند تعریف کنید. چیزی که حتی در مستندات خود مایکروسافت نیومده اینه که این فیلتر از کانال آلفا هم پشتیبانی می کنه. تعریفش به این صورته:
.element {
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);
/* #CC000000 is rgba(0,0,0,.80) */
zoom: 1; /* make sure element has hasLayout */
position: relative; /* is needed to enable clearType when using filters */
}
ابتدا پس زمینه رو که قبلاً برای مرورگرهای دیگه و با استفاده از RGBA تعریف کردیم رو حذف می کنیم. بعد فیلتر طیف رنگی رو می سازیم. توجه کنید که رنگ های تعریف شده به فرمت هگز و به صورت ARGB هستند.
فیلتر دو بار تعریف شده، یه بار با پیشوند ms که برای مرورگرهای IE8 به بالاست و یه بار بدون پیشوند برای نسخه های ۷ به پایین. اون zoom: 1 هم برای این تعریف شده تا به عنصر خاصیت hasLayout بده. کلاً چیز مهمی نیست.
حالا، استفاده از فیلترها باعث می شه clearType برای اون عناصر غیرفعال بشه، نتیجتاً متون واضح و شفاف نمایش داده نمی شن. برای دوباره فعالیدن این خاصیت باید مقدار position: relative رو به عنصر داد.
واضحه که این دستورات رو باید با تکنیک دلخواه فقط برای IE فعال کرد.
برای تبدیل RGBA به مقدار مشابهش با فرمت هگز و به صورت ARGB، این جا رو ببینید: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
همین. سخت بود؟!
سه. از شیوه نامه های مخصوص IE که با تکنیک Conditional Comment (توضیحات شرطی) ساخته می شن استفاده نکنید!
اینجا: http://www.phpied.com/conditional-comments-block-downloads/
توضیح داده که تعریف شیوه نامه مخصوص IE حتی وقتی اون شیوه نامه برای اون نسخه از IE نباشه باز هم بارگذاری الباقی صفحه رو بلاک می کنه که باعث کند شدن رندر صفحه می شه. این هم از باگ های عجیب IE.
چهار. برای تست طراحی روی نسخه های مختلف IE، پیشنهاد می کنم IE Collection رو امتحان کنید. همراه این شما IE Developer Toolbar رو هم دریافت می کنید، مشابه افزونه Developer Toolbar در فایرفاکس.
نظر بدهید