ترفندی ساده برای بکارگیری CSS3 در مرورگر اینترنت اکسپلورر ۶ ، ۷ و ۸

CSS3 & IE 6 , 7 , 8

بکارگیری CSS3 در اینترنت اکسپلورهای ۶ ، ۷ و ۸

سلام.

مطمئنا میدونید که در طراحی وبسایت ، باید رابط گرافیکی یا به اصطلاح User Interface طوری طراحی بشه که توی همه مرورگرها از جمله اینترنت اکسپلورر ( نسخه های مختلف : ۶ ، ۷ ، ۸ ) ، فایرفاکس ، اُپرا ، کروم و …. شبیه به هم دیده بشه! ممکنه تاحالا به سایتهایی برخورد کرده باشید که ظاهری به هم ریخته داشتند. این موضوع دلیلش همین عدم همخوانی با مرورگر شما بوده. بگذریم… همه ما میدونیم که اینترنت اکسپلورر اصلا استانداردهای جدید وب رو پشتیبانی نمیکنه و CSS3 رو میتونم بگم به هیچ وجه! لذا امروز یک ترفند بهتون یاد میدم تا بتونید با اون ، راحت تر کد بنویسید و سرعت طراحی سایتتون بالا بره. آخه قبلا باید یکبار سایت رو برا همه مرورگرا طراحی میکردید ، بعد برای خانواده محترم اینترنت اکسپلورر هم ۳ بار! یعنی برا هر نسخه یکبار!قبلا برای ایجاد انحنای گوشه های یک کادر ، از کد زیر استفاده میکردیم که فایرفاکس و اپرا و … پشتیبانیش میکردن.

.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers */

-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers */
}

خب حالا برای اینکه به اینترنت اکسپلورر بفهمونیم که چطوری گوشه‌ی کادرها رو انحنا بده و یا مثلا به یک نوشته یا کادر سایه بده ، از یک فایل به نام activecc3-ie با پسوند htc استفاده میکنیم. این فایل به زبان VML نوشته شده که باید به روش زیر ، این فایل رو توی کدهای CSS فراخوانی کنیم.

.box {
behavior: url(activecc3-ie.htc);
}

این کد ، باید در آخرین خطوط کدهای CSS شما برای هر کلاس یا آی دی آورده بشه. مثال بالا رو در زیر هم آوردم و البته اینبار ، ترفندمون رو هم توش قرار دادم:

.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using activecc3-ie */

behavior: url(activecc3-ie.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

برای اجرای هرچه بهتر این ترفند ، فایل activecc3-ie.htc رو در روت سایتتون قرار بدید. یا اینکه اگر از آدرسهای مناسب موتورهای جستجو استفاده میکنید ، ادرس دقیق فایل رو بیارید. یعنی مثلا به جای

activecc3-ie.htc

از
http://www.activemind.ir/includes/css/activecc3-ie.htc

استفاده کنید.

برای دریافت فایل activecc3-ie.htc کلیک کنید
تمرکز موضوع: ,,,, نوشته شده در: ۱۴ مرداد ۱۳۸۹

درباره محمد رشیدی

من یک کارآفرین خلاق و جوان هستم. تحصیلات، تخصص و فعالیتم در حوزه وب و تجارت الکترونیک است. عاشقانه و با تمام وجود در این زمنیه تلاش و فعالیت میکنم. تفکری بلندمدت دارم. به کیفیت به شدت اهمیت میدهم. به عنوان یک مخاطب به موسیقی هم خیلی علاقه دارم. در ابعاد مختلف وب، برنامه نویسی حرفه‌ای میکنم و در سالهای اخیر، بخش بسیار زیادی از مطالعاتم در زمینه کسب و کار، داده کاوی، وب اپلیکیشن، طراحی رابط کاربری، کاربردپذیری و تجربه کاربر قرار گرفته است.
نظرات و دیدگاهها (6)
  1. دستت بسیار درد نکنه مهندس.
    واقعا آی ای واسه وب دیزاینرا یه چیزی تو مایه های سرطانه
    بسیار نیکو خواهد شد سرعت کار و همین قضیه انحنا ها.
    لپو بیار

    • سلام جناب سید کریم محمدی ، بنده موضوع رو بررسی کردم.

      ببینید اگر فایل رو در کامپیوترتون تست بفرمائید ، یعنی مثلا وارد پوشه شده و فایل رو با مرورگرتون باز کنید ، جواب نخواهد داد!

      بلکه باید این موضوع رو روی سرور ( شخصی و لوکال یا سرور غیر لوکال ) تست بفرمائید.

      بنده با این آدرس تست کردم که جواب نداد:
      file:///G:/server/test/css3/css3.html

      اما در این آدرس کامل جواب داد.
      http://localhost/test/css3/css3.html
      چرا که فایل مورد نظر رو سرور پردازش میکنه.

      ممنونم از توجهتون.
      موفق و پیروز باشید.

  2. آقا دمت گرم‌، خیلی حال دادی، خیلی باحالی ، خیلی دنبال همچین چیزی بودم که این اینترنت اکسپلورر مزخرف رو اوکی کنم. خواهشا اگه بازم از این ترفندا داری به ایمیلم بفرست، بازم ممنون

پاسخ دهید

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


*

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>