Free

শুধু আউটলাইন মোড (Outline Only Mode)

আউটলাইন মোড ওয়েবপৃষ্ঠার প্রতিটি HTML এলিমেন্টে কালার-কোডেড বর্ডার আউটলাইন যোগ করে, যা আপনাকে পেজের লেআউট স্ট্রাকচারের একটি তাৎক্ষণিক এক্স-রে ভিউ দেয়। প্রতিটি div, সেকশন, হেডার, প্যারাগ্রাফ এবং বোতাম ঠিক কোথায় বসে আছে তা দেখুন — যার মধ্যে তাদের প্যাডিং, মার্জিন এবং নেস্টিং রিলেশনশিপও অন্তর্ভুক্ত।

Chrome-এ যোগ করুন Edge এ যোগ করুন FireFox-এ যোগ করুন

পেজের লেআউট বোঝা প্রায়শই CSS সমস্যা সমাধানের প্রথম ধাপ। সেই অতিরিক্ত হোয়াইট স্পেস কি প্যাডিং বা মার্জিনের কারণে হচ্ছে? কোনো এলিমেন্ট কি তার চাইল্ড এলিমেন্টের কারণে প্রত্যাশার চেয়ে বেশি চওড়া দেখাচ্ছে? দুটি এলিমেন্ট কি পরস্পরবিরোধী পজিশনের কারণে ওভারল্যাপ করছে? আউটলাইন মোড পেজের প্রতিটি এলিমেন্টের চারপাশে রঙিন বর্ডার ড্র করে এই প্রশ্নগুলোর তাৎক্ষণিক উত্তর দেয়। ব্রাউজার ডেভ-টুলের বিপরীতে (যা একবারে কেবল একটি এলিমেন্ট হাইলাইট করে), এই টুলটি একসাথে সবকিছু আউটলাইন করে — আপনাকে সম্পূর্ণ চিত্রটি দেয়। প্রতিটি HTML এলিমেন্ট টাইপ একটি আলাদা রঙ পায়: হেডারগুলো নীল, ন্যাভিগেশন এলিমেন্টগুলো হলুদ, মেইন কন্টেন্ট সবুজ, প্যারাগ্রাফ গোলাপি, বোতাম সায়ান ইত্যাদি। কালার কোডিং স্ট্রাকচারাল প্যাটার্নগুলো চিনতে এবং DOM না পড়েই এক নজরে এলিমেন্টগুলো শনাক্ত করতে সহজ করে তোলে।

মূল বৈশিষ্ট্য

এক ক্লিকে সক্রিয়করণ

প্রতিটি এলিমেন্টে আউটলাইন টগল করুন মাত্র এক ক্লিকে — কোনো কনফিগারেশন বা সেটিংস প্যানেলের প্রয়োজন নেই। সমস্ত বর্ডার দেখতে একবার ক্লিক করুন, সেগুলো সরাতে আবার ক্লিক করুন। যেকোনো ওয়েবপৃষ্ঠায় লেআউট স্ট্রাকচার ভিজ্যুয়ালাইজ করার দ্রুততম উপায়।

এলিমেন্ট টাইপ অনুযায়ী কালার-কোডেড

তাত্ক্ষণিক ভিজ্যুয়াল শনাক্তকরণের জন্য বিভিন্ন HTML এলিমেন্ট বিভিন্ন আউটলাইন কালার পায়। হেডার নীল, ন্যাভিগেশন হলুদ, মেইন কন্টেন্ট সবুজ, হেডিং বেগুনী, প্যারাগ্রাফ গোলাপি, বোতাম সায়ান এবং div ধূসর রঙের আউটলাইন পায়। আপনি DOM স্ট্রাকচার না পড়েই এলিমেন্টের টাইপ চিনতে পারবেন।

স্পেসিং এবং ওভারফ্লো সমস্যা সমাধান

