نسخه 5 از زبان HTML در تمامی مرورگر ها پشتیبانی نمی شود. البته شما می توانید به مرورگر های قدیمی تر یاد بدهید که با اچ تی ام ال 5 به درستی کنار بیایند.
پشتیبانی مرورگرها از اچ تی ام ال 5
اچ تی ام ال پنج در تمام مرورگر های جدید پشتیبانی می شود.
اضافه بر این، تمام مرورگر ها چه جدید چه قدیمی به صورت خودکار با المان های ناشناخته به عنوان المان های inline کنار می آیند. به این خاطر شما میتوانید به مرورگر های قدیمی تر یاد بدهید که چگونه با المان های اچ تی ام ال ناشناخته کنار بیایند.
شما حتی می توانید به اینترنت اکپلورر 6 در ویندوز ایکس پی 2001 یاد دهید که چگونه با المان های اچ تی ام ال ناشناخته کنار بیاید.
تعریف المان های Semantic به عنوان المان های Block
اچ تی ام ال 5، هشت عدد المان معنایی یا به انگلیسی Semantic جدید را تعریف می کند. همه این ها المان های block-level هستند. برای مطمئن شدن از رفتار صحیح در مرورگر های قدیمی تر، شما می توانید مولفه display در سی اس اس را برای این المان های اچ تی ام ال بر روی block تنظیم کنید، مانند کد زیر که در css قرار می گیرد:
اضافه کردن المان های جدید به اچ تی ام ال
شما همچنین می توانید المان های جدید را به یک صفحه ی اچ تی ام ال با یک ترفند مرورگر اضافه کنید. این مثال یک المان جدید به نام <myhero>
به صفحه اچ تی ام ال اضافه می کند و یک استایل برای آن تعریف می کند:
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>A Heading</h1>
<myHero>My Hero Element</myHero>
</body>
</html>
عبارت جاوا اسکریپت document.createElement(“myhero”) برای ساختن المان جدید در اینترنت اکسپلورر 9 و قدیمی تر لازم است.
مشکل اینترنت اکسپلورر 8
شما می توانستید روشی که در بالا توضیح داده شد را برای تمام المان های جدید اچ تی ام ال 5 استفاده کنید. به هرحال اینترنت اکسپلورر 8 و قدیمی تر استایل دادن به المان های ناشناخته را مجاز نمی دانند! با تشکر از شخصی به نام “جورد ویشر” که ابزار جاوا اسکریپتی به نام html5shiv را ساخت، شما می توانید اکنون این مشکل را در مرورگر های قدیمی به سادگی حل کنید.
Html5shiv یک ابزار جاوا اسکریپت است تا سبک بندی المان های اچ تی ام ال 5 را برای نسخه های قبل از 9 اینترنت اکسپلورر فعال کند. شما به html5shiv نیاز دارید تا سازگاری با مرورگر های قدیمی تر از اینترنت اکسپلورر 9 را انجام دهید.
سینتکس html5shiv
Html5shiv در میان تگ <head> قرار می گیرد. Html5shiv یک فایل جاوا اسکریپت است که در یک تگ <script> رجوع داده می شود. شما باید از html5shiv هنگام با استفاده از المان های جدید اچ تی ام ال 5 استفاده کنید المان های زیر به عنوان مثال نیاز به این فایل دارند:
<article>
, <section>
, <aside>
, <nav>
, <footer>
شما میتوانید آخرین نسخه html5shiv را از github دانلود کرده یا به نسخه cdn آن مانند مثال زیر رجوع بدهید:
مثال از یک صفحه با استفاده از html5shiv
Html5shiv باید در المان head جای بگیرد، بهترین مکان آن بعد از همه stylesheet هاست:
Famous Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital and most populous city of France.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.