پشتیبانی HTML5 در مرورگرها
قبل از آنکه ادامه دهیم لازم است صحبتی در رابطه با پشتیبانی HTML5 در بین مرورگرهای مختلف داشته باشیم. به نظر می رسد که هر مرورگر برخوردی متفاوت با HTML5 دارد. مشکل از اینجاست که در زمان نوشتن و جمع آوری کتاب حاضر، HTML5 هنوز در مراحل جمع آوری و ساخت بوده است و هر مرورگری بر اساس درک و شناختش از آن تگ های گوناگون را به نحوی متفاوت رندر می کنند.
به همین دلیل به نظر می رسد آوردن فهرستی از مرورگرهای مختلف و توضیح نحوه و اندازه پشتیبانی HTML5 آن ها کاری درست نباشد، زیرا روز شمار در رابطه با این مبحث همه چیز تغییر می کند. پس تا اینجا دانستیم برخورد مرورگرهای گوناگون با HTML5 متفاوت است. در آغاز از Internet Explorer شروع می کنیم.
اصلاح پشتیبانی IE
پیش از عرضه IE9، برنامه Internet Explorer هیچ پشتیبانی برای تگ های جدید HTML5 ارائه نمی داد (و تنها تگ های مهم و کاربردی و معرف HTML5 را پشتیبانی می کرد).
گرچه راه هایی برای تصحیح نحوه برخورد نسخه های IE با HTML5 وجود دارد، حداقل در راستای درست فهمیدن Style هایی که در CSS به آن ها داده شده است. مشکل اینجاست که نسخه های قدیمی تر نمی دانستند که برای مثال یک تگِ header چیست:
- یک تگِ Block-level است؟
- آیا نیاز به padding یا margin دارد؟
- متن درون آن چگونه باید به نمایش در آید؟
- می توان آن را درون یک فهرست قرار داد؟
- می توان آن را دور یک table قرار داد؟
IE8 و نسخه های پیشین آن اصلاً نمی دانند که چگونه باید با آن برخورد داشته باشند! اگر یک style ساده هم در CSS به آن اختصاص دهیم هم نمی توانند آن را اعمال کنند:
header {background:red; padding:10px; color:white;}
با این وجود راهی هست که می توان با استفاده از آن تگ header و باقی تگ های HTML5 را به همراه قابلیت style دهی آن ها به IE فهماند. می توان از رِمی شارپ برای انتشار این script فعال کننده HTML5 در IE تشکر کرد:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
می توانید این script را بین تگ های باز و بسته header کپی کرده و نتیجه را مشاهده کنید. کاری که این script انجام می دهد به شرح زیر است:
- در آغاز این script تشخیص می دهد که آیا اجرای آن نیاز هست یا خیر. در نمونه بالا می بینید که نسخه های قدیمی تر از IE9 را فراخوانی می کند و اگر نسخه ای قدیمی تر از IE9 بود script دانلود می شود.
- این script در سرور گوگل Host می شود. البته شما می توانید آن را دانلود کرده و خودتان Host کنید اما بهتر است که این کار را نکنید به این دلیل که سرعت سرور گوگل در رساندن این script به کاربر قطعاً بیشتر است. نکته مثبت دیگر این است که ممکن است سایت های زیاد دیگری این script را در سایت خود لینک کرده باشند و کاربر سایت شما به احتمال زیاد آن را در cache مرورگر خود داشته و نیازی به دانلود دوباره آن ندارد.
- درون این script نسخه های قدیمی تر IE از تگِ جدید HTML5آگاه می شوند.
- با مشاهده این Script به طور خودکار در تمامی سایت آیتم هایی برای فهماندن به مرورگر ساخته شده تا تگِ جدید HTML5 را بشناسند. شما قادر به دیدن این آیتم ها نیستید اما خیالتان راحت باشد که به هنگام style دادن به تگ هایتان مشکلی به وجود نخواهد آمد.
اضافه کردن این بخش به کار بسیار ساده است:
- فایل index.html را در برنامه ویرایش متن خود باز کنید.
- دقیقاً بعد از <meta> و پیش از <link> کد فعال کننده HTML5 را وارد کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bubble Under - The diving club for the south-west UK
</title>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/➥
html5.js"></script>
<![endif]-->
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
- این کار را با باقی صفحات سایت انجام دهید.
اگر صفحه را رفرش کنید و خواهید دید که هیچ تغییری به وجود نمی آید، تنها زمانی تغییرات را خواهید دید که از تگ HTML5 درون سایت خود استفاده کنید. برای سایر مرورگرهای غیر از IE این Script نادیده گرفته خواهد شد.