আউটলাইন অদৃশ্য CSS সমস্যাগুলোকে দৃশ্যমান করে। অপ্রত্যাশিত মার্জিন শনাক্ত করুন যা ফাঁকা জায়গা তৈরি করছে, প্যাডিং যা এলিমেন্টকে প্রত্যাশার চেয়ে বেশি চওড়া করে দিচ্ছে, ওভারফ্লো যা হরিজন্টাল স্ক্রলবার তৈরি করছে অথবা কোল্যাপসড এলিমেন্ট যা জিরো হাইট নিচ্ছে। প্রতিটি বক্স বাউন্ডারি দৃশ্যমান হয়ে যায়।

সম্পূর্ণ নেস্টিং হায়ারার্কি দেখুন

নেস্টেড আউটলাইনগুলো DOM-এর প্যারেন্ট-চাইল্ড স্ট্রাকচার প্রকাশ করে। এলিমেন্টগুলো কতটা গভীরভাবে নেস্টেড, কোন কন্টেইনার কোন কন্টেন্টকে ধারণ করছে এবং নেস্টিং-এর প্রতিটি লেভেলে বাউন্ডারি কোথায় তা দেখুন। জটিল গ্রিড এবং ফ্লেক্স লেআউট বোঝার জন্য এটি অমূল্য।

যেকোনো ওয়েবসাইটে কাজ করে

যেকোনো ওয়েবপৃষ্ঠায় সক্রিয় করুন — আপনার নিজস্ব প্রজেক্ট, ক্লায়েন্ট সাইট, প্রতিযোগীদের পেজ বা ডিজাইন রেফারেন্সের জন্য। আউটলাইনগুলো CSS ইনজেকশনের মাধ্যমে প্রয়োগ করা হয় এবং এটি DOM স্ট্রাকচার পরিবর্তন করে না বা জাভাস্ক্রিপ্ট ব্যবহারে প্রভাব ফেলে না।

লেআউটে কোনো প্রভাব ফেলে না

আউটলাইনগুলো CSS 'outline' (বর্ডার নয়) ব্যবহার করে ড্র করা হয়, যার অর্থ এগুলো এলিমেন্টের বক্স মডেল ডাইমেনশনে কিছু যোগ করে না। পেজের লেআউট হুবহু এক থাকে — আউটলাইনগুলো খাঁটি ভিজ্যুয়াল এবং কোনো রিফ্লো তৈরি করে না।

আপনি যা ইনস্পেক্ট করতে পারেন

শুধু আউটলাইন মোড (Outline Only Mode) covers the following, organized by category:

স্ট্রাকচারাল এলিমেন্ট

html
body
header
footer
main
section
article
aside
nav

কন্টেন্ট এলিমেন্ট

h1–h6 headings
p paragraphs
span
a links
blockquote
pre
code

ইন্টারঅ্যাক্টিভ এলিমেন্ট

button
input
textarea
select
form
label

লেআউট কন্টেইনার

div
ul / ol / li
table / tr / td
figure
details

সাধারণ ব্যবহারের ক্ষেত্র

অপ্রত্যাশিত হোয়াইট স্পেস ডিবাগ করা

সেকশনগুলোর মাঝখানে সেই রহস্যময় গ্যাপ? আউটলাইন চালু করুন এবং সাথে সাথে দেখুন এটি কি নিচের এলিমেন্টের মার্জিন, প্যারেন্ট কন্টেইনারের প্যাডিং নাকি কোনো খালি div যার অস্তিত্ব আপনি জানতেন না। ডেভ-টুলে যা করতে মিনিট লাগে, আউটলাইন মোডে তা সেকেন্ডে হয়ে যায়।

রেসপন্সিভ লেআউট রিভিউ করা

আউটলাইন সক্রিয় থাকা অবস্থায় আপনার ব্রাউজার উইন্ডো রিসাইজ করুন এবং দেখুন ব্রেকপয়েন্টগুলোতে লেআউট কীভাবে নতুন করে সাজানো হচ্ছে। কোন এলিমেন্টগুলো স্ট্যাক হচ্ছে, কোনটি ওভারফ্লো হচ্ছে এবং কোথায় গ্রিড বা ফ্লেক্সবক্স স্ট্রাকচার পরিবর্তন হচ্ছে তা এক নজরে দেখুন।

DOM স্ট্রাকচার অডিট করা

