آموزش طراحی سایتآموزش HTML

آشنایی با پشتیبانی مرورگر در HTML5 در HTML

رفع مشکل HTML5 در مرورگر های مختلف

چگونه می‌توانیم در مرورگر های قدیمی از HTML5 استفاده کنیم؟ چگونه می‌توانیم مشکل HTML5 را در مرورگر‌های قدیمی حل کنیم؟ آشنایی با پشتیبانی مرورگر ها از HTML5 موضوع اصلی مقاله امروز ماست. پس با ما همراه باشید.

پشتیبانی مرورگر در html5

شما می توانید به مرورگر‌های قدیمی بیاموزید چگونه به خوبی از عهده html5 برآیند.

نسخه جدید HTML یعنی HTML5 بر روی تمام مرورگر های مدرن امروزی پشتیبانی می شود، ما مقاله ای در رابطه با آشنایی با HTML5 هم نوشتیم که اگر دوست داشتید می‌تونید آن را هم بخوانید و با این نسخه آشنا بشید.

به علاوه، همه مرورگر ها چه قدیمی و چه جدید به صورت خودکار عناصر شناخته نشده را به عنوان عناصر برخط مدیریت می کنند.

به خاطر این مسئله، شما می توانید به مرورگر های قدیمی بیاموزید چگونه یک عنصر ناشناخته را مدیریت کنند.

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

نسخه html5 هشت عنصر معنایی جدید تعریف شده اند. همه عناصر جدید، عناصر بلوکی هستند.

برای ساخت یک رفتار ایمن در مرورگر های قدیمی، می توانید یک خاصیت display از طریق css برای تبدیل به بلوک  استفاده کنید.

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") برای ساخت یک عنصر جدید در مرورگر IE9 و قبل آن استفاده می شود.

مشکلات مرورگر اینترنت اکسپلورر 8

شما می توانید برای این مشکل از راه حل بالا برای تمام عناصر html5 استفاده کنید.

به هر حال IE8 و نسخه های قبل از آن اجازه استایل دهی برای عناصر ناشناس را نمی دهد.

با تشکر از sjored visscher که html5shiv را خلق کرد. Html5shiv یک راه حل جاوا اسکریپتی است که اجازه استایل دهی برای عناصر html5 در نسخه IE9 و قبل از آن را می دهد.

قواعد html5shiv

Html5shiv در داخل تگ <head> قرار می گیرد.

Html5shiv یک فایل جاوا اسکریپت است که در تگ <script> مرجع می شود.

شما باید از این اسکریپت زمانی استفاده کنید که قصد استفاده از عناصر html5 مانند <article> ، <section> ، <aside> ، <nav>  ، <footer> را دارید.

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

مثال html5shiv

اگر نمی خواهید این اسکریپت را دانلود و آن را در وبسایتتان ذخیره کنید می توانید از نسخه موجود در وبسایت CDNJS استفاده کنید.

اسکریپت html5shiv باید در تگ <head> و پس از همه stylesheet موجود تعریف شود.

<!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>
مثال html5shiv
مثال html5shiv

نتیجه گیری

در این مقاله با نحوه ایجاد پشتیبانی HTML5 با مرورگر‌های قدیمی آشنا شدیم.

امیدوارم استفاده کافی را از این مقاله برده باشید و به صورت کامل مفهوم را متوجه شده باشید.

اگر سوال، پیشنهاد یا انتقادی داشتید لطفا حتما بپرسید و منم قول میدم که سریعا جواب بدم.

تا مقاله بعدی …

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

پاسخی بگذارید

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


حداکثر حجم فایل برای آپلود: 1 MB.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر