اجرای دستورات 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 بازگو شوند اما ممکن است چند نکته از یاد رفته باشد. اگر نکته‌ای مد نظرتان هست که در این مقاله فراموش شده است می‌توانید در قسمت نظرات مطرح کنید تا به این مقاله اضافه شود.
این مقاله به طور اختصاصی فقط برای وبلاگینا نوشته شده است.
 

نویسنده فرهاد عیدی
موارد مرتبط CSS3 html5