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

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

پشتیبانی مرورگر از 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://mizfa.com/blog/wp-content/litespeed/localres/aHR0cHM6Ly9vc3MubWF4Y2RuLmNvbS8=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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

راه حل پشتیبانی از HTML5 در مرورگر های قدیمی چیست؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

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

فیلم آموزشی asp.net core 2

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

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

5 نظر

5 پاسخ

  1. جواب سوال:
    تعریف عناصر معنایی به عنوان عنصر بلوکی در css با display:block
    و
    تعریف عناصر جدید به html با استفاده از کدهای جاوااسکریپت

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

    1. سلام علی اکبر، دقیقااا درسته. از display:block استفاده می‌کنیم.

  3. پاسخ سوال :
    با تعریف عناصر معنایی
    مثلا استفاده از تگ های video و audio

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=