Media query আর container query

১ · এক পাতা, হাজার রকম পর্দা — শর্তসাপেক্ষ CSS কেন

পর্ব ৩০-এ (রেসপন্সিভ ডিজাইন — viewport আর মোবাইল-ফার্স্ট ভাবনা) আপনি দেখেছেন, একই পাতা ৩৬০px চওড়া সস্তা অ্যান্ড্রয়েড ফোনেও খোলে, আবার অফিসের ২৭ ইঞ্চি মনিটরেও খোলে। Flexbox-এর flex-wrap আর grid-এর auto-fit অনেক কাজ নিজেরাই সামলায়। কিন্তু কিছু সিদ্ধান্ত আছে, যা “জায়গা বুঝে নিজে মানিয়ে নেওয়া” দিয়ে হয় না — যেমন “ছোট পর্দায় মেনু লুকিয়ে একটি বোতাম দেখাও”, “ব্যবহারকারী dark mode চাইলে গাঢ় রং দাও”, বা “ছাপার সময় বিজ্ঞাপন বাদ দাও”। এসব জায়গায় CSS-কে একটি শর্ত দিতে হয়: “যদি এমন হয়, তবেই এই নিয়মগুলো মানো।”

এই পর্বে দুটি হাতিয়ারই শিখবেন। প্রথমটি — media query — প্রায় পনেরো বছর ধরে রেসপন্সিভ ওয়েবের মেরুদণ্ড। দ্বিতীয়টি — container query — বহু বছর ধরে ডেভেলপারদের সবচেয়ে বেশি চাওয়া ফিচার ছিল, আর ২০২৩ সাল থেকে সব প্রধান ব্রাউজারে চলে। দুটির প্রশ্ন আলাদা:

২ · @media-র গঠন — media type আর media feature

@media একটি at-rule — অর্থাৎ @ দিয়ে শুরু হওয়া CSS-এর বিশেষ নির্দেশ। এর পরে থাকে একটি শর্ত, তারপর { }-এর ভেতরে সাধারণ CSS নিয়ম। শর্তের দুটি অংশ হতে পারে:

• Media type — মোটা দাগে কোন মাধ্যম: screen (যেকোনো পর্দা), print (কাগজে ছাপা বা “Save as PDF”), all (সব, না লিখলে এটিই ধরা হয়)। আগে tv, handheld, projection-এর মতো আরও অনেক ধরন ছিল; সেগুলো এখন বাতিল, কারণ “ফোন” আর “টিভি”-র সীমারেখা মুছে গেছে।
• Media feature — বন্ধনীর ভেতরে একটি নির্দিষ্ট বৈশিষ্ট্য: (width >= 600px), (orientation: portrait), (prefers-color-scheme: dark) ইত্যাদি।

/* পুরোনো, এখনো সর্বত্র চলে */
@media screen and (min-width: 600px) { … }   /* চওড়া ≥ 600px */
@media (max-width: 599px) { … }              /* চওড়া ≤ 599px */

/* নতুন range syntax — গণিতের মতো */
@media (width >= 600px) { … }
@media (width < 600px) { … }
@media (400px <= width <= 800px) { … }       /* দুই সীমার মাঝে */

/* আরও কিছু feature */
@media (orientation: landscape) { … }        /* পাশে কাত করা */
@media (min-aspect-ratio: 16/9) { … }        /* চওড়া:উঁচু অন্তত ১৬:৯ */
@media (min-resolution: 2dppx) { … }         /* প্রতি CSS pixel-এ ≥ ২টি আসল pixel */

Range syntax এসেছে Media Queries Level 4 থেকে। min-width: 600px পড়তে হয় “কমপক্ষে ৬০০” — উল্টো দিক থেকে ভাবতে হয়, তাই নতুনরা প্রায়ই min আর max গুলিয়ে ফেলেন। width >= 600px সরাসরি পড়া যায়। ২০২৩ সালের মধ্যে Chrome, Edge, Firefox আর Safari — সবাই এটি চালু করেছে, আর এখন এটি Baseline Widely available. খুব পুরোনো ব্রাউজার (কয়েক বছর আপডেট না হওয়া) এই শর্ত বোঝে না — তাদের কাছে পুরো @media ব্লকটি মিথ্যা ধরা হয়। আপনার দর্শকদের মধ্যে এমন ব্রাউজার বেশি থাকলে পুরোনো min-width রূপই নিরাপদ।