অতিরিক্ত নেস্টেড div এলিমেন্ট? অপ্রয়োজনীয় র‍্যাপার? আউটলাইন মোড অতিরিক্ত নেস্টিংকে ভিজ্যুয়ালি স্পষ্ট করে তোলে — আপনি যদি সাধারণ কন্টেন্টের চারপাশে ৫ বা তার বেশি কনসেন্ট্রিক আউটলাইন দেখেন, তবে মার্কআপটি আরও সহজ করা যেতে পারে। ফ্রন্টএন্ড পিআর (PR) রিভিউ করার জন্য এটি দারুণ।

বিভিন্ন পেজে ডিজাইন তুলনা করা

আপনার হোম পেজে আউটলাইন সক্রিয় করুন, তারপর একটি সাব-পেজে যান। সেগুলো কি একই লেআউট স্ট্রাকচার শেয়ার করে? মার্জিন এবং সেকশন উইডথ কি সামঞ্জস্যপূর্ণ? আউটলাইন মোড স্ট্রাকচারাল ধারাবাহিকতা (বা এর অভাব) সাথে সাথে দৃশ্যমান করে তোলে।

HTML এবং CSS লেআউট ধারণা শেখানো

শিক্ষার্থীদের দেখান কীভাবে HTML এলিমেন্টগুলো বক্স তৈরি করে, কীভাবে প্যাডিং এবং মার্জিনের মাধ্যমে বক্স মডেল কাজ করে এবং কীভাবে নেস্টিং পেজের হায়ারার্কি তৈরি করে। আউটলাইন মোড বিমূর্ত ধারণাগুলোকে দৃশ্যমান, ইন্টারেক্টিভ ডেমোনেস্ট্রেশনে রূপান্তরিত করে।

কিভাবে ব্যবহার করবেন

আউটলাইন মোড সক্রিয় করুন

DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Outline Only Mode আইকনে ক্লিক করুন। তাৎক্ষণিকভাবে পেজের প্রতিটি HTML এলিমেন্ট একটি কালার-কোডেড বর্ডার আউটলাইন পায়।

কালার কোডিং বুঝুন

প্রতিটি এলিমেন্ট টাইপের একটি আলাদা রঙ আছে। স্ট্রাকচারাল এলিমেন্টের জন্য নীল (হেডার, ফুটার, সেকশন), মেইন কন্টেন্ট এরিয়ার জন্য সবুজ, হেডিংয়ের জন্য বেগুনী, প্যারাগ্রাফের জন্য গোলাপি, বোতাম এবং ইনপুট ফিল্ডের জন্য সায়ান, ন্যাভিগেশনের জন্য হলুদ এবং সাধারণ div ও span-এর জন্য ধূসর রঙ ব্যবহার করা হয়।

লেআউট সমস্যা শনাক্ত করুন

অপ্রত্যাশিত গ্যাপ (মার্জিনের কারণে), এলিমেন্ট কন্টেইনারের বাইরে চলে যাওয়া (ওভারফ্লো), অসামঞ্জস্যপূর্ণ স্পেসিং (অসংলগ্ন প্যাডিং) বা গভীরভাবে নেস্টেড র‍্যাপার (অপ্রয়োজনীয় div নেস্টিং) খুঁজুন। এই সবই সাথে সাথে দৃশ্যমান হয়।

অন্যান্য টুলের সাথে কম্বাইন করুন

আউটলাইন মোডকে একটি স্টার্টিং পয়েন্ট হিসেবে ব্যবহার করুন, তারপর নির্দিষ্ট এলিমেন্টের ভ্যালু চেক করতে CSS Inspector-এ স্যুইচ করুন অথবা আউটলাইন করা এলিমেন্টগুলোর মধ্যবর্তী সঠিক দূরত্ব নিশ্চিত করতে Measure Distance ব্যবহার করুন।

শেষ হলে বন্ধ করুন

সব আউটলাইন সরাতে এবং স্বাভাবিক পেজ ভিউতে ফিরে যেতে আবার Outline Mode আইকনে ক্লিক করুন। এর জন্য কোনো ক্লিনআপের প্রয়োজন নেই — এটি একটি সহজ টগল।