021-20483015

پشتیبانی از HTML5

در حال حاضر به راحتی می توان به مرورگر های قدیمی یاد داد تا بتوانند HTML5 را به درستی نمایش دهند.

 

پشتیبانی مرورگر ها از HTML5

HTML5 در تمامی مرورگرهای مدرن پیشتیبانی می شود. به علاوه ، تمامی مرورگر ها (چه قدیمی و چه جدید) می توانند عناصر غیر قابل تشخیص را بصورت عناصر درون خطی (inline) درآورند. به همین دلیل می توانید به مرورگر های قدیمی یاد دهید که چگونه عناصر ناشناخته HTML را حل و فصل کنند.

 

حتی می توانید اینترنت اکسپلورر 6 (ویندوز XP 2001) را برای نمایش عناصر ناشناخته ، آموزش دهید.

 

تعریف عناصر اسمی به صورت عناصر سطح بلوک

HTML5 تعداد 8 عنصر جدید اسمی را تعریف می کند که همه این عناصر سطح بلوک هستند.

برای تامین رفتار صحیح در مرورگر های قدیمی ، می توانید صفت display را برای بلوک نشان دادن این عناصر تنظیم کنید :

پشتیبانی از HTML5
header, section, footer, aside, nav, main, article, figure {
    display: block;
}
مشاهده مثال

 

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

همچنین می توانید با یک ترفند مرورگر ، عناصر جدید را به یک صفحه HTML اضافه کنید. 

مثال زیر یک عنصر جدید به نام <myHero> به یک صفحه HTML اضافه و استایلی برای آن تعریف می کند :

 

مثال : 

عناصر جدید HTML5
 <!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

 

ترکیب کد HTML5Shive
 <head>
  <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
  <![endif]-->
</head> 
مشاهده مثال

 

 مثالی برای HTML5Shiv

اگر نمی خواهید HTML5Shiv را دانلود کرده و در وب سایت خود ذخیره کنید ، باید به ورژن موجود در سایت CDN ارجاع دهید.

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

 

مثال : 

HTML5Shiv
 <!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> 
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط