چگونه می‌توانیم در مرورگر های قدیمی از 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>
پایان ترم
[box type=”info” class=”question-from-users” width=””]راه حل پشتیبانی از HTML5 در مرورگر های قدیمی چیست؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله با نحوه ایجاد پشتیبانی HTML5 با مرورگر‌های قدیمی آشنا شدیم.
امیدوارم استفاده کافی را از این مقاله برده باشید و به صورت کامل مفهوم را متوجه شده باشید.
اگر سوال، پیشنهاد یا انتقادی داشتید لطفا حتما بپرسید و منم قول میدم که سریعا جواب بدم.
تا مقاله بعدی …
5 پاسخ
جواب سوال:
تعریف عناصر معنایی به عنوان عنصر بلوکی در css با display:block
و
تعریف عناصر جدید به html با استفاده از کدهای جاوااسکریپت
از خاصیت display از طریق css برای تبدیل به بلوک استفاده کنیم
سلام علی اکبر، دقیقااا درسته. از display:block استفاده می‌کنیم.
پاسخ سوال :
با تعریف عناصر معنایی
مثلا استفاده از تگ های video و audio
سلام محمد، درسته ممنونم.