ফ্রন্ট-এন্ড ইন্টারভিউর প্রশ্ন — HTML, CSS আর অ্যাক্সেসিবিলিটি

সংক্ষেপে: এটি কোনো HTML ট্যাগ নয়, ব্রাউজারের প্রতি একটি সংকেত — “আধুনিক নিয়মে পাতাটি আঁকো”। এতে ব্রাউজার standards mode-এ (no-quirks mode) চলে।

না লিখলে: ব্রাউজার quirks mode-এ যায় — ১৯৯০-এর দশকের পাতাগুলো যেন না ভাঙে, সেজন্য পুরোনো ব্রাউজারের কিছু অদ্ভুত আচরণ নকল করে। যেমন টেবিলের ভেতরে লেখার মাপ বাইরে থেকে উত্তরাধিকার না পাওয়া, CSS-এ এককহীন সংখ্যা (width: 100) মেনে নেওয়া, লাইনের উচ্চতার হিসাব আলাদা হওয়া। ফলে একই CSS দুই পাতায় দুই রকম দেখায়, আর বাগ খুঁজে পাওয়া কঠিন হয়।

বাড়তি তথ্য: HTML5-এর আগে DOCTYPE ছিল লম্বা, DTD-এর ঠিকানাসহ। এখন ছোট রূপটিই যথেষ্ট, আর এটি case-insensitive. DevTools-এর Console-এ document.compatMode লিখলে "CSS1Compat" মানে standards mode, "BackCompat" মানে quirks mode.

ঝালিয়ে নিন: পর্ব ০৩ · প্রথম HTML পেজ

সংজ্ঞা: Semantic HTML মানে চেহারা নয়, অর্থ অনুযায়ী element বাছা — শিরোনাম <h2>, মেনু <nav>, মূল অংশ <main>. এর লাভ তিন জায়গায়: screen reader সঠিক ভূমিকা জানায়, সার্চ ইঞ্জিন কাঠামো বোঝে, আর অন্য ডেভেলপার কোড সহজে পড়েন।

• <div> — কোনো অর্থ নেই; শুধু সাজানো বা দল বাঁধার জন্য। অন্য কিছু না মিললে এটিই ঠিক।
• <section> — একটি বিষয়ভিত্তিক অংশ, সাধারণত নিজের শিরোনামসহ। শিরোনাম দেওয়ার মতো না হলে সেটি section নয়, div.
• <article> — নিজে নিজে সম্পূর্ণ, আলাদা করে অন্য জায়গায় তুলে দিলেও অর্থ থাকে: ব্লগ পোস্ট, খবর, পণ্যের কার্ড, একটি মন্তব্য।

পরীক্ষার কৌশল: “এই অংশটি কি RSS feed বা অন্য সাইটে আলাদা করে দেখানো যায়?” — হ্যাঁ হলে article. “এর কি একটি শিরোনাম আছে?” — হ্যাঁ হলে section, না হলে div.

যা বলবেন না: “semantic HTML শুধু SEO-র জন্য।” মূল লাভ অ্যাক্সেসিবিলিটি আর রক্ষণাবেক্ষণে; SEO বাড়তি।

ঝালিয়ে নিন: পর্ব ০৪, পর্ব ১০ · semantic layout

ব্রাউজারের ডিফল্ট চেহারা এক, কিন্তু অর্থ আলাদা। <strong> মানে গুরুত্ব বা জরুরি (“পাসওয়ার্ড কাউকে বলবেন না”); <b> মানে বাড়তি গুরুত্ব ছাড়াই চোখে আলাদা করা (পণ্যের নাম, মূল শব্দ)। <em> মানে উচ্চারণের জোর — বাক্যের অর্থ বদলায় (“আমি আজ আসব” বনাম “আমি আজ আসব”); <i> মানে ভিন্ন সুরের লেখা — বিদেশি শব্দ, বৈজ্ঞানিক নাম (Tenualosa ilisha), জাহাজের নাম।

আরও গভীরে: বেশিরভাগ screen reader ডিফল্টে strong বা em-এ আলাদা সুর দেয় না — তাই শুধু “screen reader জোর দিয়ে পড়ে” বলা ঠিক নয়। সঠিক উত্তর: অর্থটি DOM-এ থাকে, অনুবাদ টুল, Reader mode আর ভবিষ্যতের টুল তা ব্যবহার করতে পারে। চেহারার জন্য শুধু CSS (font-weight).

ঝালিয়ে নিন: পর্ব ০৪ · লেখা ও অর্থবহ ট্যাগ

সূত্র: কোথাও যায় — লিংক; কিছু করে — বোতাম। অন্য পাতা, একই পাতার অংশ (#faq), ফাইল ডাউনলোড → <a href>. ফর্ম জমা, modal খোলা, কার্টে যোগ, মেনু খোলা → <button>.

কেন জরুরি: লিংক Enter-এ চলে, বোতাম Enter ও Space দুটোতেই। লিংকে ডান-ক্লিক করে নতুন ট্যাবে খোলা যায়, ঠিকানা কপি করা যায়; screen reader লিংকের তালিকা আর বোতামের তালিকা আলাদা দেখায়। ফর্মের ভেতরে <button>-এর ডিফল্ট type হলো submit — তাই শুধু JavaScript-এর কাজের বোতামে type="button" লিখুন, নইলে হঠাৎ ফর্ম জমা হয়ে যাবে।

যা বলবেন না: “<a href="#" onclick="…"> দিয়েই বোতাম বানাই।” এটি লিংকের ভূমিকা নিয়ে বোতামের কাজ করে — কি-বোর্ড আর screen reader-এর জন্য বিভ্রান্তিকর, আর # পাতার ওপরে লাফ দেয়।

ঝালিয়ে নিন: পর্ব ০৫, পর্ব ০৮, পর্ব ১২

উত্তর: HTML-এ নিষেধ নেই, validator-ও error দেয় না। কিন্তু ব্যবহারিক নিয়ম হলো পাতার মূল বিষয়ের জন্য একটি <h1>, তারপর স্তর না লাফিয়ে h2, h3… screen reader ব্যবহারকারী অনেক সময় heading-এর তালিকা দেখে পাতায় ঘোরেন — এটি তাঁদের সূচিপত্র।

ইতিহাস জানলে আলাদা হবেন: HTML5-এর খসড়ায় একটি “document outline algorithm” ছিল — প্রতিটি <section>-এর ভেতরে h1 লিখলে ব্রাউজার নিজে স্তর ঠিক করবে। কোনো ব্রাউজার বা screen reader এটি বাস্তবায়ন করেনি, আর ২০২২ সালে WHATWG spec থেকে এটি সরিয়ে দেওয়া হয়। তাই section-এর ভেতরে h1 লিখলেও সেটি h1-ই থাকে।

স্তর বনাম চেহারা: heading-এর স্তর ঠিক হয় কাঠামো দিয়ে; ছোট দেখাতে চাইলে CSS-এ মাপ বদলান, স্তর নয়। “h4 লিখেছি কারণ ছোট দেখায়” — এটি একটি সাধারণ ভুল।

ঝালিয়ে নিন: পর্ব ০৪, পর্ব ১০

উত্তর: ব্রাউজার থেমে যায় না। HTML spec-এ parse error সামলানোর পুরো নিয়ম লেখা আছে — প্রতিটি ব্রাউজার একই ভুলকে একইভাবে “মেরামত” করে। যেমন <p>-এর ভেতরে <div> লিখলে parser আগের p বন্ধ করে দেয়; <table>-এ <tbody> না লিখলে নিজেই বসিয়ে দেয়; টেবিলের ভেতরে ভুল জায়গার লেখা টেবিলের আগে তুলে আনে।

দুই দৃশ্যের পার্থক্য: “View source” দেখায় সার্ভার থেকে আসা আসল লেখা। Elements প্যানেল দেখায় DOM — parser মেরামতের পরের গাছ, আর JavaScript পরে যা বদলেছে তাও। তাই CSS বা JavaScript যখন “ভুল element”-এ লাগে, Elements-এ আসল কাঠামো দেখা প্রথম কাজ।

Senior সংযোজন: এই ক্ষমাশীলতার দাম আছে — ভুল লুকিয়ে থাকে। তাই validator.w3.org বা editor-এর linter দিয়ে HTML যাচাই করা দলের নিয়ম হওয়া উচিত।

ঝালিয়ে নিন: পর্ব ০৩, পর্ব ০৭, পর্ব ৪৭

কোথায় কোনটি: পাতার DOM লাগে এমন নিজের কোড — defer বা module. স্বাধীন তৃতীয় পক্ষের কোড, যেমন analytics — async. defer/async শুধু বাইরের ফাইলে কাজ করে; inline script-এ এদের প্রভাব নেই।

পারফরম্যান্সের দিক: head-এ সাধারণ script পাতার প্রথম আঁকাকে আটকায় (render-blocking). আগে সমাধান ছিল script-কে body-র শেষে রাখা; এখন head-এ defer আরও ভালো — ব্রাউজার আগে থেকেই ডাউনলোড শুরু করতে পারে।

ঝালিয়ে নিন: পর্ব ৪৯, পর্ব ৫২

নিয়ম: ছবিটি না দেখা গেলে যে কথাটি বলতে হতো, সেটিই alt. প্রসঙ্গ বুঝে লিখুন — একই ছবি দোকানের পাতায় “লাল জামদানি শাড়ি, সোনালি পাড়”, আর একটি ভ্রমণ ব্লগে “নারায়ণগঞ্জের তাঁতে বোনা চলছে”।

• তথ্যবহ ছবি: সংক্ষিপ্ত, অর্থবহ বর্ণনা; “ছবি” বা “image of” লিখবেন না — screen reader নিজেই “ছবি” বলে।
• শুধু সাজসজ্জা: alt="" (খালি, কিন্তু attribute থাকবে) — screen reader এড়িয়ে যায়। alt একেবারে না লিখলে অনেক screen reader ফাইলের নাম পড়ে: “IMG_2041.jpg”.
• লিংক বা বোতামের ভেতরের একমাত্র ছবি: alt হবে কাজের নাম — “হোম পাতা”, “কার্ট”। লোগোর alt সাধারণত প্রতিষ্ঠানের নাম।
• জটিল ছবি (চার্ট, ম্যাপ): ছোট alt, আর বিস্তারিত তথ্য পাশের লেখায় বা <figcaption>-এ।

ঝালিয়ে নিন: পর্ব ০৬, পর্ব ১২

data- দিয়ে শুরু যেকোনো attribute (data-product-id="42") HTML-এ নিজের তথ্য রাখার বৈধ উপায়। JavaScript পড়ে el.dataset.productId দিয়ে (নামটি camelCase হয়ে যায়), আর CSS ধরতে পারে [data-state="open"] দিয়ে, এমনকি attr() দিয়ে content-এ দেখাতেও পারে।

সীমা: এগুলোর কোনো অর্থ ব্রাউজার বা screen reader জানে না। তাই অবস্থা জানাতে যেখানে নিজস্ব attribute বা ARIA আছে (disabled, aria-expanded, aria-current), সেখানে সেটিই দিন — CSS-ও সেটি ধরতে পারে: [aria-expanded="true"]. গোপন তথ্য data attribute-এ রাখবেন না; সবাই source-এ দেখতে পান।

ঝালিয়ে নিন: পর্ব ৩৬, পর্ব ৫২

• <details>/<summary>: পাতার ভেতরেই খোলা-বন্ধ হওয়া অংশ — FAQ, accordion. কোনো JavaScript লাগে না, কি-বোর্ড আর screen reader-এ নিজে থেকেই চলে। একই name দিলে একটি খুললে অন্যটি বন্ধ হয় (exclusive accordion).
• <dialog> + showModal(): পাঠককে থামিয়ে সিদ্ধান্ত চাওয়া — “অর্ডার বাতিল করবেন?” বাকি পাতা inert হয়ে যায়, Esc-এ বন্ধ হয়, element বসে top layer-এ। Baseline Widely available.
• popover: থামায় না এমন ভাসমান অংশ — মেনু, টিপস, ছোট নোটিফিকেশন। বাইরে চাপলে বা Esc-এ বন্ধ (light dismiss), top layer-এ বসে, popovertarget দিয়ে JavaScript ছাড়াই খোলে। Baseline Newly available; পুরোনো ব্রাউজারে popover অংশটি সাধারণ element-এর মতো দেখা যায়, তাই জরুরি কাজ শুধু এর ভরসায় রাখবেন না।

সিদ্ধান্তের প্রশ্ন: “খুললে কি পাঠককে থামতে হবে?” হ্যাঁ — modal dialog. না, পাতার ওপরে ভাসবে — popover. না, লেখার প্রবাহেই খুলবে — details.

ঝালিয়ে নিন: পর্ব ১১ · details, dialog আর popover

Tabnabbing: নতুন ট্যাবে খোলা অন্য সাইট আগে window.opener দিয়ে আপনার ট্যাবটিকে নকল লগইন পাতায় পাঠিয়ে দিতে পারত — একে বলে tabnabbing. সমাধান rel="noopener". আধুনিক ব্রাউজারে target="_blank" নিজেই noopener ধরে নেয়, তবু লিখে রাখা ক্ষতিকর নয়; noreferrer আবার ঠিকানাও পাঠায় না।

iframe: অন্যের পাতা বসালে sandbox attribute সব ক্ষমতা কেড়ে নেয়, তারপর যা দরকার তা ফিরিয়ে দিন (allow-scripts, allow-forms). একই সাথে allow-scripts আর allow-same-origin দিলে একই origin-এর ভেতরের পাতা নিজের sandbox সরিয়ে ফেলতে পারে — তাই এই জুটি এড়িয়ে চলুন। allow attribute দিয়ে ক্যামেরা-লোকেশনের মতো ক্ষমতা নিয়ন্ত্রণ, loading="lazy" দিয়ে পরে লোড, আর title দিয়ে নাম।

উল্টো দিক: আপনার পাতা যেন অন্য কেউ iframe-এ বসিয়ে প্রতারণা (clickjacking) না করতে পারে — সার্ভারের header Content-Security-Policy: frame-ancestors.

ঝালিয়ে নিন: পর্ব ০৫, পর্ব ০৬

সংজ্ঞা: ব্রাউজারের নিজস্ব তিনটি প্রযুক্তি মিলিয়ে নিজের HTML element বানানো: custom element (<price-tag>, নামে হাইফেন বাধ্যতামূলক), Shadow DOM (ভেতরের markup আর CSS বাইরে থেকে আলাদা), আর <template> (না-আঁকা, বারবার কপি করার নকশা)।

যা সারায়: CSS-এর global scope. Shadow DOM-এর ভেতরের .title বাইরের .title-এর সাথে লড়ে না। তাই কোনো framework-নির্ভর না হয়ে একটি component অনেক প্রজেক্টে চলে — design system-এ জনপ্রিয়।

Trade-off: বাইরে থেকে সাজাতে হলে CSS variable, ::part() বা <slot> লাগে — সহজ সাজও ঝামেলার হয়। ফর্মের সাথে যুক্ত হতে ElementInternals লাগে। JavaScript না চললে কিছুই দেখা যায় না, যদি না declarative shadow DOM বা সাধারণ HTML-এর ওপর enhancement করা হয় (অনেকে একে বলেন “HTML web component”). একটি সাইটের ভেতরের সাধারণ কার্ডের জন্য এটি প্রায়ই অতিরিক্ত; একাধিক প্রজেক্টে ভাগ হওয়া component-এর জন্য উপযোগী।

ঝালিয়ে নিন: পর্ব ৫২ · DOM, template আর Web Components

তিনটি কারণ: (১) label input-এর accessible name — screen reader ঘরে ঢুকে বলে “ইমেইল, edit text”; label না থাকলে শুধু “edit text”. (২) label-এ চাপলে input-এ focus যায় — ছোট checkbox-এর চাপার জায়গা অনেক বড় হয়, ফোনে এটা বড় সুবিধা। (৩) ব্রাউজারের autofill আর অনুবাদ টুলও label দেখে বোঝে।

দুই উপায়: <label for="email"> + <input id="email">, অথবা input-কে label-এর ভেতরে মুড়ে দেওয়া। প্রথমটি বেশি নমনীয়।

যা বলবেন না: “placeholder-ই লেবেলের কাজ করে।” লেখা শুরু করলেই placeholder মুছে যায় — পাঠক ভুলে যান ঘরটি কিসের; সাধারণ placeholder-এর রং প্রায়ই কম contrast-এর; আর কিছু assistive technology এটিকে নাম হিসেবে নির্ভরযোগ্যভাবে পড়ে না। placeholder শুধু উদাহরণের জন্য: “যেমন: 01712345678”.

ঝালিয়ে নিন: পর্ব ০৮ · form, input, label আর button

GET ফর্মের ডেটা URL-এর query string-এ বসায় (/search?q=শাড়ি&page=2). ঠিকানাটি bookmark, শেয়ার আর ক্যাশ করা যায়, ব্যাক বাটনে নির্ভয়ে ফেরা যায়। খোঁজা, ফিল্টার, সাজানো — যা সার্ভারে কিছু বদলায় না — এর জন্য।

POST ডেটা পাঠায় request body-তে। নিবন্ধন, অর্ডার, পাসওয়ার্ড, ফাইল আপলোড — যা সার্ভারে কিছু বদলায়। রিফ্রেশ করলে ব্রাউজার আবার জমা দেওয়ার আগে সতর্ক করে।

ভুল ধারণা ভাঙুন: POST নিজে “নিরাপদ” নয় — body-ও HTTPS ছাড়া খোলা অবস্থায় যায়। পার্থক্য হলো GET-এর ডেটা ব্রাউজারের history, সার্ভারের log আর Referer-এ থেকে যায়, তাই পাসওয়ার্ড কখনো GET-এ নয়। HTML ফর্ম শুধু GET আর POST পাঠাতে পারে (dialog ফর্মের method="dialog" বাদে)।

ঝালিয়ে নিন: পর্ব ০৮, পর্ব ০১

উত্তর: required, type="email", pattern, min/max, minlength দিলে ব্রাউজার জমা দেওয়ার আগে নিজেই যাচাই করে, প্রথম ভুল ঘরে focus নেয় আর নিজের ভাষায় বার্তা দেখায় — এর নাম constraint validation. সমস্যা ছিল চেহারায়: :invalid পাতা খোলামাত্রই সত্য, তাই খালি required ঘর শুরুতেই লাল দেখাত। :user-invalid সত্য হয় শুধু ব্যবহারকারী ঘরটি বদলানোর পর বা জমা দিতে চাইলে — এখন Baseline Widely available.

<style>
  label { display: block; margin-top: .75rem; }
  input:invalid { background: #fff3c4; }         /* শুরু থেকেই */
  input:user-invalid { outline: 3px solid #c62828; } /* ছোঁয়ার পরে */
</style>
<form>
  <label for="em">ইমেইল (আবশ্যক)</label>
  <input id="em" name="email" type="email" required autocomplete="email">

  <label for="ph">মোবাইল নম্বর (ঐচ্ছিক)</label>
  <input id="ph" name="phone" type="tel" inputmode="numeric"
         pattern="01[3-9][0-9]{8}" autocomplete="tel"
         placeholder="যেমন: 01712345678">

  <p><button>জমা দিন</button></p>
</form>

Senior সংযোজন: client-side validation শুধু সুবিধা, নিরাপত্তা নয় — DevTools-এ required মুছে দেওয়া বা সরাসরি request পাঠানো খুব সহজ। সার্ভারে আবার যাচাই সবসময় বাধ্যতামূলক (server-side validation).

ঝালিয়ে নিন: পর্ব ০৯, পর্ব ৩৪, পর্ব ৪৩

type="number" পরিমাণের জন্য — যে সংখ্যা যোগ-বিয়োগ করা যায়। মোবাইল নম্বর, OTP, রোল নম্বর আসলে “সংখ্যা দিয়ে লেখা পরিচয়”: শুরুর 0 হারাতে পারে, পাশে ওপর-নিচের তীর আসে, মাউসের চাকা ঘোরালে মান বদলে যায়, আর e অক্ষর বৈধ ধরা হয়।

• মোবাইল: type="tel" + autocomplete="tel" — ফোনে নম্বরের কিবোর্ড, ব্রাউজার নম্বর মনে রেখে ভরে দেয়।
• OTP: type="text" + inputmode="numeric" + autocomplete="one-time-code" — অনেক ফোন SMS থেকে কোড নিজেই প্রস্তাব করে।
• পাসওয়ার্ড: নিবন্ধনে new-password, লগইনে current-password — password manager সঠিক কাজ করে।

WCAG ১.৩.৫ (Identify Input Purpose) ঠিক এই autocomplete মানগুলোর কথাই বলে — যাঁদের টাইপ করতে কষ্ট হয়, তাঁদের জন্য বড় সাহায্য।

ঝালিয়ে নিন: পর্ব ০৮, পর্ব ০৯

• ঘরের সাথে বার্তা জোড়া: বার্তার একটি id, আর input-এ aria-describedby="email-err" — focus এলে screen reader নামের পরে বার্তাও পড়ে।
• অবস্থা জানানো: ভুল ঘরে aria-invalid="true"; CSS-এ শুধু লাল রং নয়, সাথে আইকন বা “ভুল:” শব্দ — রং দেখতে না পাওয়া মানুষও বোঝেন (WCAG ১.৪.১)।
• কী ভুল আর কীভাবে ঠিক: “ভুল ইনপুট” নয় — “মোবাইল নম্বর ১১ অঙ্কের, 01 দিয়ে শুরু” (WCAG ৩.৩.১ ও ৩.৩.৩)।
• লম্বা ফর্মে সারাংশ: জমা দিলে ওপরে একটি error summary — প্রতিটি ভুলের লিংক ঘরে নিয়ে যায়; সারাংশে focus সরিয়ে দিন।
• লেখা শেষ হওয়ার আগে চেঁচাবেন না: প্রতি অক্ষরে বার্তা নয় — ঘর ছাড়ার পরে বা জমার সময় (:user-invalid-এর দর্শন)।

Trade-off: ব্রাউজারের নিজের বার্তা (bubble) সহজ, কিন্তু চেহারা ও ভাষা নিয়ন্ত্রণে নেই আর অল্প সময় দেখা যায়। অনেক দল novalidate দিয়ে নিজের বার্তা দেখায়, কিন্তু যাচাইয়ের যুক্তি ব্রাউজারের Constraint Validation API (validity, checkValidity()) থেকেই নেয়।

ঝালিয়ে নিন: পর্ব ০৯, পর্ব ৪৩ · ফর্ম স্টাইলিং আর UX

প্রথম স্মার্টফোনের যুগে বেশিরভাগ সাইট ছিল ডেস্কটপের জন্য। তাই মোবাইল ব্রাউজার ধরে নিত পাতাটি প্রায় ৯৮০ পিক্সেল চওড়া, তারপর পুরোটা ছোট করে পর্দায় দেখাত। <meta name="viewport" content="width=device-width, initial-scale=1"> বলে: “আমার পাতা ফোনের আসল চওড়ার জন্য বানানো, ছোট কোরো না।” না দিলে আপনার media query আর রেসপন্সিভ CSS প্রায় কাজই করে না — লেখা পিঁপড়ার মতো ছোট।

যা বলবেন না: “zoom আটকাতে user-scalable=no বা maximum-scale=1 দিই।” যাঁরা চোখে কম দেখেন, তাঁরা pinch-zoom-এর ওপর নির্ভর করেন — এটি WCAG ১.৪.৪ ভাঙে। iPhone-এর Safari এখন এগুলো সাধারণত উপেক্ষাও করে।

ঝালিয়ে নিন: পর্ব ১৩, পর্ব ৩০

• <title>: প্রতিটি পাতায় আলাদা, মূল বিষয় শুরুতে — সার্চের ফলের নীল শিরোনাম সাধারণত এখান থেকেই আসে।
• meta description: সরাসরি র‍্যাংক বাড়ায় না, কিন্তু ফলের নিচের লেখা হতে পারে — মানুষ ক্লিক করবেন কি না, তা ঠিক করে।
• কাঠামো: একটি স্পষ্ট h1, অর্থবহ heading, আসল লিংক (<a href>, JavaScript-এর ক্লিক নয়), ছবিতে alt, দ্রুত লোড।
• canonical: একই লেখা একাধিক ঠিকানায় থাকলে (?ref=fb) কোনটি আসল, তা জানায়।

robots.txt বনাম noindex: robots.txt crawler-কে বলে “এই ঠিকানায় ঢুকো না” — কিন্তু অন্য সাইট লিংক দিলে ঠিকানাটি সার্চের তালিকায় উঠে যেতে পারে। পাতাকে তালিকা থেকে বাইরে রাখতে <meta name="robots" content="noindex">, আর crawler যেন সেটি পড়তে পারে, তাই সেই পাতা robots.txt-এ আটকাবেন না। গোপন পাতা লুকানোর উপায় এর কোনোটিই নয় — তার জন্য লগইন।

যা বলবেন না: “meta keywords-এ অনেক keyword দিই।” Google অনেক বছর আগেই জানিয়েছে, তারা এটি র‍্যাংকিংয়ে ব্যবহার করে না।

ঝালিয়ে নিন: পর্ব ১৩ · head, meta, SEO

• Open Graph (og:title, og:description, og:image, og:url): Facebook, WhatsApp, LinkedIn-এ লিংক শেয়ার করলে কোন শিরোনাম-ছবি-বিবরণের কার্ড দেখাবে। X (Twitter) নিজের twitter:card দেখে, না পেলে প্রায়ই OG-তে ফিরে যায়।
• JSON-LD structured data: schema.org-এর শব্দভান্ডারে যন্ত্রকে বলা “এটি একটি পণ্য, দাম এত, রিভিউ এত” — সার্চে বিশেষ ফল (rich result) দেখানোর যোগ্যতা দেয়, নিশ্চয়তা নয়।
• <html lang="bn">: screen reader সঠিক উচ্চারণ বাছে, ব্রাউজার অনুবাদ প্রস্তাব করে, হাইফেন আর ফন্ট বাছাই ঠিক হয়। পাতার ভেতরে ইংরেজি অংশে lang="en".
• <meta charset="UTF-8">: বাংলা অক্ষর যেন “ব” ধরনের mojibake না হয়; head-এর একেবারে শুরুতে (প্রথম ১০২৪ byte-এর মধ্যে) রাখতে হয়।

ঝালিয়ে নিন: পর্ব ১৩, পর্ব ১৪ · ওয়েবে বাংলা, পর্ব ১৫

সংজ্ঞা: Accessibility মানে প্রতিবন্ধিতা থাকুক বা না থাকুক, সবাই যেন পাতা ব্যবহার করতে পারেন — যাঁরা দেখেন না (screen reader), কম দেখেন (zoom, বড় লেখা), রং আলাদা করতে পারেন না, শোনেন না (caption), শুধু কি-বোর্ড বা switch দিয়ে চালান, বা যাঁদের মনোযোগ ও স্মৃতিতে সমস্যা। সাথে অস্থায়ী আর পরিস্থিতিগত অসুবিধাও — হাত ভাঙা, রোদে ফোনের পর্দা, ধীর ইন্টারনেট।

WCAG (Web Content Accessibility Guidelines) হলো W3C-র মানদণ্ড; এখনকার সংস্করণ 2.2 (২০২৩ সালের)। স্তর তিনটি — A, AA, AAA; চুক্তি আর আইনে সাধারণত AA চাওয়া হয়। এর চারটি নীতি POUR:

• Perceivable — দেখা বা শোনা যায় (alt, caption, contrast)
• Operable — চালানো যায় (কি-বোর্ড, যথেষ্ট সময়, বড় চাপার জায়গা)
• Understandable — বোঝা যায় (স্পষ্ট ভাষা, পরিষ্কার ভুলের বার্তা)
• Robust — বিভিন্ন যন্ত্র ও assistive technology-তে নির্ভরযোগ্য (সঠিক HTML ও ARIA)

ঝালিয়ে নিন: পর্ব ১২ · অ্যাক্সেসিবিলিটি

নিয়ম: যদি এমন একটি নিজস্ব HTML element বা attribute থাকে, যার অর্থ আর আচরণ আগে থেকেই তৈরি — তাহলে সেটিই ব্যবহার করুন; ARIA দিয়ে অন্য element-কে নতুন ভূমিকা দেবেন না। কারণ ARIA শুধু screen reader-কে বলে “এটা বোতাম” — কিন্তু কি-বোর্ডে চলা, focus পাওয়া, Space-এ চাপ, ফর্মে জমা — কিছুই নিজে থেকে যোগ করে না।

ARIA সত্যিই লাগে যখন: HTML-এ সমতুল্য নেই — tabs (role="tablist", aria-selected), combobox, tree; অবস্থা জানাতে — aria-expanded, aria-current, aria-pressed; সম্পর্ক জানাতে — aria-describedby, aria-controls; আর হঠাৎ বদলে যাওয়া খবর জানাতে — live region.

প্রায়ই উদ্ধৃত হওয়া একটি পর্যবেক্ষণ: WebAIM-এর বড় আকারের বার্ষিক সমীক্ষায় দেখা গেছে, যেসব পাতায় ARIA বেশি, সেগুলোতে গড়ে অ্যাক্সেসিবিলিটির ভুলও বেশি পাওয়া যায় — ভুল ARIA, ARIA না থাকার চেয়েও খারাপ হতে পারে।

যা বলবেন না: “সব div-এ role আর aria-label দিয়ে দিলেই accessible হয়ে যায়।” অথবা আসল <button>-এ আবার role="button" — বাড়তি, অর্থহীন।

ঝালিয়ে নিন: পর্ব ১২

দেখতে এক রকম বানানো যায়, কিন্তু div-কে বোতামের সমান করতে লাগে role="button", tabindex="0", Enter আর Space-এর জন্য keydown handler, disabled অবস্থা, focus-এর দাগ… আর আসল <button> এসব বিনা খরচে দেয়।

<style>
  .fake, button { font: inherit; padding: .5rem 1rem; border-radius: 6px; }
  .fake { display: inline-block; background: #0a6b3d; color: #fff; cursor: pointer; }
  button { background: #0a6b3d; color: #fff; border: 0; }
</style>
<p>এই লাইনে একবার চেপে Tab দিন, তারপর Enter বা Space.</p>
<div class="fake" onclick="console.log('div-এ ক্লিক')">div “বাটন”</div>
<button type="button" onclick="console.log('আসল button-এ ক্লিক')">আসল button</button>
<script>
  document.addEventListener('focusin', e =>
    console.log('focus পেল: <' + e.target.tagName.toLowerCase() + '>'));
</script>

ঝালিয়ে নিন: পর্ব ১২, পর্ব ১১

সংজ্ঞা: accessible name হলো screen reader যে নামে একটি element-কে চেনায় — “কার্টে যোগ করুন, বোতাম”। ব্রাউজার এটি একটি নির্দিষ্ট ক্রমে খোঁজে: আগে aria-labelledby, তারপর aria-label, তারপর নিজস্ব উৎস (label, alt, বোতামের ভেতরের লেখা, <caption>…), শেষে title.

• aria-labelledby="id" — পাতায় দেখা যাচ্ছে এমন অন্য element-এর লেখাকে নাম বানায়; একাধিক id-ও দেওয়া যায়। dialog-এর নাম তার শিরোনাম — এটিই সেরা উদাহরণ।
• aria-label="…" — দৃশ্যমান লেখা না থাকলে সরাসরি নাম; যেমন শুধু আইকনের “বন্ধ করুন” বোতাম। এটি বোতামের ভেতরের লেখাকে ঢেকে দেয়।
• aria-describedby="id" — নাম নয়, বাড়তি বিবরণ; নামের পরে, সাধারণত একটু থেমে পড়া হয় — পাসওয়ার্ডের নিয়ম, ভুলের বার্তা।

সাবধানতা: দৃশ্যমান লেখা আর accessible name যেন মেলে (WCAG ২.৫.৩ Label in Name) — বোতামে লেখা “জমা দিন”, aria-label “submit form” হলে ভয়েস দিয়ে চালানো মানুষ “জমা দিন” বলে কাজ পান না। আর aria-label div বা span-এর মতো ভূমিকাহীন element-এ নির্ভরযোগ্যভাবে কাজ করে না।

ঝালিয়ে নিন: পর্ব ১২

• tabindex="0" — সাধারণত focus পায় না এমন element-কে DOM-এর ক্রমে Tab-এর তালিকায় আনে। কাস্টম widget বা স্ক্রল করা যায় এমন অঞ্চলে (কি-বোর্ডে স্ক্রল করতে) কাজে লাগে।
• tabindex="-1" — Tab-এ আসে না, কিন্তু JavaScript দিয়ে el.focus() করা যায়। যেমন ভুলের সারাংশ বা নতুন পাতার শিরোনামে focus সরানো।
• ধনাত্মক (1, 2…) — পুরো পাতার স্বাভাবিক ক্রম ভেঙে নিজের ক্রম চাপায়।

যা বলবেন না: “Tab-এর ক্রম ঠিক করতে tabindex="1", "2" দিই।” এটি প্রায় সবসময় ভুল — পাতা বদলালে ক্রম ভেঙে যায়, আর বাকি element-গুলো সবার পরে আসে। সমাধান HTML-এর ক্রম ঠিক করা।

Skip link: পাতার একেবারে শুরুতে “সরাসরি মূল লেখায় যান” লিংক (href="#main"), যা focus পেলে দেখা যায়। কি-বোর্ড ব্যবহারকারীকে প্রতি পাতায় ৩০টি মেনু-লিংক পেরোতে হয় না (WCAG ২.৪.১)। সাথে <header>, <nav>, <main>, <footer> — screen reader-এর landmark, যা দিয়ে সরাসরি লাফানো যায়। এই পাতার একেবারে শুরুতেও একটি skip link আছে — Tab চেপে দেখুন।

ঝালিয়ে নিন: পর্ব ১২, পর্ব ১০

উত্তর: দাগটি সরাব না, নকশা বদলাব। ওই দাগই কি-বোর্ড ব্যবহারকারীর “আমি এখন কোথায়” — না থাকলে তাঁরা পথ হারান (WCAG ২.৪.৭ Focus Visible). ডিজাইনারের আসল অভিযোগ সাধারণত মাউসে ক্লিকের পরে দাগ দেখা যাওয়া। সমাধান :focus-visible — ব্রাউজার নিজে ঠিক করে কখন দাগ দরকার (কি-বোর্ড থেকে এলে দেখায়, মাউসে চাপলে বোতামে সাধারণত দেখায় না)। এটি Baseline Widely available.

button:focus-visible {
  outline: 3px solid #1a56db;
  outline-offset: 2px;
}

outline জায়গা নেয় না, তাই লেআউট নড়ে না; আর Windows-এর high contrast (forced colors) মোডেও দেখা যায় — box-shadow-এর দাগ সেখানে হারিয়ে যায়।

যা বলবেন না: “*:focus { outline: none; } দিয়ে দিই।” — CSS reset-এর পুরোনো এই লাইন বহু সাইটকে কি-বোর্ডে অচল করেছে।

ঝালিয়ে নিন: পর্ব ৩৪, পর্ব ৪৫ · অ্যাক্সেসিবল CSS

WCAG AA: সাধারণ লেখায় লেখা ও পটভূমির contrast ratio কমপক্ষে ৪.৫:১; বড় লেখায় (প্রায় 24px, বা মোটা হলে প্রায় 18.66px থেকে) ৩:১ (১.৪.৩)। বোতামের সীমানা, ইনপুটের ঘর, focus-এর দাগ, চার্টের রেখার মতো UI অংশে ৩:১ (১.৪.১১)। AAA-তে লেখায় ৭:১.

শুধু রং: “লাল ঘরগুলো ভুল”, “সবুজ মানে স্টকে আছে” — রং আলাদা করতে না পারা মানুষ (পুরুষদের মধ্যে এই সমস্যা তুলনামূলক বেশি দেখা যায়) কিছুই বোঝেন না, সাদা-কালো প্রিন্টেও হারায় (WCAG ১.৪.১)। রঙের সাথে লেখা, আইকন বা নকশা দিন; লেখার ভেতরের লিংকে underline রাখুন।

যাচাই: DevTools-এর color picker contrast দেখায়; Rendering প্যানেলে রং-দৃষ্টির সমস্যা অনুকরণ (vision deficiency emulation) করা যায়।

ঝালিয়ে নিন: পর্ব ২০, পর্ব ৪৫

ব্যবহার: সবার কাছ থেকে লুকাতে display: none; শুধু চোখ থেকে (যেমন আইকন-বোতামের লেখা) visually-hidden; শুধু screen reader থেকে (সাজসজ্জার SVG আইকন) aria-hidden="true" — কিন্তু কখনো focus পায় এমন element-এ নয়; modal খোলা অবস্থায় পেছনের পাতা অচল করতে inert.

ঝালিয়ে নিন: পর্ব ২৩, পর্ব ১২, পর্ব ৪৪

আধুনিক উত্তর: নিজে div দিয়ে না বানিয়ে <dialog> আর showModal(). এতে বিনা খরচে পাওয়া যায়: element top layer-এ বসে (z-index-এর লড়াই নেই), বাকি পাতা inert (পেছনে Tab বা ক্লিক যায় না), Esc-এ বন্ধ, খোলার সময় ভেতরে focus, আর ::backdrop দিয়ে পেছনের পর্দা সাজানো।

আপনার কাজ যা থেকে যায়:

• aria-labelledby দিয়ে dialog-এর শিরোনামকে নাম বানানো;
• স্পষ্ট একটি “বন্ধ করুন” বোতাম (শুধু ✕ হলে accessible name দিন);
• প্রথমে কোথায় focus যাবে — ধ্বংসাত্মক কাজের dialog-এ “বাতিল”-এ, বিপজ্জনক বোতামে নয় (autofocus দিয়ে ঠিক করা যায়);
• বন্ধ হলে focus যে বোতাম খুলেছিল সেখানে ফিরছে কি না পরীক্ষা — আধুনিক ব্রাউজার সাধারণত নিজেই ফেরায়, কিন্তু খোলার বোতাম মুছে গেলে নিজে সামলাতে হয়;
• খোলা অবস্থায় পেছনের পাতা স্ক্রল না হওয়া, আর prefers-reduced-motion-এ অ্যানিমেশন বন্ধ।

পরীক্ষা: শুধু কি-বোর্ডে খোলা-চালানো-বন্ধ; NVDA বা VoiceOver-এ খোলার সময় নাম আর ভূমিকা শোনা যায় কি না; ৪০০% zoom-এ ভেতরের সব অংশে পৌঁছানো যায় কি না।

ঝালিয়ে নিন: পর্ব ১১, পর্ব ১২, পর্ব ২৪

চোখে দেখা মানুষ কোণে ভেসে ওঠা বার্তা দেখেন; screen reader জানে না পাতার কোথাও কিছু বদলেছে। এজন্য live region: <div role="status"> (ভদ্রভাবে — হাতের কথা শেষ হলে পড়ে, অর্থাৎ aria-live="polite") বা জরুরি ভুলের জন্য role="alert" (সাথে সাথে বাধা দিয়ে)। কৌশলটি হলো: live region-টি পাতায় আগে থেকেই খালি অবস্থায় রাখুন, পরে শুধু ভেতরের লেখা বদলান — নতুন element-সহ একসাথে যোগ করলে অনেক screen reader সেটি ঘোষণা করে না।

Trade-off ও বাড়তি ভাবনা: সব কিছুতে alert দিলে মানুষ বিরক্ত হন — শুধু জরুরি ভুলে। কয়েক সেকেন্ডে নিজে মুছে যাওয়া toast-এ জরুরি তথ্য বা বোতাম রাখবেন না (“Undo” থাকলে যথেষ্ট সময় দিন — WCAG ২.২.১)।

ঝালিয়ে নিন: পর্ব ১২

না — স্বয়ংক্রিয় টুল সমস্যার একটি অংশই ধরে। Lighthouse বা axe দেখে alt আছে কি না, কিন্তু alt-টি অর্থবহ কি না বোঝে না; contrast মাপে, কিন্তু Tab-এর ক্রম যুক্তিসঙ্গত কি না জানে না। আমার পরীক্ষার ক্রম:

1. স্বয়ংক্রিয়: Lighthouse বা axe DevTools — সহজ ভুলগুলো দ্রুত সরাতে।
2. শুধু কি-বোর্ড: মাউস সরিয়ে Tab, Shift+Tab, Enter, Space, Esc, তীর-কি — সব কাজ করা যায়? focus সবসময় দেখা যায়? কোথাও আটকে যায় না তো?
3. Zoom ও reflow: ২০০% লেখা, আর ৩২০ CSS পিক্সেল চওড়ায় (প্রায় ৪০০% zoom) পাশে স্ক্রল ছাড়া পড়া যায় (WCAG ১.৪.১০)?
4. Screen reader: Windows-এ বিনামূল্যের NVDA, Mac ও iPhone-এ VoiceOver, Android-এ TalkBack — heading-এর তালিকা, ফর্মের নাম, বোতামের অবস্থা।
5. DevTools-এর Accessibility pane: প্রতিটি element-এর role, name আর accessibility tree.

সম্ভব হলে প্রকৃত ব্যবহারকারীদের দিয়ে পরীক্ষা — কোনো টুল তার বিকল্প নয়।

ঝালিয়ে নিন: পর্ব ১২, পর্ব ৪৫, পর্ব ৪৭

WCAG 2.2 (W3C Recommendation, অক্টোবর ২০২৩)-এর নতুন AA শর্ত:

• ২.৪.১১ Focus Not Obscured (Minimum) — sticky header বা cookie banner যেন focus পাওয়া element-কে পুরো ঢেকে না ফেলে (সমাধানের একটি অংশ scroll-padding-top).
• ২.৫.৭ Dragging Movements — টেনে আনার প্রতিটি কাজের একটি সাধারণ চাপের বিকল্প।
• ২.৫.৮ Target Size (Minimum) — চাপার জায়গা কমপক্ষে 24×24 CSS পিক্সেল (কিছু ব্যতিক্রমসহ)।
• ৩.৩.৮ Accessible Authentication (Minimum) — লগইনে স্মৃতি বা ধাঁধার পরীক্ষা নয়; password manager-এ পেস্ট আর autofill চলতে দিন।

A স্তরে এসেছে ৩.২.৬ Consistent Help আর ৩.৩.৭ Redundant Entry (একই তথ্য বারবার না চাওয়া); আর পুরোনো ৪.১.১ Parsing বাদ গেছে, কারণ আধুনিক ব্রাউজারের parser একে অপ্রয়োজনীয় করেছে।

ব্যবসায়িক যুক্তি: বেশি ক্রেতা (প্রবীণ গ্রাহক, চোখের সমস্যা থাকা মানুষ); ভালো SEO আর ফোনে ভালো UX (একই নীতি); আইনি ঝুঁকি কম — যুক্তরাষ্ট্রে এ নিয়ে মামলা হয়, আর ইউরোপীয় ইউনিয়নের European Accessibility Act ২০২৫ সালের জুন থেকে অনেক ধরনের ডিজিটাল পণ্য ও সেবায় প্রযোজ্য। শুরু থেকে করলে খরচ সামান্য, পরে ঠিক করলে অনেক বেশি।

ঝালিয়ে নিন: পর্ব ১২, পর্ব ৪৫

সংজ্ঞা: Cascade হলো সেই অ্যালগরিদম, যা একই element-এর একই property-র জন্য অনেকগুলো declaration থেকে একটিকে বেছে নেয়। ধাপগুলো ক্রমানুসারে — আগের ধাপে মীমাংসা হলে পরের ধাপ দেখাই হয় না:

1. Origin ও importance: ব্রাউজারের ডিফল্ট, ব্যবহারকারীর, আর লেখকের (আপনার) CSS; !important এই ক্রম উল্টে দেয়। transition আর animation-এর মানও এখানে আলাদা স্থান পায়।
2. Context: Shadow DOM-এর ভেতর-বাইরের প্রশ্ন।
3. Element-এ সরাসরি লেখা style (style="…") — যেকোনো selector-কে হারায়।
4. Cascade layer: পরে ঘোষিত layer জেতে; layer-এর বাইরের CSS সবার ওপরে।
5. Specificity.
6. Scope-এর নৈকট্য (@scope).
7. লেখার ক্রম: সব সমান হলে পরে লেখাটি জেতে।

যা বলবেন না: “যে নিয়ম পরে লেখা, সেটিই জেতে।” — এটি শুধু শেষ ধাপ। অনেক প্রার্থী specificity-তে থেমে যান; layer আর origin বললে আপনার উত্তর Senior-এর কাছাকাছি।

ঝালিয়ে নিন: পর্ব ১৮ · cascade, specificity আর inheritance

হিসাব: তিন ঘরের একটি সংখ্যা (a, b, c) — a = id-এর সংখ্যা; b = class, attribute selector আর pseudo-class-এর সংখ্যা; c = type selector আর pseudo-element-এর সংখ্যা। * আর combinator (>, +, ফাঁকা জায়গা) শূন্য। তুলনা বাঁ দিক থেকে — a-তে যে বড়, সে জেতে; সমান হলে b, তারপর c. এটি দশমিক সংখ্যা নয়: ১১টি class-ও একটি id-কে হারাতে পারে না।

a { font: bold 1.5rem sans-serif; }

#menu a            { color: crimson; }  /* (1,0,1) */
.list .item .link  { color: green; }    /* (0,3,0) */
nav ul li a.link   { color: orange; }   /* (0,1,4) */

মনে রাখুন: style="…" আর !important specificity-র অংশ নয় — এরা cascade-এর আগের ধাপে লড়ে (গ-০১)। ইন্টারভিউতে প্রায়ই বলা ভালো: “আমি specificity কম আর সমান রাখতে চাই — এক-class selector, যাতে লেখার ক্রম আর layer দিয়ে নিয়ন্ত্রণ করা যায়।”

ঝালিয়ে নিন: পর্ব ১৭, পর্ব ১৮

নিয়ম: :is(), :not() আর :has() নিজে কিছু যোগ করে না; এদের ভেতরের তালিকার সবচেয়ে ভারী selector-এর specificity নেয়। তাই :is(#main, .box) p = (1,0,1) — element-টি .box-এর ভেতরে থাকলেও! :where()-এর specificity সবসময় শূন্য, ভেতরে যা-ই থাকুক।

:where()-এর ব্যবহার: লাইব্রেরি, CSS reset আর design system-এর ডিফল্ট স্টাইল — :where(.btn) { … } লিখলে ব্যবহারকারী একটি সাধারণ class দিয়েই সহজে বদলাতে পারেন, specificity-র লড়াই ছাড়াই।

আরেকটি পার্থক্য: :is() আর :where()-এর তালিকা forgiving — ভেতরের একটি selector ব্রাউজার না চিনলে শুধু সেটি বাদ যায়। সাধারণ কমা-তালিকায় একটি অচেনা selector পুরো নিয়মটিই বাতিল করে দেয়।

ঝালিয়ে নিন: পর্ব ১৮, পর্ব ৩৪

উত্তর: খুব কম, আর ইচ্ছাকৃতভাবে। যুক্তিসঙ্গত জায়গা: (১) এমন utility class, যার কাজই হলো সবসময় জেতা — .visually-hidden, [hidden] { display: none !important; }; (২) তৃতীয় পক্ষের widget-এর inline style বদলানো, যা আর কোনোভাবে সম্ভব নয়; (৩) prefers-reduced-motion-এ সব অ্যানিমেশন থামানোর নিয়ম; (৪) ব্যবহারকারীর নিজের stylesheet — ব্যবহারকারীর !important লেখকের সবকিছুকে হারায়, এটিই অ্যাক্সেসিবিলিটির রক্ষাকবচ।

কেন বিপজ্জনক: এটি একটি “অস্ত্র প্রতিযোগিতা” শুরু করে — একটি !important হারাতে আরেকটি লাগে। আর @layer-এ !important-এর ক্রম উল্টো: আগের layer-এর important পরের layer-এর important-কে হারায় — যা অনেককে চমকে দেয়।

যা বলবেন না: “নিয়ম না খাটলে !important দিয়ে দিই।” এর বদলে বলুন: “আগে DevTools-এ দেখি কোন নিয়ম জিতছে আর কেন — তারপর selector হালকা করি বা layer ঠিক করি।”

ঝালিয়ে নিন: পর্ব ১৮, পর্ব ৩৫

Inheritance: কিছু property নিজে থেকে parent থেকে child-এ যায় — মূলত লেখার property: color, font-*, line-height, text-align, visibility, cursor. বাক্সের property যায় না: margin, padding, border, background, width. তাই body-তে একবার font দিলেই পুরো পাতায় চলে, কিন্তু body-র border প্রতিটি অনুচ্ছেদে বসে না।

• inherit — জোর করে parent-এর মান নাও (যেমন button { font: inherit; }, কারণ বোতাম ডিফল্টে পাতার font পায় না)।
• initial — spec-এর প্রাথমিক মান; সাবধান: display: initial হলো inline, div-এর block নয়।
• unset — উত্তরাধিকারী property হলে inherit, না হলে initial.
• revert — আপনার CSS বাদ দিয়ে ব্রাউজারের ডিফল্টে ফেরো (div আবার block); revert-layer — আগের layer-এর মানে ফেরো।

ঝালিয়ে নিন: পর্ব ১৮

Box model: প্রতিটি element একটি বাক্স — ভেতর থেকে বাইরে content, padding, border, margin. ডিফল্ট box-sizing: content-box-এ width শুধু content-এর মাপ; তাই width: 300px; padding: 20px; border: 5px দিলে বাক্সটি আসলে ৩৫০ পিক্সেল চওড়া হয়।

border-box: width-এর ভেতরেই padding আর border ধরা হয় — ৩০০ লিখলে ৩০০-ই। ফলে width: 50% দুটি কলাম padding দিলেও ভাঙে না। প্রচলিত নিয়ম:

*, *::before, *::after { box-sizing: border-box; }

বাড়তি তথ্য: margin কখনো width-এর অংশ নয়, background margin-এ আঁকা হয় না, আর outline বাক্সের মাপে কিছু যোগ করে না। পুরোনো Internet Explorer-এর quirks mode-এ বাক্স সবসময় এভাবেই মাপা হতো — অনেক বছর পরে মানদণ্ড সেই চিন্তাকেই ঐচ্ছিক হিসেবে গ্রহণ করে।

ঝালিয়ে নিন: পর্ব ১৯ · box model

সংজ্ঞা: normal flow-তে ওপর-নিচে পাশাপাশি দুটি block-এর vertical margin যোগ হয় না — বড়টি টিকে থাকে (margin collapsing). ওপরেরটির নিচে ৩০px আর নিচেরটির ওপরে ২০px হলে ফাঁক ৩০px, ৫০px নয়। একই ঘটনা parent আর প্রথম/শেষ child-এর মধ্যেও ঘটে, যদি মাঝে padding, border বা লেখা না থাকে — তখন child-এর margin parent-এর বাইরে “বেরিয়ে” যায়।

<style>
  .box { background: #cfe8ff; padding: 8px; }
  .a { margin-bottom: 30px; }
  .b { margin-top: 20px; }
  .parent { background: #ffe0b2; margin-top: 16px; }
  .child { margin: 24px 0 0; background: #fff8; }
  /* .parent { display: flow-root; } */
</style>
<div class="box a">ওপরের বাক্স (নিচে 30px)</div>
<div class="box b">নিচের বাক্স (ওপরে 20px)</div>
<div class="parent"><h3 class="child">ভেতরের শিরোনাম (ওপরে 24px)</h3></div>
<script>
  (function m() {
    if (!document.body.offsetWidth) return setTimeout(m, 50);
    const r = s => document.querySelector(s).getBoundingClientRect();
    console.log('দুই বাক্সের মাঝে ফাঁক: ' + (r('.b').top - r('.a').bottom) + 'px');
    console.log('parent-এর ওপর থেকে শিরোনাম: ' + (r('.child').top - r('.parent').top) + 'px');
  })();
</script>

কখন হয় না: flex বা grid-এর item-এ, float আর absolutely positioned element-এ, inline-block-এ, horizontal margin-এ, আর নিজের BFC তৈরি করা parent-এর সাথে তার child-এর। একারণে অনেক দল আজকাল শুধু এক দিকের margin (যেমন শুধু নিচে) বা parent-এ gap ব্যবহার করে — চমক কম।

ঝালিয়ে নিন: পর্ব ১৯, পর্ব ২৩

সংজ্ঞা: BFC হলো পাতার একটি স্বাধীন অঞ্চল, যেখানে block-গুলো নিজেদের মধ্যে normal flow-র নিয়মে সাজে, আর ভেতরের ঘটনা বাইরে প্রভাব ফেলে না। “আলাদা ঘর” ভাবুন — ঘরের ভেতরের আসবাব অন্য ঘরে গড়িয়ে যায় না।

তিনটি প্রভাব: (১) ভেতরের float-কে ধরে রাখে — parent-এর উচ্চতা float-সহ হিসাব হয় (পুরোনো “clearfix” hack-এর কাজ); (২) child-এর margin বাইরে বেরিয়ে parent-এর margin-এর সাথে collapse করে না; (৩) BFC-ওয়ালা element পাশের float-এর নিচে ঢুকে যায় না, পাশে জায়গা নেয়।

যা BFC তৈরি করে: root element; float; position: absolute/fixed; display: inline-block, table-cell; overflow-এর visible আর clip বাদে যেকোনো মান; contain: layout, content বা paint; flex ও grid-এর item; multi-column container; আর পরিষ্কার উদ্দেশ্যে বানানো display: flow-root (Baseline Widely available).

Senior সংযোজন: আগে overflow: hidden দিয়ে BFC বানানো হতো, কিন্তু তাতে বাইরে ছড়ানো ছায়া বা dropdown কেটে যায়। flow-root-এর কোনো পার্শ্বপ্রতিক্রিয়া নেই — তাই এটিই সঠিক উত্তর।

ঝালিয়ে নিন: পর্ব ২৩ · normal flow, display আর overflow

কারণ প্রায় সবসময় stacking context. z-index-এর তুলনা হয় শুধু একই stacking context-এর ভেতরে। কোনো পূর্বপুরুষ নতুন stacking context বানালে তার ভেতরের সবকিছু একটি “দল” হয়ে বাইরের তুলনায় নামে — ভেতরে ৯৯৯৯ হলেও দলটির বাইরের অবস্থান ঠিক করে পূর্বপুরুষের মান। একটি বহুতল ভবনের কথা ভাবুন: তিনতলার সবচেয়ে উঁচু তাকও চারতলার মেঝের নিচে।

<style>
  body { font-family: sans-serif; }
  .card { position: relative; width: 240px; padding: 1rem; }
  .one { background: #e3f2fd; height: 70px; transform: translateX(0); } /* ← নতুন stacking context */
  .two { background: #f8bbd0; height: 90px; z-index: 1; }
  .menu {
    position: absolute; top: 2.6rem; left: 1rem; z-index: 9999;
    width: 170px; height: 90px; padding: .5rem; background: #ffeb3b;
    border: 2px solid #333;
  }
</style>
<div class="card one">প্রথম কার্ড
  <div class="menu">dropdown · z-index: 9999</div>
</div>
<div class="card two">দ্বিতীয় কার্ড · z-index: 1</div>

যা stacking context বানায়: root; position relative/absolute-এর সাথে auto ছাড়া z-index; position: fixed ও sticky; flex/grid item-এ auto ছাড়া z-index; opacity ১-এর কম; transform, filter, backdrop-filter, perspective, clip-path, mask-এর none ছাড়া মান; mix-blend-mode; isolation: isolate; will-change-এ এদের নাম; contain: layout/paint; আর container-type: size/inline-size.

ভালো সমাধান: (১) অপ্রয়োজনীয় transform/opacity সরানো; (২) পূর্বপুরুষের স্তর ঠিক করা; (৩) dropdown-কে top layer-এ পাঠানো — popover বা <dialog>, যারা কোনো stacking context-এর বন্দি নয়। z-index-এর জন্য একটি ছোট স্কেল (যেমন CSS variable-এ --z-dropdown, --z-modal) দলের মধ্যে “৯৯৯৯ বনাম ৯৯৯৯৯” লড়াই থামায়।

ঝালিয়ে নিন: পর্ব ২৪ · position আর z-index, পর্ব ৪১

• px — CSS পিক্সেল, যন্ত্রের আসল পিক্সেল নয়; ফোনে একটি CSS পিক্সেলে কয়েকটি আসল পিক্সেল থাকতে পারে।
• em — element-এর নিজের font-size-এর গুণিতক (font-size-এ লিখলে parent-এর)। nested তালিকায় গুণ হতে হতে বড় হয়ে যায়।
• rem — root (html)-এর font-size-এর গুণিতক; পাতার সব জায়গায় এক মাপ।
• % — কিসের শতাংশ, তা property-ভেদে আলাদা: width-এ containing block-এর width, font-size-এ parent-এর font-size; আর অবাক করা নিয়ম — padding-top: 10%-ও containing block-এর width-এর শতাংশ।

rem কেন: অনেকে ব্রাউজারের সেটিংসে ডিফল্ট লেখার মাপ বড় করে রাখেন। rem সেই পছন্দ মেনে বড় হয়, html বা লেখায় px দিলে উপেক্ষা হয়। (Ctrl/⌘ + চাকার zoom দুটোতেই কাজ করে — পার্থক্যটা ডিফল্ট font-size সেটিংসে।)

oklch(): lightness মানুষের চোখের অনুভূতির সাথে মেলে — একই L মানের দুটি রং প্রায় সমান উজ্জ্বল দেখায়, যা hsl-এ হয় না। তাই রঙের প্যালেট আর contrast নিয়ন্ত্রণ সহজ, আর sRGB-র বাইরের উজ্জ্বল রংও (P3 পর্দায়) লেখা যায়। এখন Baseline Widely available.

ঝালিয়ে নিন: পর্ব ২০ · একক আর রং, পর্ব ২১

Pseudo-class (এক কোলন — :hover, :focus-visible, :nth-child(), :checked) একটি অবস্থা বা অবস্থান বেছে নেয় — element-টি আগে থেকেই আছে। Pseudo-element (দুই কোলন — ::before, ::after, ::first-line, ::placeholder, ::marker, ::backdrop) element-এর একটি অংশ বা বানানো নতুন বাক্সকে সাজায়। ::before/::after-এ content না দিলে কিছুই আঁকা হয় না।

সাবধানতা: দাম, “নতুন” লেবেল, ধাপের নম্বরের মতো আসল তথ্য content-এ রাখবেন না — কপি হয় না, অনুবাদ হয় না, screen reader-এ ভরসাযোগ্য নয়। এখানে শুধু সাজ: আইকন, তীর, উদ্ধৃতিচিহ্ন। পুরোনো এক-কোলন রূপ (:before) ব্রাউজার এখনো মানে, শুধু পিছনের দিকের সামঞ্জস্যের জন্য।

ঝালিয়ে নিন: পর্ব ৩৪

Critical rendering path: HTML → DOM; CSS → CSSOM; দুটি মিলে render tree (যা দেখা যাবে); তারপর layout (কোন বাক্স কোথায়, কত বড়), paint (পিক্সেলে রং), আর composite (স্তরগুলো জুড়ে চূড়ান্ত ছবি, প্রায়ই GPU-তে)। CSS ছাড়া ব্রাউজার আঁকতে পারে না — তাই head-এর CSS render-blocking.

• Reflow (layout): width, height, margin, font-size, লেখা যোগ — জ্যামিতি বদলালে; প্রায়ই আশেপাশের অনেক element-এর হিসাব আবার হয়। সবচেয়ে দামি।
• Repaint: color, background, box-shadow — শুধু রং বদলালে; layout লাগে না।
• শুধু composite: transform আর opacity — প্রায়ই main thread ছাড়াই, তাই অ্যানিমেশনের জন্য সবচেয়ে মসৃণ।

Senior সংযোজন: JavaScript-এ একবার মাপ পড়া (offsetHeight) আর একবার style লেখা পালাক্রমে লুপে করলে ব্রাউজার বারবার জোর করে layout করে — layout thrashing. সব পড়া আগে, সব লেখা পরে। আর will-change মেপে দেখে শুধু যা সত্যিই নড়ে তাতে।

ঝালিয়ে নিন: পর্ব ০১, পর্ব ৩৮, পর্ব ৪৯

উপসংহার: থিম, dark mode, component-এর রূপ (variant) — CSS variable; build-সময়ের হিসাব, breakpoint-এর মান আর বারবার কোড তৈরি — Sass. আধুনিক প্রজেক্টে দুটি পাশাপাশি চলে, আর অনেক জায়গায় Sass-এর দরকার কমে এসেছে।

ঝালিয়ে নিন: পর্ব ৩৩, পর্ব ৫০

ক্লাসিক প্রশ্ন, কিন্তু ভালো উত্তরে একাধিক উপায় আর কখন কোনটি — তা থাকে।

.stage {
  display: grid;
  place-items: center;   /* দুই দিকেই মাঝখানে */
  height: 200px;
  background: #eef2ff;
}
.box {
  padding: 1rem 1.5rem;
  background: #1a56db;
  color: #fff;
  font: bold 1.25rem sans-serif;
}

• grid + place-items: center — সবচেয়ে ছোট; একটি child-এর জন্য আদর্শ।
• flex + justify-content + align-items — একাধিক item এক সারিতে মাঝখানে।
• position: absolute; inset: 0; margin: auto (নির্দিষ্ট মাপসহ) বা top: 50%; left: 50%; translate: -50% -50% — overlay বা ব্যাজের মতো flow-র বাইরের element.
• শুধু আড়াআড়ি, block-এর ক্ষেত্রে: margin-inline: auto আর একটি width; লেখার জন্য text-align: center.

যা বলবেন না: “<center> ট্যাগ” বা টেবিলের vertical-align কৌশল — দুটিই পুরোনো যুগের।

ঝালিয়ে নিন: পর্ব ২৬, পর্ব ২৭

এক বাক্যে: Flexbox এক দিকের (সারি বা কলাম) সাজ, যেখানে item-এর নিজের মাপ থেকে লেআউট তৈরি হয় — content-out; Grid দুই দিকের সাজ, যেখানে আগে কাঠামো (সারি-কলাম) ঠিক করে item বসানো হয় — layout-in.

• Flex: navbar-এর লিংক, বোতামের দল, আইকন আর লেখা পাশাপাশি, ট্যাগের সারি যা মোড়ানো দরকার, কার্ডের ভেতরে নিচে ঠেলে দেওয়া বোতাম।
• Grid: পাতার কাঠামো (header-sidebar-main), কার্ডের gallery যেখানে কলাম মিলতে হবে, ড্যাশবোর্ড, ফর্মের লেবেল-ঘর সারিবদ্ধ করা, element একটির ওপর আরেকটি রাখা (একই grid area).

Mid স্তরের যোগ: “একটি আরেকটির বিকল্প নয় — বাইরে grid, প্রতিটি কার্ডের ভেতরে flex খুব স্বাভাবিক। শেষ সারিতে কার্ড কম থাকলেও কলাম মেলাতে চাইলে flex-wrap নয়, grid; কারণ flex-এর প্রতিটি লাইন স্বাধীন।”

ঝালিয়ে নিন: পর্ব ২৫, পর্ব ২৭, পর্ব ২৯

flex একটি shorthand: flex-grow flex-shrink flex-basis. ব্রাউজার আগে প্রতিটি item-কে তার flex-basis মাপে বসায়, তারপর বাকি খালি জায়গা grow-এর অনুপাতে ভাগ করে দেয়; জায়গা কম পড়লে shrink-এর (আর basis-এর) অনুপাতে ছোট করে।

• flex: 1 = 1 1 0% — basis শূন্য, তাই সব জায়গাই “বাকি”; ফলে flex: 1 দেওয়া item-গুলো content যা-ই হোক, সমান চওড়া (min-content-এর সীমার ভেতরে)।
• flex: auto = 1 1 auto — আগে নিজের content-এর মাপ, তারপর বাকি জায়গা ভাগ — লম্বা লেখার item বড় থাকে।
• flex: none = 0 0 auto — একদম নড়বে না; আইকন বা avatar-এর জন্য।
• ডিফল্ট (initial) = 0 1 auto — বাড়ে না, দরকারে ছোট হয়।

ফাঁদ: flex: 1 দিলেও item তার min-content-এর চেয়ে ছোট হয় না — পরের প্রশ্নটি ঠিক এ নিয়ে।

ঝালিয়ে নিন: পর্ব ২৫ · Flexbox

কারণ: flex item-এর min-width-এর ডিফল্ট auto, যার মানে “content-এর সবচেয়ে ছোট মাপের (min-content) চেয়ে ছোট হবো না” — একে বলে automatic minimum size. white-space: nowrap দেওয়া লেখার min-content পুরো লাইনের সমান, তাই item ছোট হতেই পারে না।

.row {
  display: flex; gap: .5rem; align-items: center;
  width: 300px; padding: .5rem; border: 2px solid #555;
  font-family: sans-serif;
}
.icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: #0a6b3d; color: #fff;
}
.text {
  flex: 1;
  /* min-width: 0; */
}
.title {
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

একই ফাঁদ grid-এ: 1fr আসলে minmax(auto, 1fr) — কোড বা লম্বা লিংক থাকা কলাম উপচে পড়ে। সমাধান minmax(0, 1fr). এই উত্তরটি দিলে বোঝা যায় আপনি বাস্তব প্রজেক্টে এই বাগের মুখোমুখি হয়েছেন।

ঝালিয়ে নিন: পর্ব ২৫, পর্ব ২৬, পর্ব ২৮

দুটিই বলে “যত কলাম আঁটে তত বানাও”। পার্থক্য দেখা যায় যখন item কম: auto-fill খালি কলামগুলো রেখে দেয়, auto-fit খালি কলাম গুটিয়ে ফেলে, ফলে থাকা item-গুলো 1fr দিয়ে চওড়া হয়ে পুরো সারি ভরে।

body { font-family: sans-serif; }
.g {
  display: grid;
  gap: 8px;
  outline: 1px dashed #999;
}
.fill { grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr)); }
.fit  { grid-template-columns: repeat(auto-fit,  minmax(min(100px, 100%), 1fr)); }
.g div { background: #c8e6c9; padding: 1rem; text-align: center; }

লাইনটির প্রতিটি অংশ: minmax(…, 1fr) — প্রতিটি কলাম কমপক্ষে ততটা, বাকি জায়গা সমান ভাগ; min(100px, 100%) — পাত্র ১০০px-এর চেয়েও সরু হলে কার্ড পাত্রের সমান, পাশে স্ক্রল নয়। সাধারণ পছন্দ: কার্ডের gallery-তে auto-fit, ক্যালেন্ডার বা নির্দিষ্ট কলামের ছকে auto-fill.

ঝালিয়ে নিন: পর্ব ২৮ · auto-fit, minmax আর subgrid

CSS শুধু চেহারা বদলায়; Tab-এর ক্রম আর screen reader-এর পড়ার ক্রম আসে DOM-এর ক্রম থেকে। ফোনে sidebar ওপরে আর ডেস্কটপে ডানে — এটুকু ঠিক আছে। কিন্তু যদি HTML-এ “জমা দিন” বোতাম আগে আর CSS দিয়ে সেটিকে ফর্মের নিচে দেখান, কি-বোর্ড ব্যবহারকারী আগে বোতামে পৌঁছান — বিভ্রান্তিকর, আর WCAG ১.৩.২ (Meaningful Sequence) ও ২.৪.৩ (Focus Order) ভাঙতে পারে।

নিয়ম: HTML-এ অর্থের সঠিক ক্রম, CSS-এ শুধু সাজ। order, flex-direction: row-reverse, grid-এর স্থান বদল — সাজসজ্জার অংশে ঠিক আছে, ক্রিয়ার ক্রমে নয়। নতুন reading-flow property চোখের ক্রমের সাথে focus মেলানোর প্রস্তাব, কিন্তু এখনো শুধু Chromium-এ — not yet Baseline; তাই এটি বাড়তি সুরক্ষা, HTML ঠিক করার বিকল্প নয়।

ঝালিয়ে নিন: পর্ব ২৮, পর্ব ৪৫

সমস্যা: পাশাপাশি তিনটি পণ্যের কার্ড। একটির শিরোনাম দুই লাইনের, তাই তার দাম আর বোতাম নিচে নেমে গেছে — তিন কার্ডের দাম আর এক লাইনে নেই। প্রতিটি কার্ড নিজের grid, তাই একে অপরের সারির উচ্চতা জানে না।

সমাধান: কার্ডটি বাইরের grid-এর কয়েকটি সারি জুড়ে বসুক, আর নিজের সারির জন্য grid-template-rows: subgrid লিখুক — তখন ভেতরের শিরোনাম, দাম, বোতাম বাইরের grid-এর একই সারির রেখা মেনে চলে, সব কার্ডে মেলে।

.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card {
  display: grid;
  grid-row: span 3;               /* ছবি+শিরোনাম, দাম, বোতাম */
  grid-template-rows: subgrid;
}

subgrid এখন Baseline — সব প্রধান ব্রাউজারে। আগে এর জন্য নির্দিষ্ট height (লম্বা বাংলা শিরোনামে লেখা কাটে) বা JavaScript-এ মাপ মেলানো লাগত। Senior উত্তরে আরও বলুন: masonry-ধাঁচের লেআউট নিয়ে spec-এ কাজ চলছে, এখনো Baseline নয়।

ঝালিয়ে নিন: পর্ব ২৮

• static — ডিফল্ট, normal flow; top/z-index খাটে না।
• relative — flow-তে জায়গা রেখে নিজের জায়গা থেকে সরে; সবচেয়ে বেশি ব্যবহার absolute child-এর “নোঙর” হিসেবে।
• absolute — flow থেকে বেরিয়ে যায়; বসে কাছের positioned পূর্বপুরুষের (static নয়) containing block-এর সাপেক্ষে, না পেলে প্রাথমিক containing block. transform বা filter থাকা পূর্বপুরুষও containing block হয়।
• fixed — viewport-এর সাপেক্ষে, স্ক্রলে নড়ে না; কিন্তু পূর্বপুরুষে transform, filter বা contain থাকলে তার সাপেক্ষে আটকে যায় — চেনা বাগ।
• sticky — স্বাভাবিকভাবে চলে, নির্দিষ্ট সীমায় পৌঁছালে আটকে থাকে, parent শেষ হলে সাথে চলে যায়। Baseline Widely available, prefix লাগে না।

sticky না চললে চেকলিস্ট: (১) top (বা bottom) দিয়েছেন? (২) কোনো পূর্বপুরুষে overflow: hidden/auto/scroll? — সে নিজেই স্ক্রল-পাত্র হয়ে যায়; দরকার হলে overflow: clip, যা স্ক্রল-পাত্র বানায় না। (৩) parent কি element-এর সমান লম্বা? আটকানোর জায়গাই নেই। (৪) flex/grid-এ item টেনে লম্বা হয়ে গেছে? align-self: start.

ঝালিয়ে নিন: পর্ব ২৪ · position আর z-index

Sticky footer (আধুনিক উপায়):

body {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* header, main, footer */
  margin: 0;
}

main বাকি সব জায়গা নেয়, তাই footer সবসময় নিচে — কনটেন্ট বেশি হলে স্বাভাবিকভাবে নিচে নামে। dvh ফোনের ঠিকানার বার ওঠানামা হিসাব করে (Baseline Widely available); খুব পুরোনো ব্রাউজারের জন্য আগের লাইনে min-height: 100vh. flex দিয়েও হয়: flex-direction: column আর main-এ flex: 1. পুরোনো উপায় — negative margin বা নির্দিষ্ট footer-উচ্চতা — আর দরকার নেই।

gap বনাম margin: flex আর grid-এ item-এর মাঝের ফাঁকের জন্য gap — শুধু মাঝে বসে, প্রথমটির আগে বা শেষটির পরে বাড়তি ফাঁক নেই, মোড়ানো লাইনেও ঠিক থাকে, আর margin collapsing-এর চমক নেই। flex-এ gap এখন সব প্রধান ব্রাউজারে বহু বছর ধরে চলে। margin থাকে কোনো একটি element-কে আলাদা দূরত্ব দিতে, বা normal flow-র লেখায়।

ঝালিয়ে নিন: পর্ব ২৯ · প্রচলিত লেআউট প্যাটার্ন, পর্ব ২০

Mobile-first: আগে ছোট পর্দার জন্য সরল, এক কলামের CSS লিখি; তারপর @media (width >= 48rem) দিয়ে বড় পর্দায় যোগ করি। উল্টো পথে (desktop-first, max-width) ফোনে অনেক নিয়ম আবার বাতিল করতে হয়। বাংলাদেশে বেশিরভাগ ব্যবহারকারী ফোনে ওয়েব দেখেন, প্রায়ই ধীর নেটওয়ার্কে — তাই এটি শুধু কোডের অভ্যাস নয়, ব্যবহারকারীর বাস্তবতা।

Breakpoint: ডিভাইসের নামে নয় (“iPhone-এর জন্য ৩৯০”), কনটেন্টের প্রয়োজনে — ব্রাউজার টেনে বড় করতে করতে যেখানে নকশা “ভাঙে” বা অদ্ভুত দেখায়, সেখানেই। em/rem-এ লিখলে ব্যবহারকারীর লেখার মাপের সেটিংসের সাথেও মেলে। আধুনিক range syntax (width >= 600px) Baseline Widely available — min-width আর max-width-এর সীমায় ভগ্নাংশ পিক্সেলের ফাঁকও থাকে না।

Mid স্তরের যোগ: “অনেক জায়গায় breakpoint-এর দরকারই নেই — clamp(), grid-এর auto-fit, flex-wrap আর container query দিয়ে লেআউট নিজের জায়গা দেখে মানিয়ে নেয়।”

ঝালিয়ে নিন: পর্ব ৩০, পর্ব ৩১

Media query দেখে পুরো viewport (আর ব্যবহারকারীর পছন্দ — dark mode, reduced motion, print). Container query দেখে একটি নির্দিষ্ট পূর্বপুরুষের মাপ — একই কার্ড মূল কলামে চওড়া আর sidebar-এ সরু হলে নিজে থেকেই সাজ বদলায়। দুটি পাত্র, একই কার্ড:

<style>
  .wrap {
    container-type: inline-size;        /* এই পাত্রের মাপ দেখা হবে */
    width: 240px; max-width: 100%; margin-bottom: 12px;
    padding: 8px; border: 2px dashed #888;
    resize: horizontal; overflow: auto;
  }
  .wide { width: 460px; }
  .card { display: grid; gap: .5rem; font-family: sans-serif; }
  .thumb { aspect-ratio: 16 / 9; border-radius: 6px;
           background: linear-gradient(135deg, #ff8a65, #ffd54f); }
  .card h3 { margin: 0; }
  @container (width >= 400px) {
    .card { grid-template-columns: 150px 1fr; align-items: center; }
  }
</style>
<div class="wrap"><article class="card"><div class="thumb"></div>
  <div><h3>ইলিশ — ৳১৬০০/কেজি</h3><p>পদ্মার তাজা ইলিশ</p></div></article></div>
<div class="wrap wide"><article class="card"><div class="thumb"></div>
  <div><h3>ইলিশ — ৳১৬০০/কেজি</h3><p>পদ্মার তাজা ইলিশ</p></div></article></div>

সিদ্ধান্তের নিয়ম: পাতার বড় কাঠামো, ব্যবহারকারীর পছন্দ আর ছাপা → media query; বারবার ব্যবহার হওয়া component → container query. Container size query এখন Baseline Widely available; style query আর scroll-state query এখনো Baseline নয়।

ঝালিয়ে নিন: পর্ব ৩১ · media query আর container query

• একই ছবি, আলাদা মাপ (resolution switching): srcset="shari-400.avif 400w, shari-800.avif 800w" + sizes="(width >= 60rem) 33vw, 100vw". আপনি বলেন ছবিটি পর্দায় কত চওড়া দেখাবে; ব্রাউজার পর্দার ঘনত্ব আর নেটওয়ার্ক বুঝে ফাইল বাছে।
• আলাদা কাটা বা অনুপাত (art direction): <picture>-এ <source media="…"> — ফোনে চৌকো, ডেস্কটপে চওড়া ব্যানার।
• নতুন ফরম্যাট, পুরোনোর fallback: <source type="image/avif">, তারপর WebP, শেষে <img>-এ JPEG.

সবখানে width আর height (CLS ঠেকায়), প্রথম পর্দার বাইরের ছবিতে loading="lazy". সাধারণ ভুল: sizes না দেওয়া — তখন ব্রাউজার ধরে নেয় ছবি পুরো পর্দা চওড়া (100vw), আর ছোট কার্ডেও বড় ফাইল নামায়।

আইকন: inline SVG বা SVG sprite (<use>) — যেকোনো মাপে ঝকঝকে, currentColor দিয়ে লেখার রঙে রং বদলায়। সাজসজ্জার আইকনে aria-hidden="true", আর শুধু-আইকন বোতামে accessible name. Icon font এখন পুরোনো পথ — ফন্ট না এলে খালি বাক্স, screen reader-এ অদ্ভুত অক্ষর।

ঝালিয়ে নিন: পর্ব ৩২, পর্ব ৪৪ · SVG আর আইকন

উত্তর: :has() একটি relational pseudo-class — “যে element-এর ভেতরে (বা পরে) এমন কিছু আছে”। বহু বছর ধরে চাওয়া “parent selector” এটিই, তবে তার চেয়েও বেশি: আগের ভাই-বোন, পরিমাণ (quantity query), ফর্মের অবস্থা। Safari আর Chrome ২০২২ সালে, Firefox ২০২৩ সালের ডিসেম্বরে এটি আনে; এখন Baseline Widely available.

form { font: 1.1rem sans-serif; }
.note { display: none; margin-top: .75rem; }

/* checkbox টিক দেওয়া থাকলেই বার্তার ঘর দেখাও — JavaScript ছাড়া */
form:has(input[name="gift"]:checked) .note { display: block; }

/* যে label-এর ভেতরে টিক দেওয়া checkbox, সেটি মোটা আর সবুজ */
label:has(:checked) { font-weight: bold; color: #0a6b3d; }

সাবধানতা: খুব বিস্তৃত selector (body:has(…) দিয়ে পুরো পাতা) প্রতিটি পরিবর্তনে বড় অংশের style আবার হিসাব করাতে পারে — যতটা সম্ভব সংকীর্ণ রাখুন। আর এমন দরকারি আচরণ শুধু CSS-এর ভরসায় রাখবেন না, যার মান সার্ভারেও লাগে।

ঝালিয়ে নিন: পর্ব ৩৪

উত্তর: physical property (left, right, top, bottom) পর্দার দিক বলে; logical property লেখার প্রবাহের দিক বলে — inline = লাইনের দিক, block = অনুচ্ছেদ যে দিকে জমে। বাংলা-ইংরেজিতে inline-start মানে বাঁ, কিন্তু আরবি-উর্দুর মতো ডান থেকে বাঁয়ের (RTL) লেখায় ডান। একবার logical লিখলে দুই দিকের ভাষায় নকশা আয়নার মতো নিজে উল্টায়।

<style>
  div { font: 1.05rem sans-serif; margin-block: .6rem; padding-block: .5rem; }
  .logical  { border-inline-start: 6px solid #1a56db; padding-inline-start: 1rem;
              background: #eef2ff; }
  .physical { border-left: 6px solid #c62828; padding-left: 1rem;
              background: #fdecea; }
</style>
<div class="logical">logical — বাংলায় শুরুর দাগ বাঁয়ে</div>
<div class="logical" dir="rtl" lang="ar">مرحبا بكم في متجرنا</div>
<div class="physical" dir="rtl" lang="ar">مرحبا بكم في متجرنا</div>

সাথে আসে inline-size (width-এর logical রূপ), inset-inline, text-align: start, border-start-start-radius. Baseline Widely available, তাই নতুন CSS-এ ডিফল্ট হিসেবে লেখা যায়। বাংলা-ইংরেজির সাইটেও লাভ আছে: পরে উর্দু বা আরবি সংস্করণ লাগলে CSS নতুন করে লিখতে হয় না।

ঝালিয়ে নিন: পর্ব ৩৫ · nesting, clamp(), logical property আর @layer

সমস্যা: বড় প্রজেক্টে reset, framework, component আর utility — সবার CSS একসাথে। কোনটি কাকে হারাবে, তা ঠিক হতো specificity আর ফাইলের ক্রম দিয়ে — ফলে selector ভারী হতে থাকে, শেষে !important. @layer একটি স্পষ্ট অগ্রাধিকার দেয়: পরে ঘোষিত layer জেতে — selector যত ভারীই হোক, কারণ cascade layer দেখে specificity-র আগে।

@layer base, components;   /* ক্রম এখানেই ঠিক হলো */

@layer components {
  .btn {                   /* (0,1,0) */
    background: #0a6b3d; color: #fff;
    border: 0; padding: .6rem 1.2rem; font-size: 1.1rem;
  }
}

@layer base {
  #buy { background: crimson; }   /* (1,0,0) — তবু হারবে */
}

Senior সংযোজন: !important-এ layer-এর ক্রম উল্টো — আগের layer-এর important জেতে, যাতে reset-এর জরুরি নিয়ম রক্ষা পায়। তৃতীয় পক্ষের CSS-কে @import url(bootstrap.css) layer(vendor); দিয়ে নিচের layer-এ বসালে আপনার যেকোনো সাধারণ নিয়ম তাকে হারায়। @layer Baseline Widely available; Tailwind v4-এর মতো আধুনিক টুলও ভেতরে আসল cascade layer ব্যবহার করে।

ঝালিয়ে নিন: পর্ব ১৮, পর্ব ৩৫, পর্ব ৫১

প্রায় এক, কিন্তু দুটি গুরুত্বপূর্ণ পার্থক্য:

1. লেখা জোড়া লাগানো নেই: Sass-এ .card { &__title { } } হয়ে যায় .card__title — BEM-এর জন্য জনপ্রিয়। native CSS-এ & একটি selector-এর প্রতিনিধি, লেখার টুকরো নয়; তাই &__title সেই অর্থে কাজ করে না।
2. specificity: native-এ & আচরণ করে :is()-এর মতো। .a, #b { & .c { } } মানে :is(.a, #b) .c — specificity (1,1,0), এমনকি .a .c-এর ক্ষেত্রেও। Sass এটিকে আলাদা দুটি selector বানায়: .a .c (0,2,0) আর #b .c (1,1,0).

শুরুর দিকের ব্রাউজারে nested selector element-এর নাম দিয়ে শুরু হলে & লিখতে হতো; spec পরে শিথিল হয়েছে, এখন লাগে না। CSS nesting ২০২৩ সালের ডিসেম্বরে Baseline Newly available হয়, আর ৩০ মাসের নিয়মে ২০২৬-এর মাঝামাঝি থেকে Widely available. খুব পুরোনো ব্রাউজার লক্ষ্য হলে build টুল (PostCSS, Lightning CSS) দিয়ে সমতল করে নিন।

যা বলবেন না: “nesting আছে, তাই পাঁচ-ছয় স্তর গভীরে লিখি।” গভীর nesting মানে ভারী selector আর HTML-এর কাঠামোর সাথে শক্ত বাঁধন — Sass-এর যুগের পুরোনো শিক্ষা এখনো খাটে।

ঝালিয়ে নিন: পর্ব ৩৫, পর্ব ৫০

clamp(MIN, PREFERRED, MAX) — মাঝের মান পছন্দ, কিন্তু দুই সীমার বাইরে যাবে না:

h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }

ফোনে প্রায় 28px, বড় পর্দায় সর্বোচ্চ 48px, মাঝে মসৃণভাবে বাড়ে — কোনো breakpoint ছাড়া। Fluid typography-র এটিই আধুনিক রূপ; min(), max(), clamp() Baseline Widely available.

শুধু vw-এর সমস্যা: font-size: 4vw জানালার চওড়ার সাথে বাঁধা — ব্যবহারকারী zoom করলে CSS পিক্সেলে viewport ছোট হয়, তাই লেখা প্রায় বড়ই হয় না; WCAG ১.৪.৪ (২০০% পর্যন্ত লেখা বড় করা) ভাঙতে পারে। তাই মাঝের মানে সবসময় একটি rem অংশ রাখুন (1.2rem + 2.5vw), আর সর্বোচ্চ মান সর্বনিম্নের আড়াই গুণের বেশি না রাখাই নিরাপদ।

ঝালিয়ে নিন: পর্ব ২১, পর্ব ৩৫, পর্ব ৪৫

1. রং টোকেনে: --surface, --text, --accent-এর মতো অর্থবহ (semantic) CSS variable; component-গুলো শুধু এগুলোই ব্যবহার করে।
2. ব্যবহারকারীর পছন্দ মানা: @media (prefers-color-scheme: dark)-এ টোকেনের মান বদল; অথবা আধুনিক light-dark(#fff, #111) (২০২৪ থেকে সব প্রধান ব্রাউজারে, Baseline Newly available).
3. color-scheme: light dark: ব্রাউজারকে জানানো — scrollbar, ফর্মের ঘর আর ডিফল্ট পটভূমিও নিজে অন্ধকার হয়; light-dark()-এর জন্যও এটি লাগে।
4. নিজের toggle: <html data-theme="dark"> আর পছন্দটি localStorage-এ; কাজটি head-এর একটি ছোট script-এ CSS-এর আগে করুন, নইলে খোলার মুহূর্তে সাদা ঝলক।
5. যাচাই: দুই থিমেই contrast (৪.৫:১), focus-এর দাগ, ছবি আর লোগো; একদম কালো (#000) পটভূমিতে উজ্জ্বল সাদা লেখা অনেকের চোখে কাঁপে — সামান্য ধূসর ভালো।

ঝালিয়ে নিন: পর্ব ৩৩, পর্ব ৩৬ · dark mode আর থিম

Transition দুই অবস্থার মাঝের পরিবর্তনকে মসৃণ করে — ট্রিগার লাগে (hover, class বদল)। Animation @keyframes দিয়ে নিজে থেকে চলে, অনেক ধাপ, পুনরাবৃত্তি, দিক বদল — loading spinner, skeleton. সাধারণ নিয়ম: অবস্থা বদলে transition, স্বাধীন গতিতে animation.

পারফরম্যান্স: transform আর opacity অ্যানিমেট করুন — width, top, margin প্রতি ফ্রেমে layout করায় (গ-১২)। খোলা-বন্ধের অ্যানিমেশনে display বদলানো এখন transition-behavior: allow-discrete আর @starting-style দিয়ে সম্ভব (Baseline Newly available).

অ্যাক্সেসিবিলিটি: @media (prefers-reduced-motion: reduce)-এ বড় নড়াচড়া, parallax, স্বয়ংক্রিয় স্লাইড বন্ধ বা নরম — vestibular সমস্যা থাকা মানুষের মাথা ঘোরে। আরও নিরাপদ পথ উল্টোটা: অ্যানিমেশন লিখুন শুধু no-preference-এর ভেতরে। ৫ সেকেন্ডের বেশি চলা নড়াচড়া থামানোর উপায় দিন (WCAG ২.২.২), আর সেকেন্ডে তিনবারের বেশি ঝলকানি নয় (২.৩.১)।

ঝালিয়ে নিন: পর্ব ৩৮, পর্ব ৩৯, পর্ব ৪০, পর্ব ৪২, পর্ব ৪৫

উত্তরের কাঠামো: “নির্ভর করে feature না চললে কী হারায় তার ওপর।” তিনটি প্রশ্ন: (১) Baseline অবস্থা কী — MDN-এর Baseline চিহ্ন বা Can I use দেখি; (২) আমাদের ব্যবহারকারীরা কোন ব্রাউজারে — analytics দেখি; (৩) না চললে পাতা কি শুধু কম সুন্দর, নাকি অচল?

• View Transitions (একই পাতায়): Baseline Newly available — না চললে শুধু অ্যানিমেশন ছাড়া পাতা বদলায়; তাই নির্ভয়ে, reduced motion-এর ব্যবস্থাসহ। পাতা বদলের (cross-document) রূপটি এখনো Baseline নয়।
• @scope: সদ্য Newly available — Firefox সবার শেষে যোগ দিয়েছে; না চললে সাজ পুরো হারায়, তাই এখন সাবধানে বা fallback-সহ।
• Anchor positioning: এখনো সব ব্রাউজারে নিশ্চিত নয় — tooltip-এর জন্য @supports (anchor-name: --x)-এর ভেতরে, বাইরে একটি সাধারণ absolute অবস্থান।

এটাই progressive enhancement: সবার জন্য কাজের ভিত্তি, নতুন ব্রাউজারে বাড়তি সুবিধা। AI প্রায়ই এগুলোর পুরোনো খসড়ার নাম দেয় (যেমন inset-area, যার এখনকার নাম position-area) — তাই সবসময় বর্তমান spec মিলিয়ে নিই।

ঝালিয়ে নিন: পর্ব ৩৭ · একেবারে নতুন CSS, পর্ব ৪৮

মাঝের মান “উন্নতি দরকার”। মাপা হয় আসল ব্যবহারকারীদের পাতা-খোলার ৭৫তম percentile-এ — অর্থাৎ বেশিরভাগ মানুষের অভিজ্ঞতা ভালো হতে হবে, শুধু আপনার দ্রুত ল্যাপটপে নয়। ২০২৪ সালের মার্চে INP পুরোনো FID-এর জায়গা নেয়।

যা বলবেন না: “FID ১০০ মিলিসেকেন্ডের নিচে রাখি।” — পুরোনো তথ্য; এটি দেখায় আপনার জ্ঞান ২০২৪-এর আগের।

ঝালিয়ে নিন: পর্ব ৪৯ · পারফরম্যান্স

CSS ছাড়া আঁকলে পাতা প্রথমে সাজহীন দেখাত, তারপর হঠাৎ বদলে যেত। তাই head-এর প্রতিটি stylesheet নামা ও পড়া শেষ না হওয়া পর্যন্ত ব্রাউজার প্রথম আঁকা আটকে রাখে। ধীর নেটওয়ার্কে বড় CSS ফাইল মানে দীর্ঘ সাদা পর্দা।

Critical CSS: প্রথম পর্দার (above the fold) জন্য দরকারি অল্প CSS সরাসরি head-এর <style>-এ, বাকিটা পরে, আটকে না রেখে লোড। প্রথম আঁকা দ্রুত, LCP ভালো।

Trade-off: inline CSS আলাদা ফাইলের মতো ক্যাশ হয় না — প্রতিটি পাতায় আবার আসে; কোন অংশ “critical” তা ঠিক করতে টুল লাগে, আর ভুল হলে পাতা লাফায় (CLS). ছোট সাইটে প্রায়ই সহজ পথই যথেষ্ট: একটি ছোট, minify করা, compression-সহ CSS ফাইল, অব্যবহৃত CSS ছাঁটা (DevTools-এর Coverage প্যানেল), আর @import শিকল এড়ানো — প্রতিটি @import আরেকটি অপেক্ষার ধাপ যোগ করে।

ঝালিয়ে নিন: পর্ব ১৬, পর্ব ৪৯

• ফরম্যাট ও আকার: শুধু woff2; দরকারি অক্ষরে ছাঁটা (subsetting), আর unicode-range দিয়ে বাংলা আর লাতিন অংশ আলাদা ফাইলে — ইংরেজি-শুধু পাতায় বাংলা ফাইল নামেই না। অনেক weight লাগলে একটি variable font প্রায়ই কয়েকটি আলাদা ফাইলের চেয়ে হালকা।
• font-display: swap — আগে fallback ফন্টে লেখা দেখাও, পরে বদলাও (FOUT); লেখা অদৃশ্য থাকে না। optional — ধীর নেটওয়ার্কে ফন্ট বাদই দাও, লাফ নেই।
• লাফ কমানো: fallback ফন্টের মাপ ওয়েব ফন্টের কাছাকাছি করতে @font-face-এ size-adjust, ascent-override — swap-এর CLS কমে।
• আগাম লোড: সবচেয়ে জরুরি একটি ফন্টে <link rel="preload" as="font" type="font/woff2" crossorigin> — একই সাইটের ফাইল হলেও crossorigin লাগে, নইলে ফন্ট দুবার নামে। সব ফন্ট preload নয়।
• নিজের সার্ভারে রাখা: ব্রাউজার এখন cache সাইট-ভেদে আলাদা রাখে, তাই “অন্য সাইটে Google Fonts নামানো থাকলে আমারটাও দ্রুত” — এই পুরোনো যুক্তি আর খাটে না; self-hosting-এ বাড়তি সংযোগও লাগে না।

বাংলার জন্য বাড়তি সতর্কতা: subset করার সময় যুক্তাক্ষর আর OpenType-এর সাজানোর তথ্য যেন হারিয়ে না যায় — ছাঁটার পরে “ক্ষ”, “ন্দ্র”, “র‍্যা” পরীক্ষা করুন।

ঝালিয়ে নিন: পর্ব ১৪, পর্ব ২১, পর্ব ৪৯

আগে মাপ, পরে সমাধান: PageSpeed Insights বা DevTools-এর Performance প্যানেলে দেখি LCP element কোনটি — প্রায়ই hero ব্যানারের ছবি। তারপর LCP-কে চার ভাগে ভাঙি: সার্ভারের উত্তর (TTFB), ছবি খুঁজে পেতে দেরি, ছবি নামার সময়, আর আঁকার দেরি — কোথায় সময় যাচ্ছে।

• hero ছবিতে loading="lazy" থাকলে সরাই — প্রথম পর্দার ছবি কখনো lazy নয়; যোগ করি fetchpriority="high" (Baseline Newly available, না চিনলে উপেক্ষা)।
• ছবি CSS-এর background-image-এ লুকানো থাকলে preload scanner দেখতে পায় না — <img>-এ আনি, অথবা rel="preload".
• ফরম্যাট আর মাপ: AVIF/WebP, srcset/sizes — ফোনে ২০০০ পিক্সেলের ছবি নয়।
• render-blocking CSS/JS কমাই; carousel-এর script ছবি দেখানোর আগে চালাতে হলে সেটিই LCP আটকায় — প্রথম স্লাইড সাধারণ HTML-এ রাখি।
• সার্ভার ধীর হলে CDN আর caching.

শেষে বলুন: “পরিবর্তনের পর field data (CrUX) কয়েক সপ্তাহ নজরে রাখব — ল্যাবের একটি মাপ যথেষ্ট নয়।”

ঝালিয়ে নিন: পর্ব ০৬, পর্ব ৩২, পর্ব ৪৯

• মাপহীন ছবি ও ভিডিও: width/height দিন বা aspect-ratio — ব্রাউজার আগে থেকেই জায়গা রাখে।
• বিজ্ঞাপন, embed, iframe: পাত্রে min-height দিয়ে জায়গা সংরক্ষণ; কিছু না এলেও জায়গা থাকুক।
• পরে ঢোকানো banner (“অ্যাপ নামান”, cookie): বিদ্যমান লেখার ওপরে ঠেলে না দিয়ে overlay বা আগে থেকে জায়গা।
• ওয়েব ফন্ট বদল: metric override আর ঠিক fallback (চ-০৩)।
• অ্যানিমেশন: top/height নয়, transform — transform-এর নড়াচড়া CLS-এ ধরা হয় না।

ব্যবহারকারীর নিজের চাপের অল্প পরে (প্রায় আধা সেকেন্ডের মধ্যে) হওয়া পরিবর্তন CLS-এ গোনা হয় না — “আরও দেখুন” চাপলে লেখা খোলা স্বাভাবিক। DevTools-এর Performance প্যানেলে layout shift-গুলো আলাদা দেখা যায়।

ঝালিয়ে নিন: পর্ব ০৬, পর্ব ৪৯

Lab বনাম field: Lighthouse একটি lab পরীক্ষা — একবার, নকল করা ধীর যন্ত্র ও নেটওয়ার্কে (throttling), লগইন বা আসল ব্যবহারের মতো অবস্থা ছাড়া, আর ফল কিছুটা নির্ভর করে আপনার নিজের কম্পিউটারের শক্তির ওপর। Search Console আর PageSpeed Insights-এর ওপরের অংশ দেখায় field data — Chrome ব্যবহারকারীদের আসল অভিজ্ঞতা (CrUX), শেষ ২৮ দিনের, ৭৫তম percentile-এ। পুরোনো Android ফোন আর ধীর মোবাইল নেটওয়ার্কের দর্শক বেশি হলে দুটির পার্থক্য বিশাল।

আরও কারণ: INP ল্যাবে মাপাই যায় না (ল্যাবে কেউ চাপে না; Lighthouse দেখায় Total Blocking Time), তৃতীয় পক্ষের script (chat widget, analytics, বিজ্ঞাপন) আসল পাতায় বেশি, আর লগইন করা পাতার আচরণ আলাদা।

যা বলবেন না: “Lighthouse-এ ১০০ মানেই কাজ শেষ।” ঠিক উত্তর: “Lighthouse দিয়ে কারণ খুঁজি, কিন্তু সফলতা মাপি field data দিয়ে।” আরও বড় পাতায় নিচের অংশে content-visibility: auto (Baseline Newly available) আঁকার কাজ কমাতে পারে — মেপে দেখে।

ঝালিয়ে নিন: পর্ব ৪৯, পর্ব ৪৭

BEM = Block, Element, Modifier — একটি নামকরণের নিয়ম: .card (block), .card__title (block-এর অংশ), .card--featured (রূপভেদ)। Yandex-এ জন্ম নেওয়া এই পদ্ধতি অনেক দলে প্রচলিত।

সুবিধা: প্রায় সব selector এক-class — specificity সমান ও কম, লড়াই নেই; নাম দেখেই বোঝা যায় কোন CSS কোন HTML-এর; একটি component-এর CSS অন্যটিতে ফাঁস হয় না।

সমালোচনা: লম্বা নাম (.product-card__price-label--discounted), HTML ভারী; “element-এর element” (.card__body__title) লেখার ভুল প্রবণতা; শৃঙ্খলা পুরোটাই মানুষের ওপর — ব্রাউজার কিছু রক্ষা করে না। আজ CSS Modules, @scope বা Shadow DOM-এর মতো যান্ত্রিক scoping-ও বিকল্প।

ঝালিয়ে নিন: পর্ব ৪৬ · CSS architecture

পরিণত উত্তর: “আমি দলের প্রচলিত টুল দ্রুত শিখে নিই। তবে framework-এর নিচে CSS-ই চলে — flex class কী করে, তা না জানলে Tailwind-এ বাগ ধরা যায় না।”

যা বলবেন না: “Tailwind ছাড়া কাজ করি না” বা উল্টো “Tailwind মানে inline style, বাজে জিনিস।” দুটিই একপেশে — trade-off বলুন।

ঝালিয়ে নিন: পর্ব ৪৬, পর্ব ৫১ · Bootstrap আর Tailwind CSS

Sass একটি preprocessor — নিজের ভাষা (SCSS) লিখে build-এর সময় CSS বানায়: variable, nesting, mixin, loop, partial (@use). PostCSS উল্টো দিকের টুল — আসল CSS পড়ে plugin দিয়ে রূপান্তর করে: Autoprefixer (দরকার হলে prefix যোগ), postcss-preset-env (নতুন CSS পুরোনো ব্রাউজারের জন্য), cssnano (minify). কোন ব্রাউজার লক্ষ্য, তা দুই টুলই জানে browserslist থেকে।

বদলে যাওয়া ছবি: CSS variable, native nesting, color-mix(), @layer আসার পর Sass-এর অনেক কাজ ব্রাউজার নিজেই করে। Sass এখনো কাজে লাগে loop, mixin আর build-সময়ের হিসাবে। আর পুরোনো @import নয়, @use; ভাগের জন্য / নয়, math.div() — Dart Sass পুরোনো রূপগুলো বাতিলের পথে।

Senior সংযোজন: “নতুন প্রজেক্টে আগে দেখি native CSS-এ কতটা হয়; build step যোগ করার খরচ (টুল আপডেট, নতুন সদস্যের শেখা) মাথায় রাখি।”

ঝালিয়ে নিন: পর্ব ৫০ · Sass আর PostCSS

Design token: নকশার মৌলিক মানগুলোর নাম — রং (--color-accent), ফাঁকের স্কেল (--space-2), লেখার মাপ, ছায়া, কোণের বাঁক। Design system: token, তৈরি component (বোতাম, ফর্মের ঘর, modal), তাদের অ্যাক্সেসিবিলিটির নিয়ম আর ব্যবহারের নির্দেশনা — একসাথে; ডিজাইনার আর ডেভেলপার এক ভাষায় কথা বলেন।

আমার পরিকল্পনা:

1. স্তর: @layer reset, tokens, base, components, utilities; — অগ্রাধিকার কাগজে নয়, ব্রাউজারের নিয়মে।
2. Scoping: component-ভিত্তিক — BEM, CSS Modules বা @scope; global selector শুধু base-এ।
3. নিয়ম যন্ত্রে: Stylelint (id selector নিষেধ, specificity-র সীমা, অচেনা রং নিষেধ — শুধু token), Prettier, code review-এর চেকলিস্ট।
4. দেখা যায় এমন component: Storybook-এর মতো pattern library, প্রতিটি অবস্থাসহ (hover, focus, disabled, error, দীর্ঘ বাংলা লেখা)।
5. মাপজোখ: CSS-এর আকার, অব্যবহৃত CSS, visual regression test — যাতে একটি বদল দশ জায়গায় চুপচাপ না ভাঙে।

Trade-off: design system বানানো আর চালু রাখা সময়সাপেক্ষ — ছোট দলে প্রথমে শুধু token আর কয়েকটি মূল component দিয়ে শুরু করাই বাস্তবসম্মত।

ঝালিয়ে নিন: পর্ব ৩৩, পর্ব ৪৬, পর্ব ৫৪

Baseline: একটি feature যেদিন Chrome, Edge, Firefox আর Safari — ডেস্কটপ ও মোবাইল — সবগুলোর সর্বশেষ সংস্করণে আসে, সেদিন সে Newly available; তার ৩০ মাস পর Widely available. MDN আর Can I use-এ এই চিহ্ন দেখা যায়। এটি দলের মধ্যে “চলবে তো?” প্রশ্নের একটি সাধারণ ভাষা।

.tooltip { position: absolute; top: 100%; left: 0; }   /* সবার জন্য */

@supports (anchor-name: --a) {                        /* যারা চেনে */
  .btn     { anchor-name: --a; }
  .tooltip { position-anchor: --a; position-area: bottom; top: auto; left: auto; }
}

fallback বাইরে, নতুনটি @supports-এর ভেতরে — উল্টো লিখলে খুব পুরোনো ব্রাউজারে কিছুই থাকে না। অনেক সময় @supports-ও লাগে না: CSS অচেনা declaration শুধু বাদ দেয়, তাই height: 100vh; height: 100dvh; নিজেই fallback.

Vendor prefix: হাতে লিখি না। মানদণ্ডের CSS লিখি, আর দরকার থাকলে Autoprefixer browserslist দেখে যোগ করে। -webkit-sticky, -ms-grid-এর মতো prefix আজ শুধু পুরোনো কোডের চিহ্ন। ব্রাউজার চিনতে navigator.userAgent নয়, feature detection.

ঝালিয়ে নিন: পর্ব ৪৮ · ব্রাউজার সাপোর্ট

পদ্ধতি — অনুমান নয়, খোঁজ:

1. DevTools-এর device toolbar-এ ৩৬০ পিক্সেল চওড়ায় সমস্যাটি নিশ্চিতভাবে দেখাই (reproduce).
2. অপরাধী খুঁজি: সাময়িকভাবে * { outline: 1px solid red; } দিলে যে বাক্স কিনারার বাইরে, তা চোখে পড়ে; অথবা Console-এ ছোট একটি লুপ — যে element-এর ডান প্রান্ত document.documentElement.clientWidth-এর বেশি, তার তালিকা। Chromium-এর DevTools-এ স্ক্রল-পাত্রের পাশে “scroll” ব্যাজও সাহায্য করে।
3. Elements প্যানেলে সন্দেহভাজনকে বাছাই করে Computed-এ দেখি কেন এত চওড়া।

প্রায়ই পাওয়া কারণ: width: 100vw (Windows-এ scrollbar-এর চওড়া যোগ হয়); নির্দিষ্ট px-এর width; লম্বা URL বা ইংরেজি শব্দ (সমাধান overflow-wrap: anywhere); grid-এর 1fr বা flex item-এর min-content (ঘ-০৪); চওড়া টেবিল বা কোড-ব্লক (স্ক্রল-পাত্রে মুড়ে দিন); negative margin; বাইরে সরানো off-canvas মেনু।

যা বলবেন না: “body { overflow-x: hidden; } দিয়ে দিই।” এটি লক্ষণ লুকায়, কারণ নয় — কনটেন্ট কেটে যায়, আর ভেতরের position: sticky-ও ভাঙতে পারে।

ঝালিয়ে নিন: পর্ব ৪৭ · DevTools দিয়ে debugging, পর্ব ৩০

কাঠামো — STAR: Situation (প্রেক্ষাপট), Task (আপনার দায়িত্ব), Action (আপনি কী করলেন — এখানেই বেশি সময়), Result (ফল, আর কী শিখলেন)। একটি নমুনা গল্প:

যা এই উত্তরকে শক্ত করে: নিজের পদ্ধতি (reproduce → ছোট করা → কারণ → সমাধান → সুরক্ষা), সত্যি প্রযুক্তিগত বিস্তার, আর দলের জন্য শিক্ষা। যা বলবেন না: “অনেক কিছু চেষ্টা করলাম, একসময় ঠিক হয়ে গেল।” — অথবা অন্যকে দোষ দেওয়া। গল্পটি অবশ্যই আপনার নিজের, সত্যি হতে হবে; ইন্টারভিউয়ার ফলো-আপ প্রশ্নে বানানো গল্প ধরে ফেলেন।

ঝালিয়ে নিন: পর্ব ৪৭, পর্ব ৪৮, পর্ব ২০

৬০–৯০ সেকেন্ডের কাঠামো — বর্তমান, অতীত, ভবিষ্যৎ: “আমি একজন ফ্রন্ট-এন্ড ডেভেলপার, semantic HTML, আধুনিক CSS আর অ্যাক্সেসিবিলিটি নিয়ে কাজ করতে ভালোবাসি (বর্তমান)। গত এক বছরে তিনটি সাইট বানিয়ে প্রকাশ করেছি — তার একটি স্থানীয় একটি বইয়ের দোকানের, যার মোবাইলে লোড হওয়ার সময় অর্ধেকে নামিয়েছিলাম (অতীত, একটি সংখ্যা)। এখন এমন একটি দলে কাজ করতে চাই, যেখানে design system আর পারফরম্যান্স নিয়ে আরও গভীরে শিখতে পারব (ভবিষ্যৎ, এই পদের সাথে মিল)।” পুরো জীবনী নয়, এই পদের সাথে সম্পর্কিত অংশ।

Portfolio দেখানোর সময়: একটি প্রজেক্ট গভীরে, পাঁচটি ওপর-ওপর নয়। সমস্যা কী ছিল → কোন সিদ্ধান্ত কেন নিলেন (grid কেন, কোন ফন্ট কেন) → কী কঠিন ছিল → ফল (Lighthouse, ফোনে দেখা, ব্যবহারকারীর মন্তব্য) → এখন কী বদলাতেন। ইন্টারভিউয়ার DevTools খুলে দেখতে পারেন — তাই div-soup, ভাঙা লিংক আর console-এর লাল error আগেই সারান। টিউটোরিয়াল দেখে বানানো প্রজেক্ট হলে সেটি সৎভাবে বলুন, আর আপনি নিজে কী যোগ করেছেন তা দেখান।

ঝালিয়ে নিন: পর্ব ৫৪ · ক্যাপস্টোন পোর্টফোলিও

যা দেখাতে হবে: আপনি সমালোচনাকে কোডের ওপর মন্তব্য হিসেবে নেন, নিজের ওপর আক্রমণ হিসেবে নয়। উত্তরের ধাপ: (১) পুরোটা পড়ে বুঝতে চেষ্টা; (২) না বুঝলে প্রশ্ন — “এখানে :where() কেন ভালো, একটু বুঝিয়ে বলবেন?”; (৩) সঠিক হলে ধন্যবাদ দিয়ে ঠিক করা, আর পরের বার যেন একই ভুল না হয় তার ব্যবস্থা (নিজের চেকলিস্ট, linter-এর নিয়ম); (৪) দ্বিমত থাকলে যুক্তি আর প্রমাণসহ ভদ্রভাবে বলা — “আমি ভেবেছিলাম এতে specificity কম থাকে; একটি ছোট demo বানিয়ে দেখাতে পারি?” আর দল যা ঠিক করে, তা মেনে নেওয়া।

একটি সত্যি ঘটনা যোগ করলে উত্তর শক্ত হয়: “প্রথম দিকে আমি সব জায়গায় id দিয়ে style দিতাম; review-এ শিখলাম কেন class আর কম specificity ভালো — এখন নিজেই নতুনদের এটা বলি।”

যা বলবেন না: “আমার কোডে সাধারণত ভুল থাকে না” বা “ব্রাউজারে তো চলছিল, তাই ঠিক ছিল।”

ইন্টারভিউয়ার দেখতে চান না যে আপনি কখনো দেরি করেননি — দেখতে চান ঝুঁকি কত আগে টের পান আর কীভাবে জানান। একটি ভালো উত্তরের উপাদান:

• আগে সতর্ক করা: “দুই দিন আগেই বুঝলাম Safari-তে লেআউটের বাগ সময় নেবে; সাথে সাথে project manager-কে জানালাম।” শেষ মুহূর্তে জানানোই সবচেয়ে বড় ভুল।
• বিকল্প দেওয়া: “পুরো কাজ শুক্রবারে, নাকি মূল পাতাগুলো বৃহস্পতিবারে আর অ্যানিমেশন পরের সপ্তাহে?” — scope কমানো, মান নয়। অ্যাক্সেসিবিলিটি বা নিরাপত্তা “পরে করব” তালিকায় যায় না।
• শিক্ষা: “এখন অনুমান করার সময় নতুন ব্রাউজার-পরীক্ষার জন্য আলাদা সময় রাখি, আর বড় কাজ ছোট ভাগে ভেঙে প্রতিদিন অগ্রগতি জানাই।”

যা বলবেন না: “সারা রাত জেগে শেষ করে ফেলি” — একবারের গল্প হিসেবে চলে, কিন্তু নিয়মিত পদ্ধতি হিসেবে এটি দুর্বল পরিকল্পনা আর ক্লান্তির লক্ষণ।

লক্ষ্য: “না” বলা নয়, সমস্যা আর সমাধান একসাথে দেওয়া — আর সম্পর্ক ভালো রাখা। ধাপ: (১) নকশার উদ্দেশ্য বুঝি — হালকা ধূসর লেখা কেন? “শান্ত, প্রিমিয়াম ভাব”; (২) তথ্য দিয়ে দেখাই — DevTools-এর contrast ২.৮:১, WCAG AA চায় ৪.৫:১; hover-এ খোলা অংশ ফোনে আর কি-বোর্ডে খোলেই না; (৩) বিকল্প প্রস্তাব — একই রঙের পরিবার থেকে একটু গাঢ় শেড, যা প্রায় একই দেখায়; hover-এর সাথে চাপ আর focus-এও খোলা (:focus-within, বোতাম বা popover); (৪) একটি ছোট প্রোটোটাইপ বানিয়ে দেখাই।

সিদ্ধান্ত শেষে পণ্যের মালিক বা ডিজাইনারের — কিন্তু ঝুঁকিটি লিখিতভাবে জানিয়ে রাখি। ভালো উত্তরে বোঝা যায় আপনি “pixel-perfect” আর “সবার ব্যবহারযোগ্য” — দুটিকেই গুরুত্ব দেন।

ঝালিয়ে নিন: পর্ব ৪৫, পর্ব ৩৪

প্রয়োজন বোঝার প্রশ্ন: সাইটটি দিয়ে তাঁর ব্যবসার লক্ষ্য কী (বিক্রি, বুকিং, পরিচিতি)? দর্শক কারা, কোন দেশ থেকে, মূলত ফোনে নাকি কম্পিউটারে? নকশা কি তৈরি আছে (Figma), নাকি আমাকে করতে হবে? লেখা আর ছবি কে দেবেন? হোস্টিং, ডোমেইন, পরে সাইট কে আপডেট করবেন? কোন সময়ের মধ্যে দরকার?

আগেই সামলানোর ঝুঁকি:

• Scope creep: “আর একটা ছোট পাতা” জমতে জমতে দ্বিগুণ কাজ। কাজের তালিকা লিখিত, আর বাড়তি কাজের দাম ও সময় আলাদা — এটি ভদ্রভাবে আগেই বলে রাখুন।
• Milestone: বড় কাজ ভাগে ভাগে — নকশা, মূল পাতা, বাকি পাতা, প্রকাশ; প্রতিটির পরে দেখানো ও অনুমোদন। marketplace-এর নিয়ম মেনে লেনদেন করুন।
• যোগাযোগ: সময়ের পার্থক্য মাথায় রেখে নির্দিষ্ট সময়ে নিয়মিত আপডেট; লিখিত সারাংশ (“আজকের কলে যা ঠিক হলো”) — ভাষার ভুল বোঝাবুঝি কমায়।
• নিজের দিকের ঝুঁকি: বিদ্যুৎ বা ইন্টারনেট চলে গেলে বিকল্প (মোবাইল ডেটা, UPS) আর কোড প্রতিদিন GitHub-এ push — ক্লায়েন্টকে অজুহাত নয়, ব্যবস্থা দেখান।

প্রযুক্তির কথা ক্লায়েন্টের ভাষায়: “semantic HTML আর WCAG” নয় — “Google আপনার পাতা ভালো বুঝবে, ফোনে দ্রুত খুলবে, আর যাঁরা চোখে কম দেখেন তাঁরাও অর্ডার দিতে পারবেন।”

যা বলবেন না: প্রয়োজন না বুঝেই “হ্যাঁ, সব পারব, দুই দিনে দেব।” অবাস্তব প্রতিশ্রুতি খারাপ রিভিউর সবচেয়ে সাধারণ কারণ।

ঝালিয়ে নিন: পর্ব ৫৩, পর্ব ৫৪

হালনাগাদ থাকা: নির্দিষ্ট, সত্যি উৎসের নাম দিন — MDN আর তার Baseline চিহ্ন, web.dev, ব্রাউজারগুলোর release notes, Can I use, CSS Working Group-এর খবর। আর বলুন কীভাবে কাজে লাগান: “নতুন কিছু পড়লে একটি ছোট demo বানাই, তারপর প্রজেক্টে fallback-সহ ব্যবহার করি।”

AI: সৎ উত্তর দিন — প্রায় সবাই এখন ব্যবহার করেন। দেখাতে হবে আপনি নিয়ন্ত্রণে আছেন: “ছকবাঁধা কোড, প্রথম খসড়া আর অচেনা ভুলের বার্তা বুঝতে AI ব্যবহার করি। কিন্তু AI প্রায়ই div-soup, পুরোনো prefix আর ভুল ARIA দেয়, নতুন feature-এর পুরোনো নাম দেয় — তাই প্রতিটি অংশ validator, DevTools আর কি-বোর্ড দিয়ে যাচাই করি, আর যা বুঝি না তা বসাই না। গোপন কোড বা ক্লায়েন্টের তথ্য AI-তে দিই না।”

যা বলবেন না: “AI যা দেয় তা-ই বসিয়ে দিই।” — অথবা উল্টো, সত্যি না হলেও “কখনো ব্যবহার করি না।” প্রতিষ্ঠানের নিয়ম জেনে নিন; অনেক প্রতিষ্ঠানে live coding-এ AI নিষেধ।

Workflow: প্রতিটি কাজের জন্য আলাদা branch; ছোট, অর্থবহ commit (“ফোনে navbar-এর overflow ঠিক করা”); push করে pull request, যেখানে কী আর কেন বদলেছি তা লিখি, স্ক্রিনশট দিই; review-এর পরে merge; তারপর GitHub Pages, Netlify বা cPanel-এ প্রকাশ — অথবা merge হলেই নিজে থেকে প্রকাশ (continuous deployment) আর প্রতিটি PR-এর আলাদা preview লিংক। .env বা গোপন key কখনো repository-তে নয়।

“কী বদলাতেন”: এই প্রশ্নে আত্মসমালোচনা দেখানোই লক্ষ্য। নির্দিষ্ট আর প্রযুক্তিগত উত্তর দিন: “ছবিগুলোতে এখনো srcset নেই, ফোনে বড় ফাইল নামে; contact ফর্মে ভুলের বার্তা শুধু লাল রঙে — aria-describedby আর লেখা যোগ করব; আর CSS-কে @layer-এ ভাগ করব।” এতে বোঝা যায় আপনি এখনো শিখছেন, আর কোথায় উন্নতি দরকার তা চেনেন।

ঝালিয়ে নিন: পর্ব ৫৩ · Git, GitHub আর প্রকাশ, পর্ব ৫৪