پشتیبانی مرورگر html5 چگونه است ؟ مرورگرهای پشتیبان کننده html5

پشتیبانی مرورگر html5 چگونه است؟ و چطور می توانیم تنظیمات مربوطه را انجام دهیم ؟

آموزش HTML 5 درس دوم

پشتیبانی مرورگر html5 : در درس قبل در مورد معرفی html5 یاد گرفتید . الان می توانید مرورگرهای قدیمی تر را برای اینکه به html 5 به درستی دسترسی داشته باشید یاد بگیرید.

پشتیبانی مرورگر html 5

Html5 همه مرورگرهای مدرن را پشتیبانی می کند. به علاوه، همه مرورگرها، قدیمی و جدید، به طور خودکار به عناصر نامشخص به عنوان عناصر درون خطی دسترسی دارند. به همین دلیل، شما می توانید مرورگرهای قدیمی تر را یاد بگیرید تا به عناصر ناشناخته html دسترسی داشته باشید. می توانید حتی IE6(Windows XP 2001) رابرای چگونگی دسترسی به عناصر ناشناخته html یاد بگیرید.

عناصر Semantic را به عنوان عناصر Block تعریف کنید

Html5 8 عنصر Semantic جدید را تعریف می کند. همه این ها عناصر block-level هستند. برای اطمینان از رفتار درست مرورگرهای قدیمی شما می توانید خصوصیات نمایش CSS را برای عناصر html به block را تعریف کنید:

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

[/php]

اضافه کردن عناصر جدید به html

شما می توانید عناصر جدید را به یک صفحه html با یک حقه مرورگری اضافه کنید. این مثال یک عنصر جدید که برای یک صفحه html است و یک استایل برای آن تعریف می کند، <myHero> نامیده می شود :

مثال :

[php]
<!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>

[/php]

document.createElement(“myHero”) نیاز دارد که یک عنصر جدید در IE9 و مرورگرهای قدیمی تر ایجاد کند.

مشکل Internet Explorer 8

شما می توانید از توصیف راه حل ها در بالا برای عناصر جدید html 5 استفاده کنید. با این حال IE8 (و مرورگرهای قدیمی تر) اجازه نمی دهند که استایل آنها با عناصر ناشناخته باشد!

خوشبختانه، Sjoerd Visscher ، HTML5Shiv را ایجاد کرد! HTML5Shiv یک راه حل برای جاوا اسکریپت است تا استایل عناصر html 5 را در نسخه های اینترنت اکسپلورر تا نسخه 9 را فعال می کند. شما به HTML5Shiv نیاز خواهید داشت تا با مرورگرهای اینترنت اکسپلورر قدیمی تر تا اینترنت اکسپلورر 9 سازگاری ایجاد شود.

Syntax For HTML5Shiv

HTML5Shiv درون تگ <head> قرار می گیرد. HTML5Shiv یک فایل javascript است که در تگ <script> اشاره شده است. شما باید هنگام استفاده از عناصر HTML5 جدید مانند <article>، <section>، <side>، <nav>، <footer> از HTML5Shiv استفاده کنید.

[php]
<head>
<!–[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]–>
</head>

[/php]

مثال HTML5Shiv

اگر نمی خواهید HTML5Shiv را در روی سایت خود دانلود و ذخیره کنید، شما می توانید نسخه را برای پیدا کردن سایت CDN ارجاع دهید. اسکریپت HTML5Shiv باید درون عنصر <head> بعد از هر عنصر stylesheets قرار گیرد:

مثال :

[php]
<!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>

<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>

[/php]