X

X

X

HTML5 ব্রাউজার সাপোর্ট ( Browser Support )


পুরোনো ব্রাউজারগুলো সাধারণত HTML5 এর নতুন ইলামেন্টগুলোকে সাপোর্ট করে না। এসব ব্রাউজারে নতুন ইলামেন্টগুলোকে সঠিকভাবে উপস্থাপণের জন্য কিছু পদ্ধতি রয়েছে।


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

HTML5 সকল আধুনিক ব্রাউজারে সাপোর্ট করে।

In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements.
যেসব ইলামেন্ট ব্রাউজারের কাছে নতুন সেগুলোকে ব্রাউজার ইনলাই ইলামেন্ট হিসেবে ‌উপস্থাপণ করে। এই ফিচারটি ব্যবহার করে পুরোনো ব্রাউজারে নতুন ইলামেন্ট উপস্থাপণ করা যায়। আমাদের শুধুমাত্র কাংখিত স্টাইল ব্যবহার করতে হবে।

এমনকি IE6 (Windows XP 2001) -এ নতুন ইলামেন্টগুলোকে ব্যবহার করা যায়

Semantic (অর্থবহ) Element গুলোকে Block Element আকারে বর্ণনা

HTML5 এ আটটি নতুন semantic element যুক্ত করা হয়েছে। এগুলো সবই block-level ইলামেন্ট।

পুরোনো ব্রাউজারে এদেরকে সঠিকভাবে উপস্থাপণ করার জন্য CSS ব্যবহার করে এদেরকে ব্লক ইলামেন্ট আকারে উপস্থাপণ করা উচিৎ।

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

HTML এ নতুন ইলামেন্ট যুক্ত করার পদ্ধতি

HTML আপনার নিজস্ব ইলামেন্ট যুক্ত করতে পারবেন। নিচের উদাহরণে <myHero> নামে একটি নতুন ইলামেন্ট যুক্ত করার পদ্ধতি দেখানো হলো।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


The  is needed to create a new element in , and earlier.
IE 9 এবং তার আগের ভার্শনে নতুন ইলামেন্ট যুক্ত করার জন্য JavaScript statement document.createElement(“myHero”) ব্যবহার করতে হবে।


Internet Explorer 8 এ কিছু সমস্যা

উপরের সমাধানগুলো পুরোনো ব্রাউজারে HTML5 এর নতুন ইলামেন্টগুলোকে সঠিকভাবে উপস্থাপণের জন্য ব্যবহার করতে পারেন।
কিন্তু, IE8 (এবং তার আগের ভার্শন) এ অপরিচিত ইলামেন্টকে CSS দিয়ে স্টাইল করা যায় না!

সেক্ষেত্রে Sjoerd Visscher -এর HTML5Shiv জাভাস্ক্রিপ্ট লাইব্রেরী ব্যবহার করতে হবে। এটি পুরোনো ব্রাউজারে নতুন এবং অপরিচিত ইলামেন্ট সঠিকভাবে উপস্থাপণ করার নির্দেশনা দেয়।


HTML5Shiv এর Syntax

HTML5Shiv কে <head> tag এর মধ্যে লিখা হয়।

HTML5Shiv মূলত একটি জাভাস্ক্রিপ্ট ফাইল। এটিকে আগে পেজে লোড করে নিতে হবে।

যখন HTML5 এর নতুন ইলামেন্ট যেমন: <article>, <section>, <aside>, <nav>, <footer> ইত্যাদি ব্যবহার করবেন তখন HTML5Shiv ব্যবহার করা উচিৎ।

HTML5shiv এর ডাউনলোড লিংক : download  অথবা cdn version-ও ব্যবহার করতে পারেন https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

Syntax

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

HTML5Shiv এর উদাহরণ

যদি আপনি HTML5Shiv ডাউনলোড করে ব্যবহার করতে না চান তবে cdn ব্যবহার করে পেজে ফাইলটিকে লোড করতে পারেন। ইন্টারনেটে একটু ঘাটাঘাটি করুন অনেকগুলো cdn site পাবেন।
HTML5Shiv স্ক্রিপ্টটিকে অবশ্যই <head> element মধ্যে এবং সব stylesheets নিচে লিখতে হবে।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।