বাকি feature-গুলোর মানে: orientation বলে viewport খাড়া (portrait — উচ্চতা ≥ চওড়া) না শোয়ানো (landscape). aspect-ratio চওড়া আর উচ্চতার অনুপাত দেখে। resolution দেখে পর্দা কতটা ঘন — device pixel ratio ২ মানে প্রতিটি CSS pixel আঁকতে ২×২টি আসল pixel লাগে (পর্ব ২০)। পুরোনো কোডে -webkit-min-device-pixel-ratio দেখবেন — সেটি ইতিহাস; এখন prefix ছাড়া resolution লিখুন। আর device-width নামের feature-টি বাতিল — viewport-এর width-ই দেখুন।

এবার নিজে দেখুন। নিচের প্রিভিউটি একটি ছোট আলাদা পাতা (iframe), আর তার ভেতরের media query প্রিভিউর নিজের চওড়া দেখে — আপনার ব্রাউজার-জানালার নয়। ছোট script-টি শুধু চওড়াটি লিখে দেখায়:

<style>
  body { font-family: sans-serif; }
  .box { padding: 16px; border-radius: 8px; background: #fde68a; }
  .box::after { content: " → ছোট পর্দার সাজ"; }
  @media (width >= 500px) {
    .box { background: #bbf7d0; font-size: 1.25rem; }
    .box::after { content: " → বড় পর্দার সাজ"; }
  }
</style>
<p class="box">এই প্রিভিউর চওড়া: <b id="w">…</b>px</p>
<script>
  function show() { document.getElementById('w').textContent = innerWidth; }
  (function m() {
    if (!document.body.offsetWidth) return setTimeout(m, 50);
    show();
  })();
  addEventListener('resize', show);
</script>

ব্রাউজার এমন একটি শর্ত কীভাবে পড়ে আর কখন আবার যাচাই করে, ধাপে ধাপে দেখুন:

৩ · যুক্তির শব্দ — and, কমা, or, not আর only

একাধিক শর্ত জুড়তে media query-তে কয়েকটি operator আছে। প্রোগ্রামিংয়ের &&, ||, !-এর মতোই, শুধু লেখা ইংরেজি শব্দে:

কয়েকটি সূক্ষ্ম কথা। এক, পুরোনো (Level 3) নিয়মে not বসত একেবারে শুরুতে, আর উল্টে দিত পুরো query-কে: not screen and (color) মানে “not (screen and color)” — অনেকে ভুল করে ভাবেন শুধু screen উল্টাল। নতুন নিয়মে বন্ধনী দিয়ে স্পষ্ট লেখা যায়: not (hover: hover). দুই, and আর or বন্ধনী ছাড়া একসাথে মেশানো যায় না — (a) and (b) or (c) অবৈধ; লিখতে হয় (a) and ((b) or (c)). তিন, only AI আর পুরোনো টিউটোরিয়ালে এখনো খুব দেখা যায় — এতে ক্ষতি নেই, কিন্তু আজ এর কোনো কাজও নেই।

নিচের এডিটরে প্রতিটি সারির নিজের media query আছে। যে শর্ত আপনার এই প্রিভিউতে সত্য, সেই সারি সবুজ হয়ে “✓ মিলেছে” দেখাবে:

body { font-family: sans-serif; }
ul { padding: 0; }
li { list-style: none; margin: 4px 0; padding: 6px 10px;
     border-radius: 6px; background: var(--bg, #e5e7eb); }
li::after { content: var(--mark, " ✗ মেলেনি"); }

@media (width >= 400px) { .a { --bg: #bbf7d0; --mark: " ✓ মিলেছে"; } }
@media (400px <= width <= 800px) { .b { --bg: #bbf7d0; --mark: " ✓ মিলেছে"; } }
@media (width < 400px), (orientation: portrait) { .c { --bg: #bbf7d0; --mark: " ✓ মিলেছে"; } }
@media (width >= 400px) and (orientation: landscape) { .d { --bg: #bbf7d0; --mark: " ✓ মিলেছে"; } }
@media not print { .e { --bg: #bbf7d0; --mark: " ✓ মিলেছে"; } }
@media only print { .f { --bg: #bbf7d0; --mark: " ✓ মিলেছে"; } }

৪ · মানুষ আর যন্ত্রকে চেনা — পছন্দ আর ইনপুটের media feature

পর্দার মাপ দেখেই সব বোঝা যায় না। একজন ব্যবহারকারী রাতে চোখের আরামের জন্য ফোনে dark mode চালু রাখেন; আরেকজনের নড়াচড়া দেখলে মাথা ঘোরে, তাই তিনি অ্যানিমেশন কমিয়ে রেখেছেন; কেউ চোখে কম দেখেন, তাই বেশি contrast চান। এসব পছন্দ মানুষ একবার অপারেটিং সিস্টেমে ঠিক করে রাখেন, আর ব্রাউজার media feature হিসেবে সেগুলো CSS-কে জানায়।

ব্যবহারকারীর পছন্দ (user preference)

• prefers-color-scheme: light | dark — হালকা না গাঢ় থিম। পুরো dark mode বানানোর কৌশল (আর color-scheme property) পর্ব ৩৬-এ।
• prefers-reduced-motion: reduce | no-preference — কম অ্যানিমেশন চাওয়া হয়েছে কি না। ভেতরের কান বা ভারসাম্যের সমস্যা (vestibular disorder) আছে এমন অনেকের জন্য বড় নড়াচড়া বমিভাব বা মাথাব্যথা আনে। এর বিস্তারিত ব্যবহার পর্ব ৪৫-এ।
• prefers-contrast: more | less | custom | no-preference — বেশি বা কম রঙের পার্থক্য চাওয়া।
• forced-colors: active | none — ব্যবহারকারীর সিস্টেম নিজের কয়েকটি রং দিয়ে পুরো পাতা জোর করে আঁকছে কি না (যেমন Windows-এর contrast থিম)। তখন আপনার background-image বা box-shadow দিয়ে বানানো সীমারেখা হারিয়ে যেতে পারে — এই query দিয়ে সেগুলো আসল border দিয়ে বদলে দিন।

/* অ্যানিমেশন শুধু তাঁদের জন্য, যাঁরা কমাতে বলেননি */
@media (prefers-reduced-motion: no-preference) {
  .banner { animation: slide-in 600ms ease-out; }
}
/* contrast চাইলে হালকা ধূসর লেখাকে গাঢ় করুন */
@media (prefers-contrast: more) {
  .muted { color: #1f2937; }
}

লক্ষ করুন প্রথম উদাহরণের দিক: অ্যানিমেশন বাদ দেওয়ার বদলে যোগ করা হয়েছে শর্তের ভেতরে। ফলে যে ব্রাউজার এই feature বোঝে না, সেখানেও কেউ অনাকাঙ্ক্ষিত নড়াচড়া পান না।

হাতের যন্ত্র (interaction)

Interaction media feature জানায় ব্যবহারকারী পাতা কী দিয়ে চালাচ্ছেন:

• hover: hover — প্রধান যন্ত্র দিয়ে কোনো কিছুর ওপর ভাসিয়ে রাখা (hover) যায়, যেমন মাউস। টাচস্ক্রিনে সাধারণত hover: none.
• pointer: fine — সূক্ষ্মভাবে তাক করা যায় (মাউস, stylus); pointer: coarse — মোটা দাগে (আঙুল, টিভির রিমোট); pointer: none — তাক করার যন্ত্রই নেই।
• any-hover, any-pointer — যুক্ত থাকা যেকোনো যন্ত্রের মধ্যে কেউ পারে কি না। যেমন টাচস্ক্রিন ল্যাপটপে মাউসও লাগানো থাকলে pointer একটি উত্তর দেয়, কিন্তু any-pointer: fine-ও সত্য।

body { font-family: sans-serif; }
ul { padding: 0; }
li { list-style: none; margin: 4px 0; padding: 6px 10px;
     border-radius: 6px; background: var(--bg, #e5e7eb); }
li::after { content: var(--mark, " — না"); }

@media (prefers-color-scheme: dark)  { .dark     { --bg: #bbf7d0; --mark: " — হ্যাঁ"; } }
@media (prefers-reduced-motion: reduce) { .motion { --bg: #bbf7d0; --mark: " — হ্যাঁ"; } }
@media (prefers-contrast: more)      { .contrast { --bg: #bbf7d0; --mark: " — হ্যাঁ"; } }
@media (forced-colors: active)       { .forced   { --mark: " — হ্যাঁ"; } }
@media (hover: hover)                { .hover    { --bg: #bbf7d0; --mark: " — হ্যাঁ"; } }
@media (pointer: fine)               { .fine     { --bg: #bbf7d0; --mark: " — হ্যাঁ"; } }
@media (pointer: coarse)             { .coarse   { --bg: #bbf7d0; --mark: " — হ্যাঁ"; } }
@media (any-pointer: fine)           { .anyfine  { --bg: #bbf7d0; --mark: " — হ্যাঁ"; } }

৫ · কাগজের পাতা — @media print

ব্যাংকের স্টেটমেন্ট, ভর্তির রসিদ, অনলাইন অর্ডারের চালান, কোনো সরকারি ফর্মের তথ্য — মানুষ এখনো ওয়েব পাতা ছাপেন, বা “Save as PDF” করে WhatsApp-এ পাঠান। পর্দার জন্য বানানো পাতা কাগজে তুললে বিপত্তি: মেনু, বিজ্ঞাপন, “শেয়ার করুন” বোতাম অকারণে কালি খরচ করে, আর লিংকের নীল লেখা কাগজে ক্লিক করা যায় না — ঠিকানাটাই হারিয়ে যায়। সমাধান একটি print stylesheet.

body { font-family: sans-serif; }
nav { background: #1e3a8a; padding: 8px; }
nav a { color: #fff; margin-right: 12px; }
a { color: #1d4ed8; }

@media print {
  nav, .no-print { display: none; }
  body { font: 12pt/1.5 Georgia, serif; color: #000; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
  h2 { break-after: avoid; }
}

কয়েকটি ব্যাখ্যা। a[href^="http"] একটি attribute selector (পর্ব ১৭) — শুধু বাইরের পূর্ণ ঠিকানাওয়ালা লিংক ধরে, পাতার ভেতরের # লিংক বাদ রাখে। attr(href) element-এর attribute-এর মান পড়ে এনে ::after pseudo-element-এ লেখা হিসেবে বসায় (pseudo-element-এর বিস্তারিত পর্ব ৩৪-এ)। break-after: avoid ব্রাউজারকে অনুরোধ করে, শিরোনামের ঠিক পরেই যেন পাতা না ভাঙে — নইলে শিরোনাম এক পাতার নিচে, লেখা পরের পাতায়। একই পরিবারের break-inside: avoid টেবিলের সারি বা ছবির ক্যাপশন দুই পাতায় ভাগ হতে দেয় না।

@page {
  size: A4;          /* কাগজের মাপ */
  margin: 2cm;       /* চারপাশের ফাঁকা */
}
@media print {
  tr, figure { break-inside: avoid; }
  .ad, video, .chat-widget { display: none; }
}

@page at-rule কাগজের মাপ আর margin ঠিক করে। ছাপার CSS পরীক্ষা করতে প্রতিবার আসলে ছাপতে হয় না: Ctrl+P চেপে preview দেখুন, অথবা DevTools-এর Rendering প্যানেলে “Emulate CSS media type: print” বেছে নিন — পাতা পর্দাতেই ছাপার চেহারা নেবে।

৬ · Media query-র সীমা — কার্ড জানে না সে কোথায় বসেছে

এবার এমন একটি সমস্যা দেখি, যা media query দিয়ে সমাধান করা যায় না। একটি অনলাইন বাজারের সাইটে পণ্যের একটি component আছে — ছবি আর বিবরণসহ কার্ড। সেটি পাতার চওড়া মূল কলামে বসে, আবার একই কার্ড ডানের সরু sidebar-এ “আপনার জন্য আরও” অংশেও বসে। ডিজাইনার চান: জায়গা চওড়া হলে ছবি বাঁয়ে, লেখা ডানে; সরু হলে ছবি ওপরে, লেখা নিচে।

<style>
  body { font-family: sans-serif; }
  .page { display: flex; gap: 10px; }
  main { flex: 1; }
  aside { width: 170px; flex: none; }
  .card { display: grid; gap: 8px; background: #f1f5f9;
          padding: 8px; border-radius: 8px; }
  .card p { margin: 0; }
  .thumb { aspect-ratio: 16 / 9; border-radius: 6px;
           background: linear-gradient(135deg, #f59e0b, #ef4444); }
  @media (width >= 500px) {
    .card { grid-template-columns: 120px 1fr; }
  }
</style>
<div class="page">
  <main><div class="card"><div class="thumb"></div>
    <p>পদ্মার ইলিশ, ১ কেজি — ৳১,৪০০</p></div></main>
  <aside><div class="card"><div class="thumb"></div>
    <p>পদ্মার ইলিশ, ১ কেজি — ৳১,৪০০</p></div></aside>
</div>

সমস্যার মূলটা বুঝে নিন: media query-র কাছে একটিই প্রশ্ন — “viewport কত চওড়া?” কিন্তু একটি component-এর আসল প্রশ্ন — “আমাকে কত জায়গা দেওয়া হয়েছে?” viewport এক থাকলেও একটি component পাতার নানা জায়গায় নানা চওড়া পেতে পারে। নিচের ডায়াগ্রামে একই কার্ডের হিসাব কয়েকটি পরিস্থিতিতে দেখুন:

৭ · Container query — পাত্র বানানো, প্রশ্ন করা, নাম দেওয়া

Container query দুই ধাপের কাজ। প্রথমে একটি পূর্বপুরুষ element-কে (সাধারণত component-এর ঠিক বাইরের মোড়ক) “পাত্র” ঘোষণা করুন। তারপর ভেতরের element-এর জন্য @container শর্ত লিখুন:

.slot {                          /* ধাপ ১: পাত্র */
  container-type: inline-size;   /* চওড়া দেখে প্রশ্ন করা যাবে */
}
.card { display: grid; gap: 8px; }        /* সরু অবস্থার সাজ */

@container (width >= 400px) {   /* ধাপ ২: কাছের পাত্রকে প্রশ্ন */
  .card { grid-template-columns: 140px 1fr; }
}

container-type-এর তিনটি মান: inline-size — লেখার দিকের মাপ, অর্থাৎ বাংলা-ইংরেজির মতো আনুভূমিক লেখায় চওড়া (প্রায় সবসময় এটিই চাই); size — চওড়া আর উচ্চতা দুটোই; normal — ডিফল্ট, মাপের প্রশ্ন করা যায় না। শর্তে media query-র মতোই width, height, inline-size, aspect-ratio, orientation আর range syntax ব্যবহার করা যায়। Container size query ২০২৩ সালের শুরু থেকে সব প্রধান ব্রাউজারে আছে — এখন Baseline Widely available.

এবার আগের দোকানের কার্ডটিই container query দিয়ে লিখি। sidebar-এর ডান-নিচের কোণ টেনে চওড়া করুন (মাউস লাগবে; টাচস্ক্রিনে টানার হাতল কাজ নাও করতে পারে — তখন aside-এর width বদলে দেখুন):

<style>
  body { font-family: sans-serif; }
  .page { display: flex; gap: 10px; align-items: start; }
  main { flex: 1; container-type: inline-size; }
  aside { width: 170px; flex: none; container-type: inline-size;
          resize: horizontal; overflow: auto; max-width: 75%;
          border: 2px dashed #94a3b8; padding: 4px; }
  .card { display: grid; gap: 8px; background: #f1f5f9;
          padding: 8px; border-radius: 8px; }
  .card p { margin: 0; }
  .thumb { aspect-ratio: 16 / 9; border-radius: 6px;
           background: linear-gradient(135deg, #f59e0b, #ef4444); }
  @container (width >= 300px) {
    .card { grid-template-columns: 120px 1fr; }
  }
</style>
<div class="page">
  <main><div class="card"><div class="thumb"></div>
    <p>পদ্মার ইলিশ, ১ কেজি — ৳১,৪০০</p></div></main>
  <aside><div class="card"><div class="thumb"></div>
    <p>পদ্মার ইলিশ, ১ কেজি — ৳১,৪০০</p></div></aside>
</div>

ব্রাউজার পাত্রটি কীভাবে খুঁজে পায়

@container শর্তটি কোন পাত্রের মাপ দেখবে? element নিজের নয় — তার পূর্বপুরুষদের মধ্যে সবচেয়ে কাছের উপযুক্ত পাত্রের। আর পাত্রে নাম দেওয়া থাকলে নাম মিলিয়ে খোঁজে। একটি বাস্তব কাঠামোয় ধাপে ধাপে দেখুন:

.shop {
  container-name: shop;          /* নাম */
  container-type: inline-size;   /* ধরন */
}
/* একই কথা shorthand-এ: */
.shop { container: shop / inline-size; }

@container shop (width >= 400px) { .price { font-size: 1.25rem; } }

Container query unit — পাত্রের মাপে লেখা

পর্ব ২০-এ (একক আর রং) container query units-এর নাম শুনেছেন: cqi (পাত্রের inline-size-এর ১%), cqb (block-size-এর ১%), cqw আর cqh (চওড়া আর উচ্চতার ১%), আর cqmin/cqmax. vw যেমন পুরো জানালার শতাংশ, cqi তেমনি কাছের পাত্রের। লেখার দিক বদলালেও ঠিক থাকে বলে সাধারণত cqi ব্যবহার করুন। নিচের ব্যানারের শিরোনাম পাত্রের সাথে বড়-ছোট হয়:

<style>
  body { font-family: sans-serif; }
  .box { container: banner / inline-size; resize: horizontal;
         overflow: auto; width: 90%; max-width: 100%;
         border: 2px dashed #94a3b8; padding: 6px; }
  .banner { background: #0f766e; color: #fff;
            padding: 4cqi; border-radius: 8px; }
  .banner h2 { margin: 0 0 8px;
               font-size: clamp(1rem, 7cqi, 2.4rem); }
  .banner a { display: inline-block; background: #fbbf24; color: #111;
              padding: 6px 12px; border-radius: 6px; }
  @container banner (width < 320px) {
    .banner a { display: block; text-align: center; }
  }
</style>
<div class="box">
  <div class="banner">
    <h2>ঈদের অফার: সব পোশাকে ২০% ছাড়</h2>
    <a href="#buy">এখনই কিনুন</a>
  </div>
</div>

৮ · Style query আর scroll-state query — নতুন দিগন্ত, সাবধানে

মাপের প্রশ্ন ছাড়াও container-কে আরেক ধরনের প্রশ্ন করা যায়: “এই পাত্রে বসানো custom property-র মান কী?” একে বলে style query. যেমন একটি পণ্যের কার্ডে --deal: sale থাকলে দামটি লাল আর “ছাড়!” লেখা। এর জন্য container-type দিতে হয় না — প্রতিটি element আপনা-আপনি style query-র পাত্র, আর শর্তটি দেখে সবচেয়ে কাছের পূর্বপুরুষকে।

<style>
  body { font-family: sans-serif; }
  .list { display: flex; gap: 10px; flex-wrap: wrap; }
  .product { border: 1px solid #cbd5e1; border-radius: 8px;
             padding: 10px; width: 150px; }
  .price { margin: 6px 0 0; }
  @container style(--deal: sale) {
    .price { color: #b91c1c; font-weight: bold; }
    .price::before { content: "ছাড়! "; }
  }
</style>
<div class="list">
  <div class="product"><b>মসুর ডাল</b>
    <p class="price">৳১১০</p></div>
  <div class="product" style="--deal: sale"><b>সয়াবিন তেল</b>
    <p class="price">৳১৬৫</p></div>
</div>

আরও নতুন একটি ধরন: scroll-state query. এতে পাত্রকে জিজ্ঞেস করা যায় তার স্ক্রল-অবস্থা — একটি sticky header ওপরে আটকে গেছে কি না (পর্ব ২৪), বা একটি স্ক্রলের বাক্স আরও স্ক্রল করা যায় কি না।

header {
  position: sticky; top: 0;
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  header > nav { box-shadow: 0 2px 8px rgb(0 0 0 / .2); }
}

এটি এখন শুধু Chromium-ভিত্তিক ব্রাউজারে আছে, Baseline থেকে অনেক দূরে। শেখার জন্য জেনে রাখুন, কিন্তু কাজের সাইটে শুধু “থাকলে ভালো” ধরনের ছোট সাজে ব্যবহার করুন। স্ক্রলের অন্যান্য ইফেক্ট পর্ব ৪২-এ, আর ব্রাউজার-সাপোর্ট সামলানোর পুরো কৌশল (@supports, fallback) পর্ব ৪৮-এ।

৯ · কোনটি কখন — আর JavaScript-এর matchMedia()

এখন হাতে তিনটি হাতিয়ার: query ছাড়াই নমনীয় লেআউট (intrinsic layout — flex-wrap, auto-fit, clamp(); পর্ব ২৮), media query আর container query. বেছে নেওয়ার একটি সহজ নিয়ম:

একটি বাস্তব কথা: container query দিয়ে পাতার কাঠামো বানানো কঠিন, কারণ সবচেয়ে বাইরের পাত্রের মাপ আসলে viewport-ই। আবার media query দিয়ে component বানালে সেটি পুনর্ব্যবহারযোগ্য থাকে না। দুটি প্রতিদ্বন্দ্বী নয়, একসাথে কাজ করে।

JavaScript থেকে একই প্রশ্ন — matchMedia()

কখনো কখনো শর্তটা JavaScript-এও জানা দরকার — যেমন কম অ্যানিমেশন চাইলে একটি স্লাইডশো নিজে থেকে না ঘোরানো, বা চওড়া পর্দায় একটি মানচিত্র লোড করা। এর জন্য matchMedia() CSS-এর হুবহু একই query নেয় (container query-র জন্য এমন কোনো সরাসরি ফাংশন নেই):

(function m() {
  if (!document.body.offsetWidth) return setTimeout(m, 50);
  const wide = matchMedia('(width >= 500px)');
  const calm = matchMedia('(prefers-reduced-motion: reduce)');
  console.log('preview width:', innerWidth);
  console.log('(width >= 500px) matches:', wide.matches);
  console.log('reduced motion wanted:', calm.matches);
  wide.addEventListener('change', (e) => {
    console.log('changed! now wide:', e.matches);
  });
})();

১০ · AI-এর যুগে — রেসপন্সিভ কোড AI-কে দিলে কী দেখবেন

“এটাকে রেসপন্সিভ করে দাও” — AI-কে এই এক লাইন বললে সে প্রায় সবসময় তিন-চারটি @media ব্লক জুড়ে দেয়, প্রায়ই max-width: 768px আর max-width: 480px দিয়ে। কাজ চলে, কিন্তু AI যে কোড থেকে শিখেছে তার বড় অংশ বহু বছরের পুরোনো, আর সে আপনার কার্ডটি sidebar-এ বসিয়ে বা Windows-এর contrast থিমে খুলে কখনো দেখে না।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া রেসপন্সিভ কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এর device toolbar-এ ৩২০px থেকে ১৯২০px পর্যন্ত ধীরে ধীরে টেনে দেখেছি — কোনো মাপে লেআউট ভাঙে বা পাশে স্ক্রল আসে না
• component-টি পাতার সরু আর চওড়া দুই জায়গায় বসিয়ে দেখেছি; Elements প্যানেলে পাত্রের পাশে container ব্যাজ দেখেছি
• Rendering প্যানেলে prefers-color-scheme, prefers-reduced-motion, forced-colors আর print — চারটিই emulate করে দেখেছি
• ব্রাউজার ২০০% zoom করে দেখেছি — লেখা বড় হয়, কাটা পড়ে না (cqi বা vw দিয়ে আটকে যায়নি)
• নতুন কোনো feature (style query, scroll-state, range syntax) পেলে MDN আর Can I use-এ Baseline অবস্থা দেখেছি; validator.w3.org-এ HTML আর Lighthouse-এ অ্যাক্সেসিবিলিটি রিপোর্ট চালিয়েছি