সিএসএস ভিজিবিলিটি


ভিজিবিলিটি অর্থ দৃষ্টিপাত।
কোন উপাদানকে প্রদর্শন করা হবে কি না তা নির্দেশ করার জন্য CSS এ ভিজিবিলিটি প্রোপার্টি ব্যবহার করা হয়।
যেমন কোন উপাদানকে প্রদর্শন করার জন্য Declaration করতে হয় visibility:visible;
কোন উপাদানকে প্রদর্শন না করার জন্য Declaration করতে হয়, visibility:hidden;
ভিজিবিলিটি প্রোপার্টির বেশ কিছু value হতে পারে, এদের মধ্যে উল্লেখযোগ্য হচ্ছে,

i) ভিজিবিলিটি ভিজিবল
ii) ভিজিবিলিটি হিডেন
iii) ভিজিবিলিটি কলাপস্



ভিজিবিলিটি ভিজিবল


কোন উপাদানকে প্রদর্শন করার জন্য Declaration করতে হয় visibility:visible;


<head>
 <style>
 p{
  visibility:visible;
 }
 </style>
</head>

উদাহরণ :--


<!DOCTYPE html>
<html>
<head>

 <style>
 p{
  visibility:visible;
 }
 </style>
</head>
<body>
<p>This is Visible.</p>
</body>
</html>



 ভিজিবিলিটি হিডেন


ডিসপ্লে নান এবং ভিজিবিলিটি হিডেন উভই HTML উপাদানকে লুকানোর জন্য ব্যবহার করা হয়। কিন্তু উভয়ের মধ্যে পার্থক্য রয়েছে। কোন HTML উপাদানের জন্য CSS এ visibility:hidden; করলে HTML উপাদানটি প্রদর্শিত হয় না ঠিকই কিন্তু HTML উপাদানটি সমপরিমান স্থান ফাঁকা রাখে। কিন্তু কোন HTML উপাদানের জন্য CSS এ display:none;করলে HTML উপাদানটি প্রদর্শিত হয় না এবং কোন ফাঁকা স্থান তৈরি হয় না।

<head>
 <style>
        .hidden{
         visibility:hidden;
         }
 </style>
</head>


উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

 <style>
 p{
  visibility:visible;
 }
        .none{
         display:none;
         }
        .hidden{
         visibility:hidden;
         }
 </style>
</head>
<body>
<p>Display none start.</p>
<p class="none">Display none.</p>
<p>Display none end. <br>
(Between start and end no empty space.)</p>

<p>Visibility hidden start.</p>
<p class="hidden">Display none.</p>
<p>Visibility hidden end. <br>
(Between start and end it takes empty space.)</p>
</body>
</html>


ভিজিবিলিটি কলাপস্



সাধারণত কোন টেবিলের কোন সাড়ি বা কলাম কে অদৃশ্য করার জন্য ভিজিবিলিটি কলাপস্ ব্যবহার করা হয়। এজন্য Declaration করতে হয় visibility:collapse; ।


<head>
<style>
tr.collapse {
    visibility: collapse;
}
</style>
</head>

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}

tr.collapse {
    visibility: collapse;
}
</style>
</head>
<body>

<table>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr class="collapse">
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>


আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন