এলিমেন্টস প্যানেলে থাকা ব্যাজগুলোর এই বিশদ রেফারেন্সের সাহায্যে বিভিন্ন ওভারলে টগল করুন এবং DOM ট্রি নেভিগেশনের গতি বাড়ান।
ব্যাজগুলি দেখান বা লুকান
নির্দিষ্ট ব্যাজগুলি দেখাতে বা লুকাতে:
- ডেভটুলস খুলুন ।
- DOM ট্রি-তে থাকা কোনো এলিমেন্টের উপর রাইট-ক্লিক করুন এবং ব্যাজ সেটিংস সাব-মেনু থেকে এক বা একাধিক ব্যাজ চেক করুন।
এলিমেন্টস প্যানেলটি DOM ট্রি-তে উপযুক্ত এলিমেন্টগুলোর পাশে নির্বাচিত ব্যাজগুলো দেখায়। পরবর্তী বিভাগগুলোতে প্রতিটি ব্যাজ ব্যাখ্যা করা হয়েছে।
উৎস দেখুন
এইচটিএমএল পেজের রুটে <html> ট্যাগের পাশে view-source ব্যাজটি থাকে। সোর্সেস প্যানেলে আপনার পেজের সোর্স দেখতে এটিতে ক্লিক করুন।
এই ব্যাজটি ক্রোমের পেজ কনটেক্সট (রাইট-ক্লিক) মেনুতে থাকা ' ভিউ পেজ সোর্স' অপশনটির একটি বিকল্প কর্মপ্রবাহ প্রদান করে:
- ক্রোমে, একটি পৃষ্ঠার উপর রাইট-ক্লিক করে > ইন্সপেক্ট করুন ।
- এলিমেন্টস প্যানেলে,
<html>ট্যাগের পাশে থাকাview-sourceব্যাজটিতে ক্লিক করুন। - সোর্সেস প্যানেলে পেজ সোর্সটি পরিদর্শন করুন।
গ্রিড
একটি HTML এলিমেন্টকে গ্রিড কন্টেইনার বলা হয় যদি এর display CSS প্রপার্টি grid বা inline-grid এ সেট করা থাকে। এই ধরনের এলিমেন্টগুলোর পাশে grid ব্যাজ থাকে যা সংশ্লিষ্ট ওভারলেগুলো টগল করে।
নিম্নলিখিত প্রিভিউতে ওভারলেটি টগল করুন:
- প্রিভিউতে এলিমেন্টটি পরিদর্শন করুন ।
- DOM ট্রি-তে, এলিমেন্টটির পাশে থাকা
gridব্যাজটিতে ক্লিক করুন এবং ওভারলেটি পর্যবেক্ষণ করুন।
ওভারলেটিতে কলাম, সারি, তাদের সংখ্যা এবং ফাঁকা স্থান দেখানো হয়।
গ্রিড লেআউট ডিবাগ করার পদ্ধতি জানতে, ‘Inspect CSS grid’ দেখুন।
সাবগ্রিড
সাবগ্রিড হলো একটি নেস্টেড গ্রিড যা তার প্যারেন্ট গ্রিডের মতোই একই ট্র্যাক ব্যবহার করে। কোনো এলিমেন্টকে সাবগ্রিড কন্টেইনার বলা হয় যদি তার grid-template-columns এবং grid-template-rows প্রপার্টিগুলোর একটি বা উভয়টি ` subgrid হিসেবে সেট করা থাকে। এই ধরনের এলিমেন্টগুলোর পাশে subgrid ব্যাজ থাকে যা সংশ্লিষ্ট ওভারলেগুলোকে টগল করে।
নিম্নলিখিত প্রিভিউতে ওভারলেটি টগল করুন:
- প্রিভিউতে এলিমেন্টটি পরিদর্শন করুন ।
- DOM ট্রি-তে, এলিমেন্টটির পাশে থাকা
subgridব্যাজটিতে ক্লিক করুন এবং ওভারলেটি পর্যবেক্ষণ করুন।
ওভারলেটি একটি সাবগ্রিডের কলাম, সারি, তাদের সংখ্যা এবং ফাঁকা স্থান দেখায়।
ফ্লেক্স
একটি HTML এলিমেন্টকে ফ্লেক্স কন্টেইনার বলা হয় যদি এর display CSS প্রপার্টি flex বা inline-flex এ সেট করা থাকে। এই ধরনের এলিমেন্টগুলোর পাশে flex ব্যাজ থাকে যা সংশ্লিষ্ট ওভারলেগুলো টগল করে।
নিম্নলিখিত প্রিভিউতে ওভারলেটি টগল করুন:
- প্রিভিউতে এলিমেন্টটি পরিদর্শন করুন ।
- DOM ট্রি-তে, এলিমেন্টটির পাশে থাকা
flexব্যাজটিতে ক্লিক করুন এবং ওভারলেটি পর্যবেক্ষণ করুন।
ওভারলেটি চাইল্ড এলিমেন্টগুলোর অবস্থান দেখায়।
ফ্লেক্স লেআউট ডিবাগ করার পদ্ধতি জানতে, “Inspect and debug CSS flexbox” দেখুন।
বিজ্ঞাপন
ডেভটুলস কিছু বিজ্ঞাপন ফ্রেম শনাক্ত করে সেগুলোকে ট্যাগ করতে পারে। এই ধরনের ফ্রেমগুলোর পাশে ad ব্যাজ থাকে।
নিম্নলিখিত প্রিভিউতে একটি বিজ্ঞাপন খুঁজুন:
- প্রিভিউতে এলিমেন্টটি পরিদর্শন করুন ।
- DOM ট্রি-তে, এমন একটি এলিমেন্ট খুঁজুন যার পাশে
adব্যাজটি রয়েছে।
ad ব্যাজটি ক্লিকযোগ্য নয়, তবে আপনি রেন্ডারিং ট্যাব ব্যবহার করে বিজ্ঞাপনের ফ্রেমগুলোকে লাল রঙে হাইলাইট করতে পারেন।
স্ক্রোল করুন
একটি HTML এলিমেন্টকে স্ক্রল কন্টেইনার বলা হয় যদি এর overflow CSS প্রপার্টি scroll এ সেট করা থাকে, অথবা যখন ওভারফ্লো ঘটানোর মতো যথেষ্ট কন্টেন্ট থাকে তখন auto সেট করা থাকে। এই ধরনের এলিমেন্টগুলোর পাশে scroll ব্যাজ থাকে।
স্ক্রোল-স্ন্যাপ
স্ক্রল কন্টেইনারগুলিতে স্ন্যাপ পয়েন্ট কনফিগার করার জন্য CSS প্রোপার্টি থাকতে পারে। এই ধরনের এলিমেন্টগুলির পাশে scroll-snap ব্যাজ থাকে যা সংশ্লিষ্ট ওভারলেগুলি টগল করে।
নিম্নলিখিত প্রিভিউতে ওভারলেটি টগল করুন:
- প্রিভিউতে এলিমেন্টটি পরিদর্শন করুন ।
- DOM ট্রি-তে, এলিমেন্টটির পাশে থাকা
scroll-snapব্যাজটিতে ক্লিক করুন। - এলিমেন্টটিকে ডানদিকে স্ক্রল করে ওভারলেটি পর্যবেক্ষণ করুন।
ওভারলেটি এলিমেন্টের অবস্থান এবং স্ন্যাপ পয়েন্টগুলো দেখায়।
কন্টেইনার
একটি HTML এলিমেন্টকে কন্টেইনার বলা হয় যদি এর ` container-type CSS প্রপার্টি থাকে। এই ধরনের এলিমেন্টগুলোর পাশে container ব্যাজ থাকে যা সংশ্লিষ্ট ওভারলেগুলো টগল করে।
নিম্নলিখিত প্রিভিউতে ওভারলেটি টগল করুন:
- প্রিভিউতে এলিমেন্টটি পরিদর্শন করুন ।
- DOM ট্রি-তে, এলিমেন্টটির পাশে থাকা
containerব্যাজটিতে ক্লিক করুন। - এলিমেন্টটির নিচের-ডান কোণা টেনে এর আকার পরিবর্তন করার চেষ্টা করুন এবং লেআউটের পরিবর্তন ও ওভারলে লক্ষ্য করুন।
ওভারলেটি চাইল্ড এলিমেন্টগুলোর অবস্থান দেখায়।
কন্টেইনার কোয়েরি ডিবাগ করার পদ্ধতি জানতে, “Inspect and debug CSS container queries” দেখুন।
স্লট
<slot> HTML এলিমেন্টটি একটি প্লেসহোল্ডার যা আপনি আপনার নিজস্ব কন্টেন্ট দিয়ে পূরণ করতে পারেন। <template> এলিমেন্টের সাথে একত্রে, <slot> আপনাকে আলাদা DOM ট্রি তৈরি করতে এবং সেগুলোকে একসাথে উপস্থাপন করতে দেয়। স্লট কন্টেন্ট এলিমেন্টগুলোর পাশে slot ব্যাজ থাকে যা সংশ্লিষ্ট স্লটগুলোর লিঙ্ক হিসেবে কাজ করে।
নিম্নলিখিত প্রিভিউতে slot ব্যাজটি আবিষ্কার করুন:
- প্রিভিউতে এলিমেন্টটি পরিদর্শন করুন ।
- DOM ট্রি-তে, সংশ্লিষ্ট স্লটটি খুঁজে বের করার জন্য এলিমেন্টটির পাশে থাকা
slotব্যাজটিতে ক্লিক করুন।
-
revealব্যাজটিতে ক্লিক করে স্লটটির বিষয়বস্তুতে ফিরে যান।
উপরের স্তর
এই ব্যাজটি আপনাকে টপ লেয়ারের ধারণা বুঝতে এবং তা কল্পনা করতে সাহায্য করে। টপ লেয়ার z-index নির্বিশেষে অন্য সব লেয়ারের উপরে কন্টেন্ট রেন্ডার করে। যখন আপনি .showModal() মেথড ব্যবহার করে একটি <dialog> এলিমেন্ট খোলেন, তখন ব্রাউজার এটিকে টপ লেয়ারে রাখে।
শীর্ষ স্তরের উপাদানগুলো সহজে দেখার জন্য, এলিমেন্টস প্যানেলটি </html> ট্যাগ শেষ হওয়ার পর DOM ট্রি-তে একটি #top-layer কন্টেইনার যোগ করে।
শীর্ষ স্তরের উপাদানগুলির পাশে top-layer (N) ব্যাজ থাকে, যেখানে N হলো উপাদানটির সূচক সংখ্যা। এই ব্যাজগুলি #top-layer কন্টেইনারের সংশ্লিষ্ট উপাদানগুলির লিঙ্ক হিসেবে কাজ করে।
নিম্নলিখিত প্রিভিউতে top-layer (N) ব্যাজটি আবিষ্কার করুন:
- প্রিভিউতে, 'ওপেন ডায়ালগ'-এ ক্লিক করুন।
- ডায়ালগটি পরীক্ষা করুন ।
- DOM ট্রি-তে,
<dialog>এলিমেন্টের পাশে থাকাtop-layer (1)ব্যাজটিতে ক্লিক করুন। এলিমেন্টস প্যানেলটি আপনাকে ক্লোজিং</html>ট্যাগের পরে#top-layerকন্টেইনারের সংশ্লিষ্ট এলিমেন্টে নিয়ে যাবে।
-
<dialog>এলিমেন্ট বা এর::backdropপাশে থাকাrevealব্যাজটিতে ক্লিক করে এলিমেন্টটিতে ফিরে যান।
মিডিয়া
media ব্যাজটি ডিফল্টরূপে বন্ধ থাকে। এটি চালু করা হলে , এটি <audio> এবং <video> এলিমেন্টগুলোর পাশে প্রদর্শিত হয়। মিডিয়া প্যানেল খুলতে এবং আপনার মিডিয়া ডিবাগ করতে এই ব্যাজটিতে ক্লিক করুন।
আরও তথ্যের জন্য, মিডিয়া প্যানেলের সাহায্যে মিডিয়া প্লেয়ার ডিবাগ করুন দেখুন।
পপওভার
পপওভার হলো এমন যেকোনো এলিমেন্ট যার একটি popover অ্যাট্রিবিউট থাকে, এবং এটি টুলটিপ, অ্যালার্ট, টোস্টসহ আরও বিভিন্ন ধরনের ইন্টারেক্টিভ প্যাটার্নের জন্য উপযোগী। এই ধরনের এলিমেন্টগুলোর পাশে popover ব্যাজ থাকে।
এই ব্যাজটি এর পাশের একটি top-layer ব্যাজ টগল করে, যা #top-layer কন্টেইনারের সংশ্লিষ্ট এলিমেন্টগুলোর সাথে লিঙ্ক করা থাকে।
নিম্নলিখিত প্রিভিউতে popover ব্যাজটি দেখুন:
- প্রিভিউতে, টগল পপওভার-এ ক্লিক করুন।
- প্রদর্শিত পপওভারটি পরীক্ষা করুন ।
DOM ট্রি-তে,
<div popover>এলিমেন্টের পাশে থাকাpopoverব্যাজটিতে ক্লিক করুন। এলিমেন্টস প্যানেলটি আপনাকেtop-layerব্যাজটি দেখাবে।
`টপ লেয়ার` বিভাগে দেওয়া ধাপগুলো অনুসরণ করুন।
আরও জানতে, https://web.dev/learn/css/popover-and-dialog লিঙ্কটিও দেখুন।
শুরুর-শৈলী
@starting-style রুলটি পেজে রেন্ডার হওয়ার আগে কোনো এলিমেন্টের প্রাথমিক স্টাইল নির্ধারণ করে। যেসব এলিমেন্ট display: none থেকে অ্যানিমেট হয়ে আসে , তাদের জন্য এটি আবশ্যক, কারণ অ্যানিমেট হওয়ার জন্য তাদের একটি স্টেট প্রয়োজন। এই ধরনের এলিমেন্টগুলোর পাশে starting-style ব্যাজ থাকে।
এই ব্যাজটি @starting-style রুলের স্টাইলগুলো টগল করে, ফলে আপনি অ্যানিমেশনটি কার্যকর অবস্থায় দেখতে পারেন।
নিম্নলিখিত প্রিভিউতে starting-style ব্যাজটি আবিষ্কার করুন:
- প্রিভিউতে, ওপেন পপওভার-এ ক্লিক করুন।
- প্রদর্শিত পপওভারটি পরীক্ষা করুন ।
DOM ট্রি-তে,
<div popover>এলিমেন্টের পাশে থাকাstarting-styleব্যাজটি টগল করুন।
Elements > Styles ট্যাবে অ্যানিমেশনটি কার্যকর হতে এবং স্টাইলগুলো প্রয়োগ হতে দেখুন।
আরও জানতে, পপওভার অ্যানিমেট করাও দেখুন।