এইচটিএমএল৫ ব্রাউজার সাপোর্ট - html5 browser support



পুরানো ব্রাউজারে এইচটিএমএল ৫ এর এলিমেন্টগুলো কিভাবে সমর্থন বা support করে সেটা জানা খুন গুরুত্বপূর্ণ।


ব্রাউজার সাপোর্ট

এইচটিএমএল ৫ সকল আধুনিক ব্রাউজারে সাপোর্ট করে। তাছাড়া, সকল নতুন এবং পুরাতন ব্রাউজার অপরিচিত এলিমেন্টকে ইনলাইন এলিমেন্ট হিসেবে বিবেচনা করে।

এই কারণে পুরাতন ব্রাউজারগুলোতে অপরিচিত এইচটিএমএল এলিমেন্ট সঠিকভাবে কাজ করানো শিখতে হবে।

এইচটিএমএল ৫ এর নতুন এলিমেন্ট গুলো কিভাবে IE6 (Windows XP 2001) এ সমর্থন করে, সেটাও বেশ সহজ।


এইচটিএমএল ৫ এলিমেন্টকে ব্লক-লেভেল এলিমেন্টে পরিবর্তন

এইচটিএমএল ৫ এ ৮টি নতুন সিমেন্টিক বা semantic এইচটিএমএল এলিমেন্ট ডিফাইন করা হয়েছে। এরা সবাই ব্লক-লেভেল এলিমেন্ট।

এই এলিমেন্ট সমূহকে পুরাতন ব্রাউজারে সঠিকভাবে কাজ করানোর জন্য, আপনার সিএসএস display প্রোপার্টিকে block নির্ধারণ করতে হবে।

উদাহরণ

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




নতুন এলিমেন্ট যোগ করা

ব্রাউজার কিছু কৌশল ব্যবহার করে এইচটিএমএল পেজে নতুন এলিমেন্ট যোগ করা যায়।

এই উদাহরণটি <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>


IE8 এবং এর আগের ভার্সন গুলোটে, জাভাস্ক্রিপ্ট স্টেটমেন্ট document.createElement("myHero") ব্যবহার করে কোন নতুন এলিমেন্ট তৈরি করা যায়।


Internet Explorer 8 নিয়ে সমস্যা

IE8 এবং এর পূর্বের ব্রাউজারগুলোতে অপরিচিত এলিমেন্টগুলোর স্টাইল সমর্থন বা support করে না।

সৌভাগ্যক্রমে, Sjoerd Visscher এইচটিএমএল ৫ Shiv! তৈরি করেন।

HTML5 Shiv হল একটি জাভাস্ক্রিপ্ট জাভাস্ক্রীড, যা সংস্করণ 9 এবং এর আগের ইন্টারনেট এক্সপ্লোরারের সংস্করণে HTML5 এলিমেন্টের স্টাইলিং করতে দেয়।

আপনার IE9 এবং এর আগের ভার্সনের IE ব্রাউজারের এইচটিএমএল ৫ সমর্থন বা support করার জন্য HTML5shiv ব্যবহার করতে হবে।


HTML5Shiv সিনট্যাক্স

HTML5Shiv কোডের লিংকটি অবশ্যই <head> ট্যাগেে মাঝে রাখতে হবে, কারণ ব্রাউজারকে অবশ্যই অপরিচিত এলিমেন্টকে পড়ার আগেই তার সম্পর্কে জানতে হবে।

HTML5Shiv হল একটি জাভাস্ক্রিপ্ট ফাইল যেটা <script> ট্যাগ ব্যবহার করে রেফার করা হয়।

<article>, <section>, <aside>, <nav>, <footer> এর মত এইচটিএমএল ৫ এর এলিমেন্ট গুলো যেসকল ওয়েব পেজে ব্যবহার করা হবে, সেখানে HTML5Shiv ব্যবহার করতেহবে।

github থেকে HTML5shiv এর আধুনিক ভার্সন ডাউনলোড করতে ব্রাউজ করুন এই লিঙ্ক

CDN ব্যবহার করতে চাইলে এই লিংক ব্রাউজ করুন বা ব্যবহার করতে হবে : https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

উদাহরণ

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




HTML5Shiv ব্যবহার করে উদাহরণ

HTML5Shiv ডাউনলোড করে সার্ভারে রেখে ব্যবহার করতে না চাইলে, CDN ব্যবহার করা যায়। নিচের উদাহরণে আমরা CDN ব্যবহার করেছি।

HTML5Shiv অবশ্যই <head> এলিমেন্টের মাঝে কোন স্টাইল সিট এর আগেই ব্যবহার করতে হবে।

উদাহরণ

<!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>HTML</h2>
<p>HTML is a core web programming language for web site. HTML means Hyper Text Markup Language.</p>
</article>

<article>
<h2>CSS</h2>
<p>CSS is a styling language for HTML. CSS means Cascading Style Sheet.</p>
</article>

<article>
<h2>JavaScript</h2>
<p> JavaScript is a client side programming language which is used to create interactive & dynamic web peges.</p>
</article>

</section>

</body>
</html>








এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.