আধুনিক CSS — nesting, clamp(), logical property আর @layer

১ · “আধুনিক CSS” মানে কী — ঠেকা দেওয়া থেকে নকশায় সমাধান

ফ্রিল্যান্সার সুমি একটি পুরোনো অনলাইন দোকানের সাইট মেরামতের কাজ পেলেন। CSS ফাইল খুলে দেখলেন — ৪০টির বেশি !important, ভিডিওর বাক্সে padding-top: 56.25% নামের রহস্যময় সংখ্যা, আরবি ভাষার পাতার জন্য পুরো CSS-এর আলাদা একটি উল্টো কপি, আর প্রতিটি পর্দার মাপের জন্য আলাদা আলাদা font-size. সবই কাজ করছে, কিন্তু একটি রং বদলাতে গেলে তিন জায়গায় কিছু না কিছু ভেঙে যায়।

এগুলো ভুল ছিল না — যখন লেখা হয়েছিল, তখন CSS-এ এর চেয়ে ভালো উপায় ছিল না। ডেভেলপাররা যা চাইতেন আর CSS যা দিত, তার মাঝের ফাঁক তাঁরা পূরণ করতেন নানা কৌশল (hack) দিয়ে। গত কয়েক বছরে সেই ফাঁকগুলোর বেশিরভাগ CSS নিজেই ভরাট করেছে। এই পর্বের প্রতিটি feature আসলে একটি পুরোনো hack-এর অবসান।

কোন feature এখন নিশ্চিন্তে ব্যবহার করা যায়, সেটা বোঝার জন্য এই কোর্সে বারবার Baseline শব্দটি এসেছে। মনে করিয়ে দিই: কোনো feature যেদিন Chrome, Edge, Firefox আর Safari — ডেস্কটপ ও মোবাইল দুই জায়গাতেই — সর্বশেষ সংস্করণে চলে আসে, সেদিন সে Baseline Newly available. তার ৩০ মাস পর, যখন বেশিরভাগ মানুষের ব্রাউজার আপডেট হয়ে যায়, সে Baseline Widely available. এই পর্বের feature-গুলোর অবস্থা (২০২৬ সালের হিসাবে):

২ · Native CSS nesting — নিয়মের ভেতরে নিয়ম

একটি পণ্যের কার্ড সাজাতে আগে এভাবে লিখতে হতো — একই .card বারবার:

