আপনি CSS-এ একটি এলিমেন্ট হাইড করতে পারেন CSS প্রোপার্টি display: none বা visibility: hidden ব্যবহার করে। display: none পুরো এলিমেন্টকে পেজ থেকে সরিয়ে দেয় এবং পেজের লেআউটকে প্রভাবিত করতে পারে। visibility: hidden এলিমেন্টকে হাইড করে রাখে কিন্তু স্পেস একই রাখে।
আপনি এমন একটি পরিস্থিতির সম্মুখীন होতে পারেন যেখানে আপনি ওয়েব পেজে একটি এলিমেন্ট হাইড করতে চান। উদাহরণস্বরূপ, আপনার একটি টেক্সট ব্লক থাকতে পারে যা আপনি হিডেন রাখতে চান এবং একটি ইউজার বাটনে ক্লিক করলে প্রদর্শিত হবে।
CSS-এ একটি এলিমেন্ট হাইড করার জন্য দুটি প্রধান পদ্ধতি রয়েছে, ব্যবহার করে:
- The display: none attribute.
- The visibility: hidden attribute.
প্রথম পদ্ধতি আপনার ওয়েব পেজের লেআউটকে প্রভাবিত করতে পারে। কিন্তু, দ্বিতীয় পদ্ধতিও জনপ্রিয়।
CSS Hide Element: display
display প্রোপার্টি কন্ট্রোল করে কীভাবে একটি এলিমেন্ট একটি ওয়েব পেজে প্রদর্শিত হবে। একটি HTML ডকুমেন্টের প্রতিটি এলিমেন্টের display প্রোপার্টির জন্য একটি ডিফল্ট মান থাকে, যদিও সেটি এলিমেন্টের ওপর নির্ভর করে। অধিকাংশ এলিমেন্টের জন্য, ডিফল্ট display মান হয় block অথবা inline।
আপনি যদি একটি এলিমেন্টকে কোনো সময়ে প্রদর্শিত না করতে চান, তবে আপনি display প্রোপার্টির মান none সেট করতে পারেন।
নিচের স্টাইল রুল একটি এলিমেন্টকে ওয়েব পেজে হাইড করে:
আপনি যখন display-এর মান none সেট করেন, তবে প্রভাবিত এলিমেন্ট অদৃশ্য হয়ে যাবে। এর মানে এলিমেন্টটি ওয়েব পেজে আর কোনো স্পেস নেবে না।
display: none উদাহরণ
ধরুন আমরা একটি লোকাল কুকনারি ক্লাবের জন্য একটি About Us ওয়েব পেজ ডিজাইন করছি। আমাদের ইনিশিয়াল ডিজাইনে, আমরা পেজে একটি কেকের ইমেজ যোগ করেছিলাম। এখন ক্লাব চায় আমরা ইমেজটি হাইড রাখি কারণ তারা ফাইনাল ডিজাইন সম্পর্কে নিশ্চিত নন।
আমরা পেজে ইমেজটি নিচের কোড ব্যবহার করে হাইড করতে পারি:
<html> <div> <h1>About Us</h1> <img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /> <p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p> </div> <style> img { display: none; } <style>
উপরের কোড এডিটরে বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।
আমরা একটি HTML <div> ট্যাগের ভিতরে তিনটি এলিমেন্ট ডিফাইন করেছি। <h1> এলিমেন্ট আমাদের হেডার তৈরি করতে ব্যবহৃত হয়েছে, এবং এতে About Us টেক্সট রয়েছে। আমাদের HTML <img> এলিমেন্ট একটি কেকের ইমেজ তৈরি করে, যা ২০০px langen এবং ২০০px চওড়া। <p> এলিমেন্টে ক্লাবের একটি সংক্ষিপ্ত বর্ণনা রয়েছে।
আমাদের CSS কোডে, আমরা "img" সিলেক্টর ব্যবহার করেছি আমাদের পেজের সব ইমেজ ট্যাগ সিলেক্ট করার জন্য। এই রুল সকল <img> ট্যাগের display প্রোপার্টিকে none সেট করে। বা অন্য কথায়, স্টাইল রুল আমাদের ইমেজটি হাইড করে।
যদিও আমাদের ইমেজ হাইড করা হয়েছে, এটি এখনও আমাদের ওয়েব পেজে বিদ্যমান। আপনি যদি আপনার ইমেজটি ফিরিয়ে আনা চান, তবে আপনি হয় display:none; স্টাইলটি ডিলিট করতে পারেন। অথবা, আপনি অন্য একটি display স্টাইল স্পেসিফাই করতে পারেন (যেমন block বা inline)।
আপনি এই রুলকে একটি ইনলাইন HTML অ্যাট্রিবিউট হিসেবে ডিফাইন করতে পারেন:
<img style="display: none;" src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" />
ইনলাইন HTML এবং CSS প্রোপার্টি সম্পর্কে আরও জানতে, আমাদের ইনলাইন CSS গাইড চেক আউট করুন।
CSS Hide Element: visibility
CSS visibility প্রোপার্টি কন্ট্রোল করতে ব্যবহৃত হয় কি একটি এলিমেন্ট ওয়েব পেজে ভিজিবল।
ডিফল্টরূপে, visibility প্রোপার্টির মান visible। তবে, আপনি যদি একটি ইমেজ অনদেখা করতে চান, তবে আপনি visibility-এর মান hidden সেট করতে পারেন।
নিচের স্টাইল রুল একটি এলিমেন্টের visibility হিডেন সেট করে:
আগের কুকনারি ক্লাব উদাহরণে ফিরে যাই। ধরুন আমরা আমাদের About Us ওয়েব পেজে কেকের ইমেজটি হাইড করতে চাই। আমরা নিচের কোড ব্যবহার করে সেটি করতে পারি:
<html> <div> <h1>About Us</h1> <img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /> <p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p> </div> <style> img { display: visibility; } <style>
উপরের কোড এডিটরে বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।
এই উদাহরণে আমাদের HTML কোড একই। আমাদের CSS ফাইলে, display প্রোপার্টি ব্যবহার করার বদলে, আমরা আমাদের এলিমেন্ট হাইড করতে visibility ব্যবহার করেছি। আপনি উপরে দেখতে পারেন, আমাদের ইমেজ ওয়েব পেজ থেকে হাইড হয়ে গেছে।
যদিও আমাদের ইমেজ চলে গেছে, আমাদের হেডার এবং প্যারাগ্রাফের মাঝপথে এখন একটি স্পেস আছে যেখানে ইমেজটি রাখা হতো। এটি visibility: hidden; স্টাইলের একটি ফিচার। আসল এলিমেন্টের স্পেসটি এখনও ওয়েব পেজ দ্বারা রাখা হয়। কিন্তু, এলিমেন্টটি হাইড থাকে।
CSS Visibility vs. Display
এলিমেন্ট হাইড করার আমরা যে দুটি পদ্ধতি আলোচনা করেছি সেগুলো এক जैसा দেখাচ্ছে, কিন্তু এই দুটির মধ্যে একটি পার্থক্য আছে।
display: none রুল একটি এলিমেন্টকে একটি HTML ডকুমেন্ট থেকে সরিয়ে দেয়। যদিও হিডেন এলিমেন্টের কোড এখনও উপস্থিত থাকে, এলিমেন্টটি নিজে প্রদর্শিত হবে না।
visibility: hidden রুল, অন্যদিকে, একটি এলিমেন্ট হাইড করে, কিন্তু এলিমেন্টটি ওয়েব পেজে স্পেস নিতে থাকবে। আপনি যদি একটি এলিমেন্ট হাইড করতে চান কিন্তু সেই এলিমেন্টের স্পেস ওয়েব পেজে রাখতে চান, তবে visibility: hidden; রুল ব্যবহার করা সেরা।
"ক্যারিয়ার করমা আমার জীবনে তখন প্রবেশ করলো যখন আমার সেটি সবচেয়ে বেশি দরকার ছিল এবং দ্রুত আমাকে একটি বুটক্যাম্পের সাথে মিলিয়ে দিলো। গ্র্যাজুয়েট হওয়ার দুই মাস পর, আমার সপনোর চাকরি পেলাম যা আমার মূল্যবোধ এবং জীবনের লক্ষ্যের সাথে মিলে যাচ্ছে!"
ভেনাস, সফ্টওয়্যার ইঞ্জিনিয়ার, রকবট
আপনার বুটক্যাম্প ম্যাচ খুঁজুন
উপসংহার
display: none রুল একটি এলিমেন্টকে একটি ডকুমেন্ট থেকে সরিয়ে দেয় এবং ভিউ থেকে হাইড করে। visibility: hidden রুল একটি ডকুমেন্টে একটি এলিমেন্ট হাইড করে এবং যেখানে এলিমেন্টটি প্রদর্শিত হতো সেই স্পেসটি খালি রাখে।
আপনি কি CSS সম্পর্কে আরও জানতে চান? আমাদের How to Learn CSS গাইড পড়ুন। এই গাইডে CSS শিখার জন্য কাজের উপদেশ 가득। আপনি আপনার জ্ঞান বাড়াতে ব্যবহার করতে পারেন এমন টপ সংস্থানগুলোর একটি তালিকাও পাবেন।
