پشتیبانی مرورگرهای HTML5

شما می‌توانید مرورگرهای نسخه قدیمی را در پردازش HTML5 کمک کنید.

پشتیبانی مرورگرهای HTML5

همه مرورگرهای مدرن پشتیبانی از HTML5 را دارند.

علاوه بر این، همه مرورگرها، چه قدیمی‌تر یا جدیدتر، به طور خودکار عناصر غیرشناسایی شده را به عنوان عناصر درون‌محتوایی (inline elements) پردازش می‌کنند.

به همین دلیل، می‌توانید به مرورگرهای قدیمی‌تر کمک کنید تا عناصر HTML "ناشناخته" را پردازش کنند.

نکته:حتی می‌توانید به IE6 در دوران سنگی آموزش دهید که چگونه عناصر HTML ناشناخته را پردازش کند.

عناصر HTML5 را به عنوان عناصر بلاک تعریف می‌کند

HTML5 هشت عنصر جدیدمعنایی عناصر HTML. همه آنهابلاکعنصر.

CSS را می‌توانید به عنوان نمایش تنظیم شده به عنوان block، تا از رفتار صحیح در مرورگرهای قدیمی‌تر اطمینان حاصل کنید:

مثال

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

افزودن عناصر جدید به HTML

می‌توانید با استفاده از trick مرورگر به HTML هر عنصر جدیدی اضافه کنید:

این مثال یک عنصر به نام <myHero> عناصر جدید و استایل display برای آن تعریف می‌کند:

مثال

<!DOCTYPE html>
<html>
<head>
  <title>ایجاد یک عنصر HTML</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>
<body>
<h1>heading اول من</h1>
<p>paragraph اول من.</p>
<myHero>My First Hero</myHero>
</body>
</html>

آزمایش کنید

عبارت‌های اضافه شده JavaScript document.createElement("myHero")، تنها برای IE مناسب است.

مشکلات اینترنت اکسپلورر

این راهکار برای تمام عناصر جدید HTML5 قابل استفاده است، اما:

توجه داشته باشید:اینترنت اکسپلورر 8 و نسخه‌های قبلی آن، اجازه نمی‌دهد که به عناصر ناشناخته استایل اضافه شود.

خوشبختانه، Sjoerd Visscher "HTML5 Enabling JavaScript" را ایجاد کرد، "the shiv":

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

این کد یک کامنت است، اما نسخه‌های اولیه IE9 آن را (و آن را درک می‌کند) می‌خواند.

پاسخگویی کامل Shiv

مثال

<!DOCTYPE html>
<html>
<head>
  <title>طراحی HTML5</title>
  <![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<h1>مقاله اولین من</h1>
<article>
لندن پایتخت انگلستان است. 
این بزرگترین شهر در بریتانیا است، 
با یک منطقه شهری بیش از ۱۳ میلیون ساکن.
</article>
</body>
</html>

آزمایش کنید

لینک‌های کد shiv باید در داخل عنصر <head> قرار گیرند، زیرا اینترنت اکسپلورر نیاز دارد که تمام عناصر جدید را قبل از خواندن بشناسد.

ساختار HTML5

مثال

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Skeleton</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
  <h1>HTML5 SKeleton</h1>
</header>
<nav>
<ul>
  <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
  <li><a href="html5_canvas.asp">تصاویر HTML5</a></li>
</ul>
</nav>
<section>
<h1>شهرهای معروف</h1>
<article>
<h2>لندن</h2>
<p>لندن پایتخت شهر انگلستان و پر جمعیت‌ترین شهر در بریتانیا است,</p>
<p>با منطقه شهری بیش از ۱۳ میلیون ساکن.</p>
</article>
<article>
<h2>پاریس</h2>
<p>پاریس پایتخت و پر جمعیت‌ترین شهر فرانسه است.</p>
</article>
<article>
<h2>توکیو</h2>
<p>توکیو پایتخت ژاپن و مرکز منطقه بزرگ توکیو است,</p>
و بزرگترین منطقه شهری پر جمعیت در جهان.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. همه حقوق محفوظ است.</p>
</footer>
</body>
</html>

آزمایش کنید