ورود به کارتابل مشتریان وب مهراز
پشتیبانی از HTML5
یادگیری HTMLدر حال حاضر به راحتی می توان به مرورگر های قدیمی یاد داد تا بتوانند HTML5 را به درستی نمایش دهند.
پشتیبانی مرورگر ها از HTML5
HTML5 در تمامی مرورگرهای مدرن پیشتیبانی می شود. به علاوه ، تمامی مرورگر ها (چه قدیمی و چه جدید) می توانند عناصر غیر قابل تشخیص را بصورت عناصر درون خطی (inline) درآورند. به همین دلیل می توانید به مرورگر های قدیمی یاد دهید که چگونه عناصر ناشناخته HTML را حل و فصل کنند.
حتی می توانید اینترنت اکسپلورر 6 (ویندوز XP 2001) را برای نمایش عناصر ناشناخته ، آموزش دهید.
تعریف عناصر اسمی به صورت عناصر سطح بلوک
HTML5 تعداد 8 عنصر جدید اسمی را تعریف می کند که همه این عناصر سطح بلوک هستند.
برای تامین رفتار صحیح در مرورگر های قدیمی ، می توانید صفت display را برای بلوک نشان دادن این عناصر تنظیم کنید :
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>
برای ایجاد عنصر جدید در IE9 و ورژن های قبلی ، عبارت جاوا اسکریپت ("document.createElement("myHero مورد نیاز است.
ایرادی در اینترنت اکسپلورر 8
می توان راه حل بالا را برای همه عناصر HTML5 به کار برد ، هرچند IE8 و ورژن های قبل ، استایل دهی به عناصر جدید را پشتیبانی نمی کنند.
خوشبختانه سیدور ویشر (Sjoerd Visscher) راه حلی بر پایه جاوا اسکریپت ارائه داده است به نام HTML5Shiv که با استفاده از آن می توانیم به عناصر HTML5 در ورژن های قبل از IE9 ، استایل های مورد نظر را اضافه کنیم.
پس برای حل مشکل کدهای جدید HTML5 و هماهنگ سازی در اینترنت اسکپلورر 8 و قبل از آن ، به HTML5Shiv نیاز خواهید داشت.
ترکیب کدهای HTML5Shiv
HTML5Shiv یک فایل جاوا اسکریپت است که از طریق تگ <script> ارجاع داده می شود و بین تگ <head> قرار می گیرد.
برای استفاده از عناصر جدید HTML5 باید از HTML5Shiv استفاده کنید. عناصری مانند : <article>, <section>, <aside>, <nav>, <footer>
می توانید آخرین ورژن HTML5shiv را از این لینک دریافت کنید یا به ورژن CDN آن از طریق لینک زیر ارجاع دهید :
https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
<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>
نظر شما
>