دعم المتصفحات لـ HTML5

يمكنك مساعدة المتصفحات القديمة في معالجة HTML5.

دعم المتصفحات لـ HTML5

جميع المتصفحات الحديثة يدعمون HTML5.

إضافة إلى ذلك، جميع المتصفحات، مهما كان عصرها، ستعالج العناصر غير المعروفة تلقائيًا كعناصر سطرية.

لذلك، يمكنك مساعدة المتصفحات القديمة على التعامل مع العناصر HTML "غير المعروفة".

ملاحظة:يمكنك حتى تعليم Internet Explorer 6 من العصور القديمة كيفية التعامل مع العناصر HTML غير المعروفة.

تعريف عناصر HTML5 كعناصر حجومية

قام HTML5 بتعريف ثمانية عناصر جديدةمفاهيم عناصر HTML. جميعهاعنصرالعناصر.

يمكنك استخدام CSS display تم تعيين الخاصية block، لضمان سلوك صحيح في المتصفحات القديمة:

مثال

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

إضافة عناصر جديدة إلى HTML

يمكنك إضافة أي عنصر جديد إلى HTML باستخدام خدعة المتصفح:

في هذا المثال، تم إضافة عنصر HTML جديد يُدعى <myHero> لإنشاء عنصر جديد، وقم بتحديد نمط عرضه:

مثال

<!DOCTYPE html>
<html>
<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>

تجربة بنفسك

جملة JavaScript المضافة document.createElement("myHero")، ينطبق فقط على IE.

مشكلة Internet Explorer

هذه الطريقة يمكن استخدامها لجميع العناصر الجديدة في HTML5، ولكن:

ملاحظة:Internet Explorer 8 وأحدث إصداراته، لا يسمحون بإضافة أنماط إلى العناصر غير المعروفة.

لحسن الحظ، أنشأ Sjoerd Visscher "HTML5 Enabling JavaScript", "the shiv":

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

الكود أعلاه هو تعليق، ولكن إصدارات Internet Explorer 9 المبكرة ستقرأه (وتفهمه).

الحل الكامل لـ Shiv

مثال

<!DOCTYPE html>
<html>
<head>
  <title>Styling HTML5</title>
  <![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<h1>مقالتي الأولى</h1>
<article>
لندن عاصمة إنجلترا. 
إنها أكبر مدينة في المملكة المتحدة، 
مع منطقة حضرية تزيد عن 13 مليون نسمة.
</article>
</body>
</html>

تجربة بنفسك

روابط شيف يجب أن تكون في علامة <head>، لأن Microsoft Internet Explorer يجب أن يعرف جميع العناصر الجديدة قبل قراءتها.

HTML5 Skeleton

مثال

<!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>مع منطقة حضرية تزيد عن 13 مليون نسمة.</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>

تجربة بنفسك