11
تشکر

آموزش استفاده از CSS3 PIE

CSS3 PIE

CSS3 PIE

یکی از دغدغه های اصلی طراحان وب و Front End Developerها مخصوصاً در ایران، نمایش درست سایت در مرورگرهای قدیمی به‌ خصوص IE6 تا 9 است. حالا که با آمدن CSS3 قابلیت‌های خیلی زیادی به CSS اضافه شده است، نمیتوان از همه آن‌ها در طراحی سایت دست کشید، آن هم فقط به خاطر اینکه در مرورگرهای پایین جواب نمیدهد.

حال با استفاده از کتابخانه CSS3 PIE میتوانیم بعضی از قابلیت‌های CSS3 را در مرورگر های IE6 تا 9 هم استفاده کنیم.

در ادامه مطلب همراه ما باشید…

شروع به کار

ابتدا این کتابخانه را از اینجا دانلود کرده و در مسیر پروژه خود قرار دهید.

حالا برای مثال با میخواهیم از خاصیت border-radius استفاده کنیم. کد CSS ما شبیه زیر است، که هیچ چیز جدیدی ندارد.

.box {
  width: 400px;
  height: 250px;
  background: #E6E4E4;
  margin: 0 auto;
  border: solid 2px #0052AC;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}

نتیجه کد بالا در IE7 مشابه عکس زیر است.

Before CSS3 PIE

Before CSS3 PIE

میبینید که border-radius اعمال نشده است. حالا با استفاده از خاصیت behavior آدرس فایل PIE.htc را که درون کتابخانه PIE است میدهیم. پس کد زیر را به کدهای بالا اضافه میکنیم (برای هر عنصری که میخواهید از PIE استفاده کنید باید قطعه کد زیر را هم اضافه کنید).

behavior: url('PIE-1.0.0/PIE.htc');

نتیجه در IE7 مشابه عکس زیر میشود. میبینید که border-radius به درستی در مرورگر IE7 کار میکند.

After CSS3 PIE

After CSS3 PIE

ویژگی‌های پشتیبانی شده در CSS3 PIE

border-radius که گفته شد. حالا چند ویژگی دیگر را بررسی میکنیم.

box-shadow

IE9 به صورت پیشفرض از خاصیت box-shadow پشتیبانی میکند. برای IEهای پایینتر هم PIE از syntax استاندارد آن استفاده میکند. برای مثال اگر کد زیر را به قطعه کد بالا اضافه کنید، شاهد box-shadow خواهید بود.

box-shadow: 1px 1px 5px 0 #222;

گرادینت (Gradient)

PIE میتواند گرادینت هم تولید کند که برای IE6 تا 9 کار خواهد کرد. فقط سعی کنید که گرادینت شما تنها دارای دو کد رنگ باشد، یا به عبارتی تنها دو color-stop داشته باشد. البته PIE مشکلاتی در ایجاد گرادینت از بالا به پایین دارد. بنابراین ما در کد زیر گرادینت را از راست به چپ ایجاد کردیم.

-pie-background: linear-gradient(right left, #646464, #EEE);

CSS3 Background

همانطور که احتمالاً میدانید، در CSS3 میتوان چندین تصویر را به عنوان بکگراند قرار داد، که IE9 به صورت پیشفرض از این خاصیت پشتیبانی میکند. میتوانید با استفاده از PIE اینکار را برای IE6 تا 8 انجام دهید.

برای مثال ما در کد زیر یک گرادینت و همچنین یک عکس را به عنوان بکگراند انتخاب کرده ایم.

-pie-background: url(pie.png) no-repeat center center, 
                 linear-gradient(#646464, #EEE);

نتیجه تمام کدهای بالا را در عکس زیر مشاهده میکنید.

CSS3 PIE

CSS3 PIE

نتیجه گیری

PIE از خاصیت‌ border-image هم پشتیبانی میکند، و همچنین چند ویژگی دیگر هم اضافه کرده است که هنوز در نسخه beta قرار دارند و نهایی نشده‌اند.

خب آیا میخواهید با این ویژگی‌ها جان تازه‌ای به سایتتان در مرورگر های IE بدهید؟ به هر حال این کتابخانه برای بعضی از Front End Developerها واقعاً مفید است.

مشاهده دمو (تنها برای IE)

دانلود دمو

CSS3 PIE Document

  • روحانی می‌گه:

    سلام اگه پسوند فایل php باشه کار نمیکنه
    از فایل PIE.php هم استفاده کردم اما کار نکرد.

  • مهرزاد می‌گه:

    مرسی
    خیلی جالب بود


  • نظرات این مطلب بسته است.