ترفندی ساده برای بکارگیری CSS3 در مرورگر اینترنت اکسپلورر ۶ ، ۷ و ۸
نگاشته شده در پنجشنبه ۱۴ مرداد ۱۳۸۹ at ۱۱:۳۴ ب.ظ | کلیدواژه ها: css, css3, اینترنت, اینترنت اکسپلورر, طراحی وب
بکارگیری 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 کلیک کنید
مباحثه
ببینید دیگران چه نظری دارند...
دستت بسیار درد نکنه مهندس.
واقعا آی ای واسه وب دیزاینرا یه چیزی تو مایه های سرطانه
بسیار نیکو خواهد شد سرعت کار و همین قضیه انحنا ها.
لپو بیار
محمد رشیدی پاسخ در تاريخ مرداد ۱۴م, ۱۳۸۹ ۲۳:۴۷:
بیا …. )
ببوس
)
ترفند بسیار موجود میباشد :دی
سلام دوست گرامی .
این تنظیماتی که فرمودید ، در همه ی مرورگرها عمل میکند ، الا اینترنت اکسپلورر .
محمد رشیدی پاسخ در تاريخ شهریور ۵م, ۱۳۸۹ ۰۱:۰۱:
سلام جناب سید کریم محمدی ، بنده موضوع رو بررسی کردم.
ببینید اگر فایل رو در کامپیوترتون تست بفرمائید ، یعنی مثلا وارد پوشه شده و فایل رو با مرورگرتون باز کنید ، جواب نخواهد داد!
بلکه باید این موضوع رو روی سرور ( شخصی و لوکال یا سرور غیر لوکال ) تست بفرمائید.
بنده با این آدرس تست کردم که جواب نداد:
file:///G:/server/test/css3/css3.html
اما در این آدرس کامل جواب داد.
http://localhost/test/css3/css3.html
چرا که فایل مورد نظر رو سرور پردازش میکنه.
ممنونم از توجهتون.
موفق و پیروز باشید.
آقا دمت گرم، خیلی حال دادی، خیلی باحالی ، خیلی دنبال همچین چیزی بودم که این اینترنت اکسپلورر مزخرف رو اوکی کنم. خواهشا اگه بازم از این ترفندا داری به ایمیلم بفرست، بازم ممنون
salam
man natoonestam khodam dorost konam mishe shoma be jaye man zahmatesho bekeshid
user va passe hossto betun bedam
ba tashakor