.card { padding: 1rem; border: 2px solid #cbd5e1; }
.card h3 { color: teal; }
.card .price { font-weight: bold; }
.card:hover { border-color: teal; }
@media (width >= 40rem) {
  .card { padding: 2rem; }
}

সমস্যা শুধু বাড়তি টাইপ করা নয়। কার্ডের নিয়মগুলো ফাইলের নানা জায়গায় ছড়িয়ে পড়ে, আর .card-এর নাম বদলাতে হলে পাঁচ জায়গায় বদলাতে হয়। CSS nesting এই সমস্যার সমাধান: সংশ্লিষ্ট নিয়মগুলো বাইরের নিয়মের ভেতরেই লেখা যায়, ঠিক যেভাবে HTML-এ element-এর ভেতরে element থাকে। নিচের এডিটরে একই কার্ড nesting দিয়ে লেখা — মাউস কার্ডের ওপর নিয়ে দেখুন:

.card {
  max-inline-size: 22rem;
  padding: 1rem;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  font-family: sans-serif;

  h3 { margin-block: 0 .5rem; color: teal; }
  .price { font-size: 1.5rem; font-weight: bold; }
  & a { color: #be123c; }
  &:hover { border-color: teal; background: #f0fdfa; }

  @media (width >= 30rem) {
    padding: 1.5rem;
  }
}

নিয়মগুলো এক নজরে

• & — nesting selector: বাইরের নিয়মের selector-কে বোঝায়। &:hover মানে .card:hover; &.sold মানে .card.sold (একই element-এ দুটি class).
• & ছাড়া লিখলে ভেতরের element ধরা হয়: h3 {…} আর & h3 {…} একই — দুটোই .card h3.
• & শেষে বসালে উল্টো সম্পর্ক: .theme-dark & {…} মানে “.theme-dark-এর ভেতরে থাকা .card” — কার্ডের নিয়ম কার্ডের কাছেই থাকল, যদিও শর্তটা বাইরের।
• At-rule-ও ভেতরে বসে: @media, @supports, @container (পর্ব ৩১) — ভেতরে সরাসরি declaration লিখলে সেগুলো বাইরের selector-এ লাগে।
• যত গভীরে খুশি, কিন্তু উচিত নয়: তিন স্তরের বেশি nesting হলে selector লম্বা আর ভারী হয়, HTML-এর গঠনের সাথে CSS শক্ত করে বাঁধা পড়ে যায়।

ব্রাউজার ভেতরে ভেতরে এই nested লেখাকে কীভাবে “খুলে” পড়ে, নিচের ডায়াগ্রামে ধাপে ধাপে দেখুন। প্রতিটি ধাপে বাঁ পাশের একটি লাইন, আর ডান পাশে ব্রাউজার যে সমতুল্য selector বোঝে:

1.card {2  padding: 1rem;3  h3 { color: teal; }4  &:hover { background: #f0fdfa; }5  & :hover { outline: 1px solid; }6  .theme-dark & { background: #111; }7  @media (width >= 40rem) { padding: 2rem; }8}9#hero, .banner { & p { color: gray; } }

“Relaxed” নিয়ম — শুরুর দিকের একটি বাধা উঠে গেছে

২০২৩ সালের শুরুতে প্রথম যে ব্রাউজার সংস্করণগুলো nesting এনেছিল, সেগুলোতে ভেতরের নিয়ম কোনো অক্ষর (যেমন h3) দিয়ে শুরু করা যেত না — লিখতে হতো & h3. কারণ, color:hover জাতীয় লেখা দেখে parser প্রথমে বুঝতে পারত না এটি declaration, নাকি selector. পরে স্পেসিফিকেশন দল একটি সমাধান বের করে, আর শর্তটি তুলে দেওয়া হয়। এখনকার সব প্রধান ব্রাউজারে h3 {…} সরাসরি লেখা যায়। পুরোনো সংস্করণের কথা ভেবে কেউ কেউ এখনো & h3 লেখেন — দুটো একই অর্থ দেয়, তাই এতে ক্ষতি নেই।

৩ · Nesting-এর specificity — & আসলে :is()

পর্ব ১৮-এ দেখেছেন, :is() তার তালিকার সবচেয়ে ভারী selector-এর ওজন নেয়। Nesting-এর & ঠিক এভাবেই কাজ করে: বাইরের selector-তালিকাকে সে :is(…)-এর ভেতরে মুড়ে নেয়। বাইরে একটিমাত্র selector হলে কোনো পার্থক্য চোখে পড়ে না। কিন্তু কমা দিয়ে কয়েকটি selector থাকলে, আর তার একটি id হলে, চমক অপেক্ষা করছে:

#hero, .banner {
  & p { color: slategray; font: 18px sans-serif; }
}

/* পরে লেখা, জরুরি নোটিশ লাল হওয়ার কথা */
.note { color: crimson; font-weight: bold; }

Sass একই লেখাকে অন্যভাবে খোলে: সে বানায় দুটি আলাদা selector — #hero p, .banner p. তখন .banner-এর ভেতরের অনুচ্ছেদ পায় শুধু .banner p-এর ওজন (0,1,1). উপরের উদাহরণে সেটিও .note-এর (0,1,0)-এর চেয়ে ভারী, তাই Sass-এও নোটিশ ধূসর থাকত। কিন্তু override যদি লেখা হয় .banner .note (0,2,0) — Sass-এর সমতল CSS-এ সেটি (0,1,1)-কে হারিয়ে জিতত, আর native nesting-এ (1,0,1)-এর কাছে হারে। Sass থেকে native nesting-এ সরে আসা প্রজেক্টে এ ধরনের হঠাৎ রং বদলে যাওয়ার অভিযোগ প্রায়ই আসে।

৪ · min(), max(), clamp() — পর্দার সাথে মানিয়ে নেওয়া মাপ

পর্ব ২০-এ calc() দেখেছেন। তার তিন ভাই হলো CSS-এর গাণিতিক function — যারা কয়েকটি মানের মধ্যে থেকে একটি বেছে নেয়:

• min(a, b) — দুটির মধ্যে ছোটটি। width: min(100%, 40rem) মানে “৪০rem চওড়া, কিন্তু জায়গা কম হলে পুরো চওড়া”। আগে এর জন্য দুই লাইন লাগত: width: 100%; max-width: 40rem;
• max(a, b) — দুটির মধ্যে বড়টি। padding: max(1rem, 4vw) — বড় পর্দায় পর্দার অনুপাতে ফাঁক, কিন্তু ফোনেও অন্তত 1rem.
• clamp(MIN, VAL, MAX) — মানটি VAL, কিন্তু MIN-এর নিচে নামবে না, MAX-এর ওপরে উঠবে না। গাণিতিকভাবে max(MIN, min(VAL, MAX)).

Fluid typography — পর্দার সাথে মসৃণভাবে বাড়া লেখা

পুরোনো পদ্ধতিতে শিরোনামের মাপ লাফ দিয়ে বদলাত — ফোনে 16px, ট্যাবলেটে media query দিয়ে 20px, ডেস্কটপে 24px. মাঝের পর্দায় হঠাৎ লাফ চোখে লাগত। Fluid typography-তে লেখার মাপ পর্দার চওড়ার সাথে মসৃণভাবে বাড়ে, আর clamp() দুই প্রান্তে সীমা টেনে দেয়:

মাঝের মানটি 0.8rem + 1vw — একটি স্থির অংশ আর পর্দার চওড়ার ১%. নিচের ডায়াগ্রামে চারটি পরিস্থিতিতে ব্রাউজার কী হিসাব করে দেখুন। শেষ দুই ধাপ সবচেয়ে গুরুত্বপূর্ণ — পাঠক যখন নিজের ব্রাউজারে লেখা বড় করেন:

1html { font-size: 100%; } /* পাঠকের ডিফল্ট */2h1 {3  font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);4}5.bad { font-size: 2vw; } /* শুধু vw */

সূত্রটি নিজে বের করুন

ধরুন আপনি চান শিরোনাম ৩২০px পর্দায় 16px আর ১১২০px পর্দায় 24px হোক, মাঝে সরলরেখায়। এটা স্কুলের সরলরেখার সমীকরণ y = mx + c:

1. ঢাল (m): (24 − 16) ÷ (1120 − 320) = 8 ÷ 800 = 0.01 — অর্থাৎ পর্দার প্রতি 1px-এ লেখা 0.01px বাড়ে। 0.01 × 100 = 1vw.
2. স্থির অংশ (c): 16 − 0.01 × 320 = 12.8px = 0.8rem (16px root ধরে)।
3. সীমা: নিচে 1rem, ওপরে 1.5rem. ব্যস — clamp(1rem, 0.8rem + 1vw, 1.5rem).

অনলাইনে অনেক “clamp calculator” আছে যা এই হিসাব করে দেয়, কিন্তু সূত্রটি জানা থাকলে আপনি AI বা টুলের দেওয়া মান যাচাই করতে পারবেন। এবার নিজে দেখুন। নিচের এডিটরের ছোট স্ক্রিপ্টটি প্রিভিউর চওড়া আর দুটি শিরোনামের আসল মাপ মেপে দেখায়:

<style>
  h1 { font: bold clamp(1rem, 0.8rem + 1vw, 1.5rem) sans-serif; margin: 0 0 8px; }
  .bad { font-size: 2vw; }
  .box { inline-size: min(100%, 25rem); padding: max(8px, 2vw); background: #e0f2fe; }
  p { font: 14px monospace; }
</style>
<h1>ঈদের অফার — সব পণ্যে ৩০% ছাড়</h1>
<h1 class="bad">শুধু 2vw দেওয়া শিরোনাম</h1>
<div class="box">min() আর max() দিয়ে মাপা বাক্স</div>
<p id="out"></p>
<script>
  (function m() {
    if (!document.body.offsetWidth) return setTimeout(m, 50);
    var h = document.querySelectorAll('h1');
    document.getElementById('out').textContent = 'viewport: ' + innerWidth +
      'px | clamp: ' + getComputedStyle(h[0]).fontSize +
      ' | 2vw: ' + getComputedStyle(h[1]).fontSize;
  })();
</script>

round(), mod(), rem() — ধাপে ধাপে মান

২০২৪ সালে আরও তিনটি গাণিতিক function সব প্রধান ব্রাউজারে এসেছে (Baseline Newly available). এদের বলে stepped-value function — মানকে নির্দিষ্ট ধাপে মেলায়:

/* 8px-এর গ্রিডে মেলানো: 37px হয় 40px */
.card { padding: round(nearest, 5vw, 8px); }   /* nearest | up | down | to-zero */

/* ভাগশেষ — চিহ্ন নেয় দ্বিতীয় সংখ্যার (mod), নাকি প্রথমটির (rem) */
/* mod(-7, 3) = 2      rem(-7, 3) = -1 */
.dial { rotate: mod(var(--angle), 360deg); }

round() কাজে লাগে পিক্সেলের ঝাপসা অর্ধেক মান এড়াতে আর নকশার ৪ বা ৮px গ্রিড মানতে। এগুলো নতুন, তাই এমনভাবে ব্যবহার করুন যাতে না চললেও ক্ষতি না হয় — আগের লাইনে একটি সাধারণ মান দিয়ে রাখুন (padding: 2rem; তারপর padding: round(…);). যে ব্রাউজার বোঝে না, সে দ্বিতীয় লাইন বাদ দিয়ে প্রথমটি রাখবে। পাশাপাশি sin(), cos(), pow(), sqrt()-এর মতো আরও কিছু function-ও CSS-এ আছে — গোল করে বৃত্তে জিনিস সাজানোর মতো কাজে লাগে।

৫ · Logical property — বাঁ-ডান নয়, শুরু-শেষ

পর্ব ২৩-এ দেখেছেন, CSS আসলে দুটি অক্ষ ধরে ভাবে। Inline অক্ষ — একটি লাইনের ভেতরে শব্দ যেদিকে চলে; block অক্ষ — নতুন লাইন আর নতুন block যেদিকে জমা হয়। বাংলা আর ইংরেজিতে inline অক্ষ বাঁ থেকে ডানে, block অক্ষ ওপর থেকে নিচে। উর্দু, আরবি, ফারসি বা হিব্রুতে inline অক্ষ ডান থেকে বাঁয়ে — একে বলে RTL (right-to-left). আর প্রচলিত জাপানি বইয়ে লাইন খাড়া, ওপর থেকে নিচে (writing-mode: vertical-rl).

margin-left, padding-right, top, width — এগুলো physical property: পর্দার দিক ধরে বলা। এর logical জোড়াগুলো বলে লেখার দিক ধরে — “লেখা যেখানে শুরু হয়”, “লেখা যেখানে শেষ হয়”:

কোণের নামটি একটু ধাঁধার মতো: border-start-start-radius-এর প্রথম “start” block অক্ষের (ওপর), দ্বিতীয়টি inline অক্ষের (বাংলায় বাঁ)। তাই বাংলা পাতায় এটি ওপর-বাঁ কোণ, উর্দু পাতায় ওপর-ডান কোণ। একই CSS তিনটি ভিন্ন লেখার দিকে কী হয়ে যায়, ডায়াগ্রামে দেখুন:

1.note {2  margin-inline-start: 2rem;3  border-inline-end: 4px solid;4  padding-block: 1rem;5  inline-size: 20rem;6}

এবার আসল ব্রাউজারে দেখুন। নিচে একই দুটি নোটিশ-বক্স — একটি physical, একটি logical property দিয়ে — প্রথমে বাংলা পাতায়, তারপর dir="rtl" দেওয়া উর্দু অংশে। মনে রাখুন, লেখার দিক জানানোর কাজ HTML-এর dir attribute-এর (পর্ব ১৪), CSS-এর নয়:

<style>
  .box { position: relative; margin-block: 14px; background: #f1f5f9; font: 18px sans-serif; }
  .old { border-left: 6px solid #dc2626; padding-left: 12px; text-align: left;
         border-top-left-radius: 14px; }
  .new { border-inline-start: 6px solid #16a34a; padding-inline-start: 12px;
         text-align: start; border-start-start-radius: 14px; }
  .tag { position: absolute; inset-block-start: -10px; inset-inline-end: 10px;
         padding-inline: 8px; background: #fde047; font-size: 13px; }
</style>
<div lang="bn">
  <p class="box old">স্বাগতম — physical</p>
  <p class="box new">স্বাগতম — logical <span class="tag">নতুন</span></p>
</div>
<div dir="rtl" lang="ur">
  <p class="box old">خوش آمدید — physical</p>
  <p class="box new">خوش آمدید — logical <span class="tag">نیا</span></p>
</div>

৬ · Cascade layers গভীরে — CSS-এর তাক সাজানো

পর্ব ১৮-এ cascade-এর সিঁড়িতে দেখেছেন, layer-এর ধাপ আসে specificity-র আগে। অর্থাৎ কোন layer-এ নিয়মটি আছে, সেটা ঠিক হয়ে গেলে selector কত ভারী, তা আর বিবেচ্য নয়। এখন দেখব এই ক্ষমতা দিয়ে একটি পুরো প্রজেক্ট কীভাবে সাজানো যায়।

প্রথম লাইন: ক্রম ঘোষণা

Layer-এর ক্রম ঠিক হয় প্রথমবার যখন তার নাম দেখা যায়। তাই ভালো অভ্যাস হলো ফাইলের একদম শুরুতে একটি ক্রম ঘোষণা লেখা — তারপর যেকোনো জায়গায়, যেকোনো ক্রমে layer-এ নিয়ম যোগ করুন, ক্রম বদলাবে না:

/* সবার আগে — দুর্বল থেকে শক্ত */
@layer reset, framework, components, utilities;

/* বাইরের library-কে নিজের একটি layer-এ ঢোকানো */
@import url("bootstrap.min.css") layer(framework);

@layer components {
  .btn { background: teal; }
}
@layer reset {               /* পরে লেখা, তবু সবচেয়ে দুর্বল */
  *, *::before, *::after { box-sizing: border-box; }
}

কয়েকটি নিয়ম মনে রাখুন। @import থাকতে হবে ফাইলের ওপরে — তার আগে শুধু @charset আর @layer-এর ক্রম ঘোষণা বসতে পারে, অন্য কোনো নিয়মের পরে লিখলে ব্রাউজার @import-টি পুরো বাদ দেয়। HTML-এর <link> ট্যাগে layer দেওয়ার কোনো প্রচলিত উপায় এখনো নেই, তাই বাইরের CSS-কে layer-এ নিতে হলে একটি CSS ফাইলের ভেতরে (বা <style>-এ) এভাবে @import করুন। আর মনে রাখুন, @import একটির পর একটি ফাইল নামায় বলে পাতা দেরিতে দেখা দিতে পারে — পারফরম্যান্সের দিক পর্ব ৪৯-এ।

নাম ছাড়া @layer { … } লিখলে তৈরি হয় নামহীন (anonymous) layer, যাতে পরে আর কিছু যোগ করা যায় না। আর layer-এর ভেতরে layer-ও রাখা যায়: @layer framework.base মানে framework-এর ভেতরের base উপ-তাক।

তিনটি সোনালি নিয়ম

নিচের ডায়াগ্রামে একটি বোতামের পেছনের রং নিয়ে লড়াই — পাঁচটি জায়গা থেকে পাঁচটি প্রার্থী। ধাপে ধাপে দেখুন কে জেতে, আর কেন:

@layer reset, framework, components, utilities;
/* বাঁ থেকে ডানে: দুর্বল → শক্ত */

@layer framework  { #buy.btn { background: gray; } }  (1,1,0)
@layer components { .btn { background: teal; } }     (0,1,0) ← জিতল

@layer utilities { .bg-red { background: red; } }
.btn { background: purple; }   ← জিতল: কোনো layer-এ নেই

@layer framework  { .btn { background: gray !important; } } ← জিতল
@layer components { .btn { background: teal !important; } }
.btn { background: purple !important; }   সবচেয়ে দুর্বল important

reset → framework → components → utilities → layer-এর বাইরে
  … সাধারণ declaration শেষ, এবার !important …
layer-এর বাইরে! → utilities! → components! → framework! → reset!

এবার নিজের হাতে লড়াইটা চালান। ধরা যাক framework layer-টি বাইরের একটি library:

@layer reset, framework, components, utilities;

@layer components {
  .btn { background: teal; color: white; padding: 10px 18px;
         border: 0; border-radius: 8px; font-size: 18px; }
}
@layer framework {           /* ধরুন বাইরের library */
  #buy.btn { background: gray; }
}
@layer utilities {
  .btn { outline: 3px dashed orange; outline-offset: 3px; }
}
@layer reset {
  button { font-family: inherit; }
}

এবার !important-এর উল্টো ক্রম পরীক্ষা করুন। তিন জায়গাতেই important — কে জিতবে, প্রিভিউ দেখার আগে অনুমান করুন:

@layer framework, components;

@layer framework {
  .btn { background: gray !important; }
}
@layer components {
  .btn { background: teal !important; }
}

/* layer-এর বাইরে */
.btn { background: purple !important; color: white;
       padding: 10px 18px; border: 0; border-radius: 8px; font-size: 18px; }

revert-layer আর DevTools

পর্ব ১৮-এর CSS-wide keyword-এর তালিকায় revert-layer দেখেছিলেন। কোনো property-তে এটি দিলে বর্তমান layer-এর মান বাদ পড়ে, আগের layer-এর মান ফিরে আসে — যেমন একটি component-এ library-র আসল বোতামের নকশা ফেরত আনা। আর Chrome বা Edge-এর DevTools-এ Styles প্যানেলে প্রতিটি নিয়মের পাশে তার layer-এর নাম দেখা যায়; “Elements” প্যানেলে layer-এর পুরো ক্রমও দেখানোর ব্যবস্থা আছে। কোনো নিয়ম কেন হারল, layer-এর নাম দেখেই প্রায়ই বোঝা যায়।

৭ · :is() আর :where() — হালকা selector-এর কৌশল

Layer ঠিক করে কোন দল নিয়ম কোন দলের ওপরে। কিন্তু একই layer-এর ভেতরে আবার specificity-র লড়াই চলে। সেখানে সবচেয়ে কার্যকর অস্ত্র :where() — যার ওজন সবসময় শূন্য। আধুনিক reset আর library-গুলো এই কারণেই তাদের নিয়ম :where()-এ মুড়ে লেখে:

@layer reset {
  /* ওজন শূন্য — যেকোনো class সহজে বদলাতে পারে */
  :where(ul, ol)[role="list"] { list-style: none; padding: 0; }
  :where(h1, h2, h3) { line-height: 1.2; text-wrap: balance; }
}

@layer components {
  /* :is() দিয়ে পুনরাবৃত্তি কমানো — এখানে ভারী হওয়াই চাই */
  .card :is(h2, h3):hover { color: teal; }
}

কৌশলটির নাম দেওয়া যায় “specificity-র বাজেট”: বেশিরভাগ selector (0,1,0) বা তার কম রাখুন — অর্থাৎ একটি class. id দিয়ে স্টাইল দেবেন না (id রাখুন লিংকের লক্ষ্য আর JavaScript-এর জন্য)। বেস স্টাইল :where()-এ, component একটি class-এ, অবস্থা (:hover, .is-open) তার সাথে একটি বাড়তি অংশে। তাহলে কোন নিয়ম জিতবে, তা বোঝা যায় শুধু layer আর লেখার ক্রম দেখে। আরেকটি সুবিধা: :is() আর :where()-এর তালিকা forgiving — তালিকার একটি selector ব্রাউজারের অচেনা হলেও বাকিগুলো কাজ করে, যেখানে সাধারণ কমা-তালিকায় একটি ভুলেই পুরো নিয়ম বাদ পড়ে।

৮ · ছোট ছোট আধুনিক সুবিধা — inset, aspect-ratio, accent-color, color-scheme

বড় feature-এর পাশে কিছু ছোট property আছে, যারা প্রতিদিনের কাজ অনেক সহজ করেছে। এর কয়েকটি আগের পর্বে ছুঁয়ে গেছেন; এখানে এক জায়গায়:

• inset — top, right, bottom, left একসাথে (পর্ব ২৪)। inset: 0 মানে পুরো parent ঢেকে দেওয়া — আগে চার লাইন লাগত।
• aspect-ratio — চওড়া আর উচ্চতার অনুপাত (পর্ব ১৯)। আগে ভিডিওর বাক্স ১৬:৯ রাখতে লেখা হতো padding-top: 56.25% — কারণ শতাংশে দেওয়া padding চওড়ার হিসাবে হয়, আর ৯ ÷ ১৬ = ০.৫৬২৫. এখন শুধু aspect-ratio: 16 / 9.
• text-wrap: balance — শিরোনামের লাইনগুলো প্রায় সমান দৈর্ঘ্যের করে (পর্ব ২১)। আগে হাতে <br> দিয়ে বা JavaScript library দিয়ে এই কাজ করা হতো। text-wrap: pretty অনুচ্ছেদের শেষ লাইনে একা একটি শব্দ পড়ে থাকা এড়ায়, তবে এর সাপোর্ট এখনো সব ব্রাউজারে সমান নয় — Can I use দেখে নিন।

<style>
  .thumb { position: relative; inline-size: min(100%, 320px); aspect-ratio: 16 / 9;
           background: linear-gradient(135deg, #0ea5e9, #6366f1); border-radius: 10px; }
  .thumb span { position: absolute; inset: auto 0 0 0; padding: 6px 10px;
                background: rgb(0 0 0 / .6); color: white; font: 14px sans-serif; }
  .play { position: absolute; inset: 0; margin: auto; inline-size: 56px; aspect-ratio: 1;
          border-radius: 50%; background: white; }
  h2 { inline-size: min(100%, 380px); font: bold 26px sans-serif; text-wrap: balance; }
</style>
<div class="thumb">
  <div class="play"></div>
  <span>ভিডিও: ঢাকা মেট্রো রেলের প্রথম দিন</span>
</div>
<h2>অনলাইন দোকান খোলার আগে যে পাঁচটি জিনিস জানা দরকার</h2>

accent-color আর color-scheme — ফর্ম কন্ট্রোলের রং আর আলো-অন্ধকার

Checkbox, radio আর range slider-এর রং বদলাতে আগে পুরো কন্ট্রোল লুকিয়ে নতুন করে আঁকতে হতো — অনেক CSS, আর প্রায়ই keyboard বা screen reader-এর সমস্যা। accent-color এক লাইনে ব্রাউজারের নিজের কন্ট্রোলে আপনার ব্র্যান্ডের রং বসায়, কন্ট্রোলের আচরণ একটুও না বদলে। আর color-scheme ব্রাউজারকে জানায় এই অংশটি হালকা না অন্ধকার নকশার — তাহলে ব্রাউজার নিজের ফর্ম কন্ট্রোল, scrollbar আর system color (Canvas = পেছনের রং, CanvasText = লেখার রং) সেই অনুযায়ী আঁকে:

<style>
  .wrap { display: flex; flex-wrap: wrap; gap: 12px; font: 16px sans-serif; }
  .panel { padding: 12px 16px; border-radius: 10px; accent-color: #16a34a;
           background: Canvas; color: CanvasText; border: 1px solid gray; }
  .light { color-scheme: light; }
  .dark  { color-scheme: dark; }
</style>
<div class="wrap">
  <div class="panel light">
    <p><label><input type="checkbox" checked> SMS-এ জানান</label></p>
    <p><label><input type="radio" name="p1" checked> bKash</label></p>
    <p><input type="range" aria-label="পরিমাণ" value="70"></p>
  </div>
  <div class="panel dark">
    <p><label><input type="checkbox" checked> SMS-এ জানান</label></p>
    <p><label><input type="radio" name="p2" checked> bKash</label></p>
    <p><input type="range" aria-label="পরিমাণ" value="70"></p>
  </div>
</div>

color-scheme হলো dark mode-এর প্রথম ধাপ মাত্র। পাতার রং দুই থিমে আলাদা করার পুরো কৌশল — prefers-color-scheme, light-dark() function আর custom property দিয়ে থিম — আসছে পরের পর্বে।

৯ · আধুনিক CSS চিটশিট — পুরোনো কৌশল থেকে নতুন feature

পুরোনো কোড মেরামত, AI-এর দেওয়া কোড যাচাই, বা ইন্টারভিউ — সব জায়গায় কাজে লাগবে এই তালিকা। বাঁ কলামের কিছু দেখলে বুঝবেন কোডটি পুরোনো ধারার, আর ডান কলামে তার আধুনিক বিকল্প:

১০ · AI-এর যুগে — পুরোনো CSS চিনে ফেলার চোখ

AI-এর শেখার উপাদানের বড় অংশ গত পনেরো-বিশ বছরের ওয়েব। সেখানে পুরোনো CSS-এর পরিমাণ নতুন CSS-এর চেয়ে অনেক বেশি — তাই AI প্রায়ই চলনসই কিন্তু পুরোনো ধারার কোড দেয়, আর কখনো কখনো বলে বসে “native CSS-এ nesting নেই, Sass লাগবে” — যা এখন আর সত্য নয়। উপরের চিটশিটটি এখানেই কাজে লাগবে।

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

• Sass-এর কোনো চিহ্ন (&__, $, @mixin, @include) .css ফাইলে নেই
• প্রতিটি clamp()-এর মাঝের মান তিনটি পর্দার চওড়ায় হাতে হিসাব করেছি, আর ব্রাউজারে 200% zoom করে লেখা বড় হচ্ছে কি না দেখেছি
• HTML-এ dir="rtl" দিয়ে একবার দেখেছি নকশা আয়নার মতো উল্টাচ্ছে কি না
• DevTools-এর Styles প্যানেলে দেখেছি কোন নিয়ম কোন layer থেকে জিতছে, আর !important গুনে দেখেছি
• নতুন feature-এর অবস্থা MDN-এর Baseline চিহ্ন বা caniuse.com-এ মিলিয়েছি; HTML validator.w3.org-এ আর পাতা Lighthouse-এ পরীক্ষা করেছি