يمكن للمتصفحات القديمة التعامل مع HTML5 بشكل صحيح.
دعم متصفح HTML5
يتم دعم HTML5 في جميع المتصفحات الحديثة.
بالإضافة إلى ذلك ، تتعامل جميع المتصفحات ، القديمة والجديدة ، مع العناصر غير المعترف بها تلقائيًا كعناصر مضمّنة.
لهذا السبب ، يمكنك “تعليم” المتصفحات القديمة للتعامل مع عناصر HTML “غير المعروفة”.
يمكنك حتى تعليم IE6 (Windows XP 2001) كيفية التعامل مع عناصر HTML غير المعروفة.
تحديد العناصر الدلالية كعناصر كتلة
يحدد HTML5 ثمانية عناصر الدلالية الجديدة . كل هذه العناصر على مستوى الكتلة .
لتأمين السلوك الصحيح في المتصفحات القديمة ، يمكنك تعيين خاصية عرض CSS لعناصر HTML لحظرها :
header, section, footer, aside, nav, main, article, figure {
display: block;
}
إضافة عناصر جديدة إلى HTML
يمكنك أيضًا إضافة عناصر جديدة إلى صفحة HTML باستخدام خدعة المتصفح.
يضيف هذا المثال عنصرًا جديدًا يسمى <myHero>صفحة HTML ، ويحدد نمطًا لها:
<!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")مطلوب بيان JavaScript لإنشاء عنصر جديد في IE 9 والإصدارات السابقة.
مشكلة في برنامج Internet Explorer 8
يمكنك استخدام الحل الموضح أعلاه لجميع عناصر HTML5 الجديدة.
ومع ذلك ، فإن IE8 (والإصدارات الأقدم) لا يسمح بتصميم عناصر مجهولة!
لحسن الحظ ، أنشأ Sjoerd Visscher HTML5Shiv! HTML5Shiv هو أحد حلول JavaScript لتمكين تصميم عناصر HTML5 في إصدارات Internet Explorer قبل الإصدار 9.
ستحتاج إلى HTML5shiv لتوفير التوافق لمتصفحات IE الأقدم من IE 9.
بناء الجملة ل HTML5Shiv
يتم وضع HTML5Shiv داخل <head>.
HTML5Shiv هو ملف جافا سكريبت المشار إليه في <script>.
يجب عليك استخدام HTML5Shiv عند استخدام عناصر HTML5 الجديدة مثل: <article>، <section>، <aside>، <nav>، <footer>.
يمكنك تنزيل أحدث إصدار من HTML5shiv من github أو الرجوع إلى إصدار CDN
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
مثال HTML5Shiv
إذا كنت لا تريد تنزيل وتخزين HTML5Shiv على موقعك ، يمكنك الرجوع إلى الإصدار الموجود على موقع CDN.
يجب وضع البرنامج النصي HTML5Shiv في <head> ، بعد أي أوراق أنماط:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<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>
</body>
</html>
One Comment