اجرای دستورات HTML5 و CSS3 در مرورگرهای قدیمی
نوشته فرهاد عیدی • 01 فروردين 1390
همه طراحان وب دوست دارند سایتی که طراحی میکنند, در همهی مرورگرها به درستی نمایش داده شود ولی این کار در عمل کمی دشوار است. سازگار کردن وبسایت طراحی شده با مرورگرهای مختلف، کاری خسته کننده است مخصوصا اگر مرورگر شما Internet Explorer نسخه های 6 و 7 باشد. همچنین به دلیل عدم پشتیبانی مرورگرهای IE6 و IE7 از امکانات و ویژگیهای جدید CSS3 و HTML5، راهکارهایی را برای حل این مشکل در این مرورگرها برایتان پیشنهاد میکنم.
اگر شما یک صفحه وب را با استفاده از CSS3 و HTML5 طراحی کرده و از تصاویر با فرمت PNG در طراحی خود استفاده کردهاید و هم اکنون که حاصل کار خود را در مرورگر IE و یا مرورگرهای قدیمی نظاره میکنید، شاهد عدم سازگاری فاصلهها، عدم اعمال افکتهایی نظیر گوشه های گرد عناصر، Hover نشدن عناصر غیر لینک، عدم وجود سایه و مشکلات بسیاری هستید باید به مطالبی که در اینجا بیان میشود توجه بیشتری داشته باشید.
همانطور که میدانید امکانات جدید CSS3 و HTML5 کمک شایانی به طراحان وب در جهت بالا بردن کیفیت طراحی و کدنویسی راحتتر یک صفحهی وب کرده است اما هنوز مشکلاتی وجود دارد و یکی از آن مشکلات عدم سازگاری مرورگرهای پرکاربردی مثل IE6 و IE7 از این امکانات است که طی چند سال اخیر وبسایتهای زیادی در راستای حل این مشکل اقداماتی انجام دادهاند که در اینجا قصد دارم برخی از مهمترین آنها را بیان کنم.
دستورات اختصاصی مرورگر:
خوشبختانه مرورگرهای شرکت مایکروسافت از دستورات اختصاصی که فقط در همین مرورگرها اجرا میشوند پشتیبانی میکنند. یعنی شما میتوانید یک تکه کد، یک پیغام یا هرچیز دیگری را فقط و فقط به کاربران یک نسخه خاص از مرورگرهای IE نمایش دهید به طوری که افرادی که از سایر مرورگرها سایت را نظاره میکنند قادر به دیدن آنها نباشند. برای این منظور دستورات خود را بین دو کد زیر کپی میکنید:
برای اینکه دستورات و پیغام ها فقط در IE6 مشاهده شوند:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href=" ie6.css" />
<![endif]-->
برای اینکه دستورات و پیغام ها فقط در IE7 مشاهده شوند:
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href=" ie7.css" />
<![endif]-->
Hover کردن عناصر غیر لینک در IE6
همانطور که میدانید در IE6 نمیتوان عناصر غیر لینک را Hover کرد. این دستور ممکن است در ساخت منوهای زیرمنوداری که با استفاده از CSS طراحی میکنید به دردتان بخورد. برای حل این مشکل کافی است فایل iehover.htc که در آخر مطلب پیوست شده است را با تکه کد زیر در یک فایل سبک دهی (Stylesheet) مجزا برای IE6 فراخوانی نمایید.
body {
behavior:url("scripts/iehover.htc");
}
تصحیح نمایش تصاویر با فرمت PNG در IE6 :
برای این کار کافی است مانند دستور قبلی، فایل pngfix.js که در انتهای مطلب پیوست شده است را به به صورت اختصاصی و فقط برای مرورگر IE وارد صفحه نمایید. با تکه کد زیر:
<!--[if IE 6]>
<script defer type="text/javascript" src=" scripts/pngfix.js"></script>
<![endif]-->
البته دقت داشته باشید که این فایل فقط تصاویری که با دستورهای HTML وارد سایت شده اند را تصحیح میکند و برای استفاده از تصاویر PNG در استایل خود میتوانید از کد زیر در داخل فایل سبکدهی مخصوص IE6 استفاده کنید:
.div {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='image.png');
}
همچنین میتوانید اطلاعات بیشتری راجع به این دستورات در اینجا، اینجا و اینجا مشاهده نمایید.
گرد کردن گوشه ها، سایه زنی، چرخش و سایر امکانات CSS3
برای استفاده از امکانات CSS3 در صفحه وب خود و نمایش صحیح این دستورات در IE6 و IE7 میتوانید با فایل css3.htc را با تکه کد زیر به فایل خود پیوست کرده و از آن در صفحه خود استفاده کنید.
.box{
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-moz-box-shadow:10px 10px 20px #000;
-webkit-box-shadow:10px 10px 20px #000;
box-shadow:10px 10px 20px #000;
behavior: url(ie-css3.htc);
}
البته باید توجه داشت که در حال حاضر، قابلیت سایهزنی با این دستور فقط رنگ مشکی با کد #000 را پوشش میدهد. اطلاعات بیشتر را میتوانید در سایت سازندهی این اسکریپت مشاهده کنید.
اجرای تگهای اختصاصی HTML5 در مرورگرهای قدیمی از جمله IE6 و IE7 و همچنین Firefox2
در HTML5 یک سری تگها برای نشانهگذاری بهتر محتوا توسط جستجوگرها و دستهبندی بهتر وبسایت به این زبان اضافه شدهاند که با استفاده از این تگها میتوانید محل دقیق مقالات، سایدبار، سربرگ، پابرگ، لینکها و سایر قسمتهای سایت را از یکدیگر جدا کنید. استفاده از این دستورها تا وقتی که شما هیچ کلاسی به آنها نسبت نداده باشید مشکلی برای شما پیش نمیآورند اما مشکل وقتی به وجود میآید که شما بخواهید آنها را سبکدهی کنید. مرورگرهای جدید چون این تگها را میشناسند پس مشکلی در سبکدهی به آنها ندارند اما مرورگرهای قدیمی مثل IE8 و نسخههای قدیمیتر آن، و حتی نسخههای قدیمی مرورگرهایی نظیر Firefox, Opera, Safari و … نیز قادر به شناسایی این تگها نیستند اما در اینجا ما دستوری داریم که این تگها را به مرورگرهای قدیمی شناسانده و کار شما را در طراحیهایتان راحتتر میکنند. این دستور که یک دستور جاوا است به صورت زیر باید وارد صفحهی شما شود:
<script type="text/javascript">
document.createElement("article");
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("aside");
</script>
چند نکته هرچند کوچک برای سازگاری بیشتر وبسایت شما با مرورگر IE6 :
بعضی مواقع پیش میآید که وقتی شما در سبکدهی یک عنصر از خاصیت float استفاده میکنید فاصلهی عنصر در مرورگر IE6 دو برابر فاصلهی استفاده شده خواهد بود که اصطلاحا به آن Double Margin نیز گفته میشود. برای رفع این مشکل کافیاست هرجا که از دستور float استفاده میکنید، از display: inline; نیز بعد از آن استفاده کنید. این عبارت وقتی از دستور float استفاده میکنید در عمل یک تکه کد اضافه محسوب میشود اما باعث رفع مشکل در مرورگر IE6 نیز میشود.
بعضی مواقع ممکن است فاصلهی دو عنصر از هم به صورت عمودی دو برابر شود. یعنی زمانی که دو عنصر را زیر یکدیگر قرار میدهید، در مرورگر IE6 این فاصله نیز 2برابر شود. برای حل این مشکل در برگه سبکدهی مخصوص مرورگر خود، هرجا که میخواهید این مشکل رفع شود فقط کافی است از کد height: 1%; استفاده کنید.
همیشه سعی کنید از کدهای موسوم به Reset CSS که دستورات پیشفرض همهی مرورگرها را با هم برابر میکند استفاده کنید. فایلهای Reset CSS زیادی در اینترنت یافت میشوند که من از فایل زیر استفاده میکنم:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
در این مقاله سعی شده است تا جایی که ممکن است مشکلات مربوط به مرورگر IE6 بازگو شوند اما ممکن است چند نکته از یاد رفته باشد. اگر نکتهای مد نظرتان هست که در این مقاله فراموش شده است میتوانید در قسمت نظرات مطرح کنید تا به این مقاله اضافه شود.
این مقاله به طور اختصاصی فقط برای وبلاگینا نوشته شده است.
محسن
سلام.
من یه سایت دارم طراحی میکنم که از HTML5 و CSS3 استفاده نکردم.
فقط برای “فرم تماس با ما” از دستورات CCS3 برای گرد کردن گوشه های عناصر input و textarea استفاده کردم که توی نسخه های قبل از IE9 جواب نمیده.
فایل css3.htc رو کجا باید ضمیمه کنم دقیقاً؟
محسن
ضمناً این فایل هارو از کجای مطلب دانلود کنم؟
من لینک دانلودی نمیبینم.
فرهاد عیدی
سلام. لینک وبسایت اصلی در داخل مطلب قرار دارد :
http://fetchak.com/ie-css3/
محسن
سلام.
در رابطه با استفاده از فونتهای فارسی یه سوالی داشتم.
من سایت http://www.font-api.ir به عنوان سورس فونتهای فارسی استفاده میکنم.
اما مشکلی که وجود داره اینه که در بعضی از مرورگر ها فونت نمایش داده نمیشه و فونت جانشین رو که فونت tahoma هست رو نشون میده که البته اینو میشه نادیده گرفت.
اما مشکل بدتر اینه که توی مرورگر فایرفاکس، حروف رو به صورت بزرگ و صورت جدا جدا نشون میده.
مثلا کلمه “پارک ملت” به این صورت نمایش داده میشه —> پ ا رک م ل ت
خود سایت که اصلا هیچ پاسخی نمیده!
شما راه حلی دارید؟
فرهاد عیدی
این مشکل به خاطر استفاده از فونتهاییاست که به درستی تبدیل به فرمت وب نشدهاند. در گوگل درباره تبدیل صحیح فونتها به فرمت تحت وب جستجو کنید به نتیجه خواهید رسید.
درباره مشکل اولتان هم اگر کدها را به درستی وارد کنید مشکلی نخواهد بود. فقط فایرفاکس 8 مشکل کوچکی در این زمینه داشت که در نسخههای بعدی برطرف شده است
حسام
سلام،
آیا کد transition از CSS رو هم میشه توی نسخه های IE8 به پایین با روشهای بالا هم خوان کرد؟
حسام
سوال من در اصل اینه که چطور از خاصیت Timing و Delay از کد transition استفاده کنیم که در نسخه ها IE هم قابل استفاده باشه
فرهاد عیدی
سلام.
هنوز روش قابل توجیهی برای این کار بوجود نیومده و شما باید از جاوا برای این کار استفاده کنید.
سحر
عجب! دگ داشتم فکر می کردم خودشیفته اید.
خب عکساتون کم رنگتر شد.
میلاد
سلام این فایل pngfix.js رو کجا پیوست کردید؟
گرین کارت
بسیار عالی و مفید
melody
سلام
من از وردپرس فارسی استفاده میکنم و قالبم تا ie8 منو های اولیه و ثانویه رو درست نشان میده ولی در ie 9,10,11 منوها یک ثانیه نشان داده میشوند و بعد ناپید میشوند در حالی که این قالب با وردپرس انگلیسی روی ie هیچ مشکلی ندارد!!!
به نظر شما مشکل چیه؟
باتشکر
رجا
html 5 و css3 در یک کلام دو روش کد نویسی مزحک جهت پشتیبانی نشدن توسط مرورگر های گوناگون می باشند
sara
سلام مرسی مدیر جان عالی بود