آموزش HTML – فصل بیست و ششم: پشتیبانی از 5 HTML

اگر به تازگی آموزش HTML 5 را آغاز کرده اید، بهتر است بدانید این نسخه از HTML در تمامی مرورگر ها پشتیبانی نمی شود. البته که می توانید پشتیبانی از HTML نسخه 5 را با استفاده از روش های خاصی به مرورگر های قدیمی تحمیل کنید. در فصل بیست و ششم آموزش های گام به گام HTML، نحوه پشتیبانی از نسخه 5 اچ تی ام ال در مرورگر های قدیمی را توضیح خواهیم داد.

آموزش HTML – فصل بیست و ششم: پشتیبانی از 5 HTML

نسخه 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 هاست:


ویدیوها و مطالب مشابه