طراحی سایت – HTML5 – پشتیبانی از مرورگرها

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

HTML5 در بیشتر مرورگرهای مدرن پشتیبانی می شود. همچنین همه مرورگرهای قدیمی و جدید به صورت خودکار المان های ناشناخته را به عنوان المان inline در نظر می گیرند.

شما می توانید هنگام طراحی سایت به مرورگرهای قدیمی HTML5 را بیاموزید یا به عبارت دیگر نحوه برخورد این مرورگرهای قدیمی با المان های ناشناخته را تعیین کنید.

شما حتی می توانید به IE5 در (ویندوز XP 2001) بیاموزید که چگونه با المان های ناشناخته رفتار کند.

همه به یاد داریم که در گذشته تست و سازگار سازی طراحی سایت با مرورگر IE6 عذاب آورترین بخش از پروسه طراحی سایت به شمار می رفت.

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

HTML5 هشت المان معنایی جدید معرفی کرده است. همه این المان ها block-level هستند.

المان های HTML همیشه block-level یا inline هستند. یک المان block-level همه فضای المان مادر یا در برگیرنده خود را اشغال می کند. مرورگرها معمولا المان block-level را با یک خط جدید قبل و بعد از آن نمایش می دهند.

برای اینکه اطمینان حاصل کنیم که مرورگرها قدیمی نیز این المان ها را به عنوان block در نظر می گیرند باید مقادیر CSS این المان ها را خودمان مقداردهی کنیم:

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

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

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

<!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")

مشکل IE8

روش بالا را برای تمامی المان های جدید html5 می توان استفاده کرد. البته IE8 و نسخه های پیش از آن امکان تغییر style المان های ناشناخته را نمی دهد. خوشبختانه Sjoerd Visscher یک کتابخانه به نام HTML5Shiv برای حل این مشکل ساخته است. HTML5Shiv یک راه حل javascript برای امکان تغییر ظاهر المان های HTML5 در نسخه های قبل از IE9 است.

در طراحی سایت به HTML5Shiv برای ایجاد سازگاری اینترنت اکسپلورر قبل از نسخه 9 نیاز دارید.

روش استفاده از HTML5Shiv در طراحی سایت

HTML5Shiv در داخل بخش <head> قرار می گیرد.

 HTML5Shiv یک فایل جاوااسکریپت است که باید در داخل تگ <script> آدرس دهی شود.

زمانیکه از تگ های <article> یا <section> یا <aside> یا <nav> یا <footer> در طراحی سایت استفاده می کنید باید از HTML5Shiv نیز بهره ببرید.

آخرین نسخه HTML5Shiv از github قابل دانلود است یا می توانید مستقیما از نسخه CDN آن در مسیر زیر استفاده کنید.

https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

نحوه استفاده از HTML5Shiv به صورت زیر است:

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

مثال استفاده از HTML5Shiv در طراحی سایت

اگر نمی خواهید HTML5Shiv را دانلود کرده و در وب سایت خود قرار دهید می توانید مانند مثال زیر از نسخه CDN استفاده کنید.

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

 

شما ممکن است این را هم بپسندید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *