CSS3 در Internet Explorer

مرداد ۲۵, ۱۳۹۱ توسط : سعید

یکی از بزرگترین مشکلات طراحان سایت مروگر اینترنت اکسپلورر است. تا قبل از نسخه ۹ این مرورگر از CSS3 پشتیبانی نمیکند و به همین دلیل طراحان رو در طراحی سایتهایی با امکانات css 3 دچار مشکل میشوند.

در این مقاله سعی میکنم به معرفی ابزاری بپردازم که بتونیم از امکانات css3 مثل border-radius یا box-shadow در اینترنت اکسپلورر استفاده کنیم.

برای اینکه بتونبم از امکانات css3 در مرورگر اینترنت اکسپلورر استفاده کنیم ابزارهایی تولید شدند. یکی از بهترین ابزارهای موجود میشه از کتابخانه  CSS3PIE  نام برد. این کتابخانه با حجم کم امکانات زیادی رو در اختیار ما میذارخ که تعدادی از این امکانات رو براتون معرفی میکنم.

ابتدا کتابخانه CSS3Pie رو از لینک زیر دانلود کنید.

دانلود CSS3Pie

حالا یک فایل html بسازید :

<div class="main">

آموزش حرفه ای PHP

</div>

 

کد css مربوط به کلاس main رو هم مینویسیم:

.main
{
    border: 1px solid #999; 
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;  
    border-radius: 10px;
}

 

خب در بالا میبینید که از border-radius استفاده کردیم اما همینطور که میدونید این قابلیت در مرورگر IE شناسایی نمیشه.

برای اینکه در IE هم بتونیم گوشه های گرد داشته باشیم خط زیر رو به استایل .main اضافه میکنیم :

behavior: url(path/to/PIE.htc);

داخل بسته ای که دانلود کردید یک فایل با نام PIE.htc وجود داره. برای اینکه بتونیم استایل های مربوط به css3 رو در اینترنت اکسپلورر استفاده کنیم باید در استایل مورد نظرمون خط :

 behavior: url(path/to/PIE.htc);

رو حتما ذکز کنیم.
دقت کنید که آدرس فایل PIE.htc باید به صورت کامل ذکر بشه.در آدرس دهی این فایل نباید از آدرس نسبی استفاده کرد و فقط باید آدرس دهی به صورت اینترنتی باشه مثلا :

 behavior: url(http://phpro.ir/css/PIE.htc);

بعد از اضافه کردن کد بالا به کلاس .main صفحه html ساخته شده رو در اینترنت اکسپلورر چک کنید.

همینطور که میبینید شما یک div با گوشه های گرد دارید!

امکانات CSS3Pie

CSS3Pie از قابلیتهای زیر هم پشتیبانی میکنه :

برای استفاده از امکاناتی مثل استفاده از چند تصویر زمینه یا gradiant به صورت بالا نباید عمل کنید. برای هر کدوم از این امکانات باید دستور خاص خودش رو بنویسید.

مثلا برای استفاده از Gradiant باید از دستور -pie-background استفاده بشه : 

#myElement {
    background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
    background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
}

برای آموزش هر یک از نکات زیر میتونید از سایت CSS3Pie  استفاده کنید.

شما هم اگر ابزار خاصی رو برای رفع این مشکل میشناسید معرفی کنید.

موفق باشید

بازدید : ۶۸۵۴

مرداد ۲۵, ۱۳۹۱ @ ۹:۱۸ ب.ظ

مرسی مشکل من حل شد

پاسخ دادن
ایوب سیستم
مرداد ۲۶, ۱۳۹۱ @ ۶:۳۴ ق.ظ

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

پاسخ دادن
سعيد
مرداد ۲۶, ۱۳۹۱ @ ۸:۰۱ ق.ظ

ممنون. فقط مشکلی که دارد CPU Usage بالا است اگر تعداد المان‌های صفحه زیاد باشد.

پاسخ دادن
    سعید
    مرداد ۲۶, ۱۳۹۱ @ ۱۰:۴۱ ق.ظ

    چه جالب این مورد رو نمیدونستم.
    آیا ابزار دیگه ای هست که این مشکل رو نداشته باشه؟

    پاسخ دادن
احسان
مرداد ۲۶, ۱۳۹۱ @ ۱۰:۲۲ ق.ظ

درود.
یه اشتباه تایپی کوچولو تو عنوان مطلب هست: Internet Explorer
مطلب بسیار جالبی بود. خیلی ممنون.

پاسخ دادن
    سعید
    مرداد ۲۶, ۱۳۹۱ @ ۱۰:۴۰ ق.ظ

    ممنون از تذکرتون
    تصحیح شد.

    پاسخ دادن
مصطفی
مرداد ۲۶, ۱۳۹۱ @ ۲:۰۸ ب.ظ

ممنون سعید جان به درد ما هم خورد

پاسخ دادن
شهریور ۲, ۱۳۹۱ @ ۱۰:۰۳ ب.ظ

سلام.
واقعا بعضی از طراحان مبتدی از ie متنفر میشوند.
اصلا فکر نمیکردم همچین کاری امکان پذیر باشه.
از این مقاله متشکر.
ممنون میشم منبع رو هم بفرمایید. تا ماهم بتونیم بیشتر از این نوع مقالات استفاده کنیم.
باز هم ممنونم.
موفق و سربلند باشید.

پاسخ دادن
    Iman
    شهریور ۱۰, ۱۳۹۱ @ ۲:۱۴ ب.ظ

    سلام.من چندسالی هست که بااین کدهایcss برای شناساسوندن کدها به مرورگرهای مختلف آشنایی دارم،وکاربسیارساده ای هست اما فقط باعث این میشه که صفحات سایتمون حجیم بشه بعضی اوقات باید از کدهای اضافی برای بالابردن سرعت صرف نظر کرد!دلیل برمبتدی بودن طراح “نیز نیست” میشه باhtaccess نیز قدری این کار رو برای قطع دسترسی مرورگرها به id های جاوا انجام داد.
    یک طراح موفق وحرفه ای کسی هست که برحسب نیاز طراحی ها رو انجام دهد!
    واستفاده نکردن از این کدها هیچ دلیلی برحرفه ای بودن ونبودن ندارد،واتفاق نظر طراحان حرفه ای که صفحات استاندارد استفاده میکنن همین استفاده نکردن از کدهای پسوندcssهست
    که معمولا ازتگ برای شناسایی اینترنت اکسپلورر استفاده میکنن وصفحات خود رو کم حجم وسئو طراحی میکنن واز این کدها دریک فایل css دیگر درصورت نیازدسترسی به اینترنت اکسپلورر میگذارند.که بهترین روش نیز همین هست تااز استانداردجهانی “w3” صفحات استفاده کنند زیراکدها درمرورگرهای دیگر ناخوانا میشوند.وباعث افزایش حجم میشود
    موفق وسربلندباشید
    یاحق

    پاسخ دادن
      دی ۱۵, ۱۳۹۲ @ ۸:۲۳ ب.ظ

      merci iman jan az nazaret manzore kolit ine ke in cod haro ghatiye css asli nakonim va to ye file dg bezarim va begim age karbar az ie esteffade kard in css ro bekhon?

      پاسخ دادن
مادیار
شهریور ۱۲, ۱۳۹۱ @ ۷:۰۲ ب.ظ

سلام.
واقعا اسکریپت جالبیه !
ولیه خیلی جایه کار داره!
یه بار خواستم ازش استفاده کنم که کلی باگ داشت و نتونستم از استفاده کنم.
gradient خوب بود. ولی box-shadow مشکل داشت!
در کل مقاله جالبی بود . تشکر

پاسخ دادن
شهریور ۲۴, ۱۳۹۱ @ ۱۲:۴۲ ب.ظ

IE رو هم به خاک مالیدیم! 😀

پاسخ دادن
  • Pingback: آموزش پیوست فونت در CSS3 | PHP Professional

  • پیمان
    آبان ۱, ۱۳۹۱ @ ۲:۵۵ ق.ظ

    خاصیت box-shadow با ie8 مشکل داره وصفحه به شدت کند میشه.
    طوری که افکت های جاوا اسکریپتی منوها اصلا عمل نمیکنن.
    چه راه حلی برای این مشکل دارید؟

    پاسخ دادن
    اسفند ۱۰, ۱۳۹۱ @ ۱۰:۰۴ ب.ظ

    خیلی تکید.

    پاسخ دادن
    مرداد ۹, ۱۳۹۲ @ ۲:۲۳ ب.ظ

    این ابزار برایIE9 هست فقط یا در نسخه های قدیمی تر هم مثل ۷ و ۸ کار میکنه؟!

    پاسخ دادن

    پاسخ دهید

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


    *