يمكنك تعليم المتصفحات القديمة للتعامل مع HTML5 بشكل صحيح.
دعم متصفح HTML5
ويدعم HTML5 في جميع المتصفحات الحديثة.
وبالإضافة إلى ذلك، جميع المتصفحات، القديمة والجديدة، تلقائيا التعامل مع العناصر غير المعترف بها من العناصر المضمنة.
وبسبب هذا، يمكنك "teach" المتصفحات القديمة للتعامل مع "unknown" عناصر HTML.
حتى يمكنك تعليم IE6 (Windows XP 2001) كيفية التعامل مع عناصر HTML غير معروفة.
تحديد HTML5 عناصر كما بلوك عناصر
تعرف HTML5 ثمانية عناصر HTML الدلالات الجديدة. كل هذه العناصر على مستوى الكتلة.
لضمان السلوك الصحيح في المتصفحات القديمة، يمكنك تعيين الخاصية عرض CSS لمنع:
header, section, footer, aside, nav, main, article, figure {
display: block;
}إضافة عناصر جديدة إلى HTML
يمكنك أيضا إضافة أي عنصر جديد إلى HTML مع خدعة المتصفح.
يضيف هذا المثال عنصر جديد يسمى <myHero> إلى HTML، ويحدد أسلوب عرض له:
مثال
<!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> انها محاولة لنفسك » البيان جافا سكريبت document. createElement("myHero") document. createElement("myHero") يضاف، فقط لإرضاء IE.
مشكلة مع إنترنت إكسبلورر
هل يمكن استخدام الحل هو موضح أعلاه، لجميع عناصر HTML5 جديدة، ولكن:
إنترنت إكسبلورر 8 وفي وقت سابق، لا يسمح التصميم من عناصر مجهولة.
الحمد لله، وخلق سجورد فيستشر على "HTML5 Enabling JavaScript" ، " the shiv ":
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->رمز أعلاه هو التعليق، ولكن الإصدارات السابقة لIE9 قراءتها (and understand it) .
الكامل 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>My First Article</h1>
<article>
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.
</article>
</body>
</html> انها محاولة لنفسك » الارتباط إلى shiv يجب وضع شفرة في <head> عنصر، لأن Internet Explorer يحتاج إلى معرفة جميع عناصر جديدة قبل قراءتها.
و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>
<![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 Graphics</a></li>
</ul>
</nav>
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>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.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</section>
<footer>
<p>© 2014 w3ii. All rights reserved.</p>
</footer>
</body>
</html> انها محاولة لنفسك »