طراحی و سازگاری قالب سایت ها با اینترنت اکسپلورر، به خصوص نسخه های 6 و 7 آن، همواره یکی از معضلاتی بوده است که طراحان وب با آن دست و پنجه نرم می کنند، البته ie9 را از این مورد مستثنی کنید، چون تا حد زیادی مشکلات ورژن های قبل در آن رفع شده است. به دلیل استفاده زیاد از نسخه های قبل همچون 6، 7 و 8 و عدم پشتیبانی این نسخه ها از css3، ابزار های متفاوتی برای پیاده سازی خصوصیات ورژن سوم css در ie طراحی شده اند. یکی از این ابزار ها که قصد معرفی آن را دارم، PIE نام دارد.
برای استفاده از این ابزار ابتدا آن را از اینجا دانلود کنید: PIE
یکی از فایل های موجود در بسته ی دانلود شده، فایلیست به نام PIE.htc که عمل رندر دستورات css3 را برای اینترنت اکسپلورر انجام می دهد. البته قابل ذکر است که تنها برخی از خصوصیاتی که کاربرد بیشتری دارند توسط pie پشتیبانی می شوند، نه همه خصوصیات css3. خصوصیات پشتیبانی شده به صورت زیر می باشند:
حال استفاده از برخی از خصوصیات را در قالب یک مثال ساده بیان می کنم. فرض کنید خصوصیات زیر را به یک div نسبت داده ایم:
|
1
2
3
4
5
6
7
8
|
.elm
{
border: 1px solid #000;
border-radius: 10px;
width: 200px;
height: 200px;
background-color: #fff;
}
|
برای رندر کردن خصوصیت border-radius در ie تنها کافیست خط زیر را به خصوصیات بالا اضافه کنید:
|
1
2
3
4
5
|
.elm
{
...
behavior: url("PIE.htc");
}
|
خصوصیت behavior خصوصیتی است که تنها در اینترنت اکسپلورر شناخه می شود و توسط این خصوصیت فایل htc را به کلاس elm نسبت می دهیم(در واقع لازم است که این خط را برای تک تک selector های خود که در آن از دستورات css3 استفاده کرده اید بنویسید). با اختصاص این فایل به کلاس خود، pie دستورات css3 را parse و رندر می کند. توجه کنید که فایل PIE.htc را باید نسبت به صفحه ی html جاری آدرس دهی کنید، نه فایل css ضمیمه شده به صفحه.
در ادامه box-shadow را هم به خصوصیات موجود اضافه می کنیم:
|
1
2
3
4
5
|
.elm
{
...
box-shadow: 10px 10px 5px #acacac;
}
|
pie از خصوصیت چند تصویر زمینه برای یک المان که در css3 به خصوصیت background اضافه شد نیز پشتیبانی می کند، اما چون این خصوصیت در نسخه css 2.1 نیز موجود می باشد، برای جلوگیری از تداخل با آن، از پیشوند –pie استفاده شده است. همچنین pie از شیب رنگ خطی یا همان linear-gradient نیز پشیبانی به عمل آورده است:
|
1
2
3
4
5
|
.elm
{
...
-pie-background: url("up.png") no-repeat center center, linear-gradient(#eee, #ccc);
}
|
همانطور که مشاده می کنید از یک تصویر به همراه gradient استفاده کردم.
بعد از اعمال موارد ذکر شده چیزی شبیه به تصویر زیر را در ie مشاهده خواهید کرد:
این اسکریپت از rbga نیز برای رنگ ها پشتیبانی می کند، البته نه در همه جا. توسط pie تنها در خصوصیت background و به جای قسمت background-color آن، و همچنین در box-shadow در صورتی که میزان blur صفر باشد می توان از rbga برای رنگ استفاده کرد. به مثال زیر دقت کنید:
|
1
2
|
box-shadow: 10px 10px 0 rgba(118,246,211,0.4);
-pie-background: rgba(118,246,211,0.4) url("up.png") no-repeat center center;
|
و به عنوان آخرین نکته عرض کنم که pie مشکل رندر تصاویر png که در ie6 وجود دارد را نیز حل کرده است. در صورتی که استایل های نوشته شده توسط pie رندر شوند، اتوماتیک این مشکل حل خواهد شد، همانند تصویر png ای که در مثال ذکر شده به عنوان تصویر زمینه در نظر گرفتم، اما در مواردی که المان مورد نظر توسط pie رندر نمی شود، می توان از دستور –pie-png-fix استفاده کرد. به عنوان مثال کلاس زیر را در نظر بگیرید:
|
1
2
3
4
5
|
.test
{
background: url("up.png") no-repeat left top;
border: 1px solid #000;
}
|
خصوصیاتی که در کلاس test استفاده شده است، از خصوصیات شناخته شده برای pie نیست، بنابراین توسط pie رندر نمی شود و تصویر png ی استفاده شده به صورت صحیح نمایش نمیابد. برای رفع این مشکل از دستور –pie-png-fix استفاده می کنیم:
|
1
2
3
4
5
6
7
|
.test
{
background: url("up.png") no-repeat left top;
border: 1px solid #000;
-pie-png-fix: true;
behavior: url("PIE.htc");
}
|
خصوصیات دیگری نیز در pie همچون -pie-watch-ancestors ، -pie-png-fix ، -pie-lazy-init ، -pie-poll وجود دارند که در این مقاله در مورد آن ها صحبتی نمی کنم. برای اطلاعات بیشتر به سایت اصلی آن مراجعه کنید.
CSS 3.0 را با اینترنت اکسپلورر تجربه کنید
