একেবারে নতুন CSS — anchor positioning, @property, @scope আর View Transitions

১ · নতুন CSS কীভাবে ওয়েবে আসে — CSSWG, Interop আর Baseline

এই পর্বের প্রতিটি ফিচার চমৎকার, কিন্তু একটি সতর্কতা দিয়ে শুরু করা দরকার। একটি নতুন মোবাইল ফোন বাজারে এলেই ঢাকার সবার হাতে সেটি পৌঁছে যায় না — কেউ পুরোনো ফোনে আছেন, কেউ আপডেট করেননি। ব্রাউজারের বেলাতেও তাই। আপনার ল্যাপটপের সর্বশেষ Edge বা Chrome-এ যা চলে, একজন ক্রেতার পুরোনো iPhone-এর Safari-তে সেটি না-ও চলতে পারে। তাই নতুন CSS শেখার আসল দক্ষতা দুটি: ফিচারটি বোঝা, আর কে কে এটি দেখতে পাবেন সেটি জানা।

পর্ব ১-এ আপনি Baseline দেখেছেন। এখানে পুরো যাত্রাটি একবার মনে করিয়ে দিই, কারণ এই পর্বের প্রতিটি ফিচার এই পথের কোনো না কোনো ধাপে দাঁড়িয়ে আছে। “পরে” চেপে এগোন:

এবার এই পর্বের ফিচারগুলোর অবস্থা এক টেবিলে দেখুন। একটি সততার কথা আগে বলি: এই তথ্য ২০২৫–২৬ সময়ের, আর ব্রাউজার প্রতি মাসে বদলায়। তাই ব্যবহারের আগে সবসময় Can I use আর MDN-এর পাতার নিচের Baseline-বাক্সটি নিজে দেখে নিন।

টেবিল মুখস্থ করার দরকার নেই — এক বছর পরেই এটি পুরোনো হবে। দরকার পরীক্ষা করার অভ্যাস। নিচের ছোট স্ক্রিপ্টটি আপনার ব্রাউজারকেই জিজ্ঞেস করে সে কোনটি চেনে। CSS.supports() হলো @supports-এর JavaScript রূপ:

// আপনার ব্রাউজার কোন নতুন CSS চেনে?
const checks = {
  '@property':           'CSSPropertyRule' in window,
  'anchor-name':         CSS.supports('anchor-name: --a'),
  'position-area':       CSS.supports('position-area: top'),
  '@scope':              'CSSScopeRule' in window,
  'startViewTransition': 'startViewTransition' in document,
  'field-sizing':        CSS.supports('field-sizing: content'),
  'base-select':         CSS.supports('appearance: base-select'),
  'interpolate-size':    CSS.supports('interpolate-size: allow-keywords'),
  'scroll timeline':     CSS.supports('animation-timeline: scroll()'),
  'sibling-index()':     CSS.supports('order: sibling-index()')
};
for (const k in checks) {
  console.log((checks[k] ? 'YES  ' : 'no   ') + k);
}

২ · @property — ধরন জানা CSS variable

পর্ব ৩৩-এ আপনি custom property বা CSS variable দেখেছেন: --brand: #0f766e; লিখে পরে var(--brand). এর একটি লুকানো দুর্বলতা আছে। ব্রাউজার --brand-এর মান কী ধরনের — রং, দৈর্ঘ্য, না কোণ — জানে না। তার কাছে এটি শুধু কয়েকটি অক্ষর, যা var()-এর জায়গায় বসিয়ে দিতে হবে।

মাঝামাঝি পরিমাণ মাপা — এটিই animation-এর আসল কাজ। 0deg থেকে 360deg-এ যেতে হলে ব্রাউজারকে 90deg, 180deg-এর মতো মাঝের মানগুলো হিসাব করতে হয়। ধরন না জানলে সে তা পারে না; তখন সে discrete animation করে — অর্ধেক সময় পুরোনো মান, তারপর এক লাফে নতুন মান। @property দিয়ে ব্রাউজারকে তিনটি জিনিস জানানো হয়:

@property --angle {
  syntax: '<angle>';     /* মানের ধরন: কোণ */
  inherits: false;        /* parent থেকে উত্তরাধিকার নেবে না */
  initial-value: 0deg;    /* কিছু না দিলে বা ভুল মান দিলে এটি */
}

• syntax — ধরন। '<color>', '<length>', '<percentage>', '<number>', '<angle>' ইত্যাদি; '*' মানে “যেকোনো কিছু” (তখন আবার animate হয় না)।
• inherits — সাধারণ variable সবসময় উত্তরাধিকারী (inheritance, পর্ব ১৮)। false দিলে প্রতিটি element নিজের মান রাখে — animation-এ এটি দ্রুতও, কারণ একটি বদলালে পুরো গাছের হিসাব আবার করতে হয় না।
• initial-value — প্রাথমিক মান। '*' ছাড়া অন্য syntax হলে এটি বাধ্যতামূলক, আর এমন হতে হবে যা অন্য কিছুর ওপর নির্ভর করে না (0deg চলবে, 1em চলবে না)।

এবার আসল উদাহরণ — বাঁয়ের বৃত্তে নিবন্ধিত --angle, ডানের বৃত্তে সাধারণ --plain. দুটির animation হুবহু এক:

<style>
  @property --angle {
    syntax: '<angle>'; inherits: false; initial-value: 0deg;
  }
  .ring {
    display: inline-grid; place-items: center;
    width: 130px; height: 130px; margin: 8px; border-radius: 50%;
    background: conic-gradient(from var(--angle), #16a34a, #facc15, #dc2626, #16a34a);
    animation: spin 3s linear infinite;
  }
  .ring span { display: grid; place-items: center; width: 96px; height: 96px;
    border-radius: 50%; background: #fff; font: 700 14px sans-serif; }
  .plain { --plain: 0deg; animation-name: spin2;
    background: conic-gradient(from var(--plain), #16a34a, #facc15, #dc2626, #16a34a); }
  @keyframes spin  { to { --angle: 360deg; } }
  @keyframes spin2 { to { --plain: 360deg; } }
  @media (prefers-reduced-motion: reduce) { .ring { animation: none; } }
  .note { display: none; color: #b91c1c; }
</style>
<div class="ring"><span>@property</span></div>
<div class="ring plain"><span>সাধারণ var</span></div>
<p class="note" id="note">আপনার ব্রাউজার @property চেনে না — তাই বাঁয়েরটাও ঘুরবে না।</p>
<script>
  if (!window.CSSPropertyRule) document.getElementById('note').style.display = 'block';
</script>

@property ২০২৪ সালে Firefox যোগ দেওয়ায় চারটি প্রধান ব্রাউজারেই এসেছে — Baseline Newly available. যে পুরোনো ব্রাউজার এটি চেনে না, সে পুরো @property ব্লক উপেক্ষা করে, আর --angle সাধারণ variable হয়ে যায়। ফলে gradient ঠিকই দেখা যায়, শুধু ঘোরে না — এটিই সুন্দর graceful degradation. সতর্কতা: প্রথম মানের জন্য initial-value-এর ওপর ভরসা করলে পুরোনো ব্রাউজারে var(--angle) খালি থাকবে; তাই var(--angle, 0deg)-এর মতো দ্বিতীয় মান (fallback) লিখে রাখা নিরাপদ।

৩ · Anchor positioning — tooltip আর dropdown বোতামের সাথে বাঁধা

পর্ব ২৪-এ দেখেছেন, tooltip বা dropdown-কে বোতামের পাশে রাখতে প্রচলিত কৌশল ছিল wrapper-এ position: relative, ভেতরে position: absolute. এর তিনটি সমস্যা: পূর্বপুরুষের overflow: hidden কেটে ফেলে, z-index-এর দলাদলি, আর পর্দার কিনারায় পৌঁছালে tooltip বাইরে চলে যায়। পর্ব ১১-এর popover প্রথম দুটি সমস্যা মেটায় — সে top layer-এ ওঠে। কিন্তু top layer-এ উঠে সে বোতামের ঠিকানা হারায়, ডিফল্টে বসে পর্দার মাঝখানে।

তৃতীয় সমস্যার সমাধান anchor positioning. ধারণাটি নৌকার নোঙরের মতো সরল: একটি element-কে নোঙর ঘোষণা করুন, আরেকটিকে বলুন “ওই নোঙরের সাপেক্ষে বসো।” দুটি DOM-এ যেখানেই থাকুক, ব্রাউজার জ্যামিতি মিলিয়ে দেবে। ধাপে ধাপে দেখুন:

1.help-btn {2  anchor-name: --help;3}4.tip {5  position: absolute;6  position-anchor: --help;7  position-area: top;8  position-try-fallbacks: flip-block;9}10@supports not (anchor-name: --a) {11  .tip { /* পুরোনো relative + absolute */ }12}

প্রথমে মূল যন্ত্রটি নিজে চালান। এখানে position-area-র বদলে নিচু-স্তরের anchor() ফাংশন ব্যবহার করা হয়েছে — anchor(top) মানে “নোঙরের ওপরের কিনারা কোথায়”:

.wrap { padding: 70px 24px 24px; font-family: sans-serif; }
.btn  { anchor-name: --send; padding: 10px 16px; font-size: 16px; }
.tip {
  position: absolute;
  position-anchor: --send;
  bottom: anchor(top);   /* tip-এর নিচ = বোতামের ওপর */
  left: anchor(left);    /* tip-এর বাঁ = বোতামের বাঁ */
  margin-bottom: 8px;
  padding: 6px 10px; border-radius: 8px;
  background: #0f172a; color: #fff; font-size: 14px;
}
.note { display: none; color: #b91c1c; }
@supports not (anchor-name: --a) {
  .note { display: block; }
  .wrap { position: relative; }
  .tip  { bottom: auto; top: 20px; left: 24px; }
}

এবার বাস্তবের জোড়া: popover (পর্ব ১১) + anchor positioning. popover দেয় top layer, light dismiss (বাইরে ক্লিক বা Esc চাপলে বন্ধ) আর কীবোর্ড-সুবিধা; anchor positioning দেয় ঠিকানা। একটি অনলাইন দোকানের অর্ডার-পাতার “অপশন” মেনু:

<style>
  body { font-family: sans-serif; }
  .order { height: 130px; padding: 12px; background: #f1f5f9; border-radius: 10px; }
  .menu-btn { anchor-name: --menu; margin-top: 10px; padding: 8px 14px; }
  #menu { padding: 6px; border: 1px solid #94a3b8; border-radius: 10px; }
  #menu button { display: block; width: 100%; margin: 2px 0; padding: 6px 12px; }
  .spacer { height: 150px; }
  .note { display: none; color: #b91c1c; }
  @supports (anchor-name: --a) {
    #menu {
      position-anchor: --menu;
      position-area: bottom span-right;
      position-try-fallbacks: flip-block;
      inset: auto; margin: 6px 0;
    }
  }
  @supports not (anchor-name: --a) { .note { display: block; } }
</style>
<p class="note">anchor positioning নেই — মেনু পর্দার মাঝখানে খুলবে, তবু কাজ করবে।</p>
<div class="order">অর্ডার #৪৫১২ · জামদানি শাড়ি · ৳ ৮,৫০০</div>
<button class="menu-btn" popovertarget="menu">অপশন ▾</button>
<div id="menu" popover>
  <button popovertarget="menu" popovertargetaction="hide">অর্ডার ট্র্যাক করুন</button>
  <button popovertarget="menu" popovertargetaction="hide">রসিদ দেখুন</button>
</div>
<div class="spacer"></div>

সাপোর্টের সৎ চিত্র: anchor positioning Chromium-এ (Chrome, Edge, Opera, Samsung Internet) ২০২৪ সাল থেকে আছে, Safari 26-এ ২০২৫ সালে এসেছে, আর Firefox-এ এর কাজ Interop 2025-এর অংশ হিসেবে চলছিল। এই লেখার সময় একে নিশ্চিতভাবে “সবখানে আছে” বলা যায় না — আপনি পড়ার সময় হয়তো Baseline Newly available হয়ে গেছে, Can I use-এ দেখে নিন। একটি ইতিহাসও জেনে রাখুন: খসড়ার সময় position-area-র নাম ছিল inset-area, আর position-try-fallbacks-এর নাম ছিল position-try-options. পুরোনো ব্লগ বা AI এই পুরোনো নাম দিলে বর্তমান ব্রাউজারে সেগুলো কাজ করবে না।

৪ · @scope — নিয়মকে একটি এলাকায় আটকে রাখা

বড় সাইটে CSS-এর সবচেয়ে পুরোনো মাথাব্যথা: একটি কার্ডের জন্য লেখা .card a { … } নিয়ম কার্ডের ভেতরে বসানো ব্যবহারকারীর মন্তব্যের লিংকেও লেগে যায়, বা অন্য কোনো component-এর ভেতরে ঢুকে পড়ে। এর সমাধানে মানুষ BEM-এর মতো নামকরণের নিয়ম (পর্ব ৪৬), CSS Modules, বা Shadow DOM ব্যবহার করেছেন। পর্ব ১৮-এ আপনি @scope-এর এক ঝলক দেখেছেন; এবার পুরোটা।

@scope-এর দুটি অংশ। scoping root — কোথা থেকে নিয়ম শুরু; আর ঐচ্ছিক scoping limit — কোথায় থামবে। দুটি একসাথে দিলে মাঝখানে ফুটোওয়ালা একটি এলাকা তৈরি হয়, তাই একে বলে “donut scope”:

@scope (.post) to (.comments) {
  :scope { border: 2px solid green; }  /* .post নিজেই */
  a      { font-weight: 700; }         /* .post-এর লিংক, .comments-এর নয় */
}

আরেকটি নতুন ধারণা scoping proximity. পর্ব ১৮-এর cascade-এ specificity-র পরে, source order-এর আগে একটি ধাপ আছে: দুটি scope-নিয়মের specificity সমান হলে যে নিয়মের root element-টির সবচেয়ে কাছে, সে জেতে। এতে থিমের ভেতরে থিম (dark-এর ভেতরে light কার্ড) স্বাভাবিকভাবে কাজ করে। দুটিই একসাথে চালিয়ে দেখুন:

<style>
  body { font-family: sans-serif; }
  .note { color: #b91c1c; }
  @scope (body) { .note { display: none; } }

  /* ডোনাট: .post-এর ভেতরে, কিন্তু .comments-এর ভেতরে নয় */
  @scope (.post) to (.comments) {
    :scope { display: block; padding: 4px 12px; border: 2px solid #15803d; border-radius: 8px; }
    a { color: #15803d; font-weight: 700; }
  }
  /* নৈকট্য: কাছের root জেতে, কোডের ক্রম নয় */
  @scope (.light) { p { color: #0f172a; background: #e2e8f0; } }
  @scope (.dark)  { p { color: #fff; background: #1e293b; } }
  .dark, .light { padding: 6px; }
</style>
<p class="note">আপনার ব্রাউজার @scope চেনে না — তাই নিচে কোনো scope-নিয়মই খাটছে না।</p>
<article class="post">
  <p>নতুন পোস্ট: <a href="#r">সরিষা ইলিশের রেসিপি</a></p>
  <div class="comments"><p>মন্তব্য: <a href="#b">আমার ব্লগ দেখুন</a></p></div>
</article>
<div class="dark"><p>dark থিমের লেখা</p>
  <div class="light"><p>dark-এর ভেতরে light কার্ড</p></div>
</div>

তিনটি সূক্ষ্ম নিয়ম মনে রাখুন। এক, scoping root-এর selector নিয়মের specificity-তে যোগ হয় না — @scope (#main) { p {…} }-এর specificity শুধু p-এর (0,0,1); তবে নিয়মের ভেতরে :scope লিখলে সেটি একটি pseudo-class হিসেবে (0,1,0) যোগ করে। দুই, limit element নিজেও scope-এর বাইরে — .comments-এর গায়ে নিয়ম লাগে না। তিন, <style>-এর ভেতরে selector ছাড়া @scope { … } লিখলে root হয় সেই <style>-এর parent element — component-এর ভেতরে ছোট ছোট style রাখার সহজ উপায়।

সাপোর্ট: Chromium-এ ২০২৩ সাল থেকে, Safari-তে ২০২৪ সাল থেকে; Firefox সবার শেষে, ২০২৫-এর শেষ দিকে যোগ দিয়েছে বলে আমাদের জানা — অর্থাৎ @scope একেবারে সদ্য Baseline Newly available. Fallback-এর কৌশলটি উপরের নোটে দেখলেন: যে ব্রাউজার @scope চেনে না, সে পুরো ব্লক বাদ দেয়। তাই scope-এর ভেতরে শুধু এমন নিয়ম রাখুন যা না খাটলেও পাতা ব্যবহারযোগ্য থাকে, অথবা পাশে একটি সাধারণ descendant selector-এর সংস্করণও রাখুন।

৫ · View Transitions — দুই অবস্থার মাঝে মসৃণ বদল

মোবাইল অ্যাপে একটি ছবিতে ট্যাপ করলে সেটি বড় হয়ে নতুন পাতায় চলে যায় — চোখ বুঝতে পারে কী কোথায় গেল। ওয়েবে বহু বছর এটি করা খুব কঠিন ছিল: পুরোনো আর নতুন অবস্থা একই সময়ে পর্দায় রাখতে হতো, দুটির মাপ মেপে অ্যানিমেশন হাতে লিখতে হতো। View Transitions এই কঠিন অংশটি ব্রাউজারের হাতে দিয়েছে। ব্রাউজার ভেতরে কী করে, ধাপে ধাপে দেখুন:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)   ← পুরোনো ছবি, মিলিয়ে যায়
      └─ ::view-transition-new(root)   ← নতুন অবস্থা, ফুটে ওঠে

এবার নিজে চালান। তিনটি জেলার কার্ড — বোতাম চাপলে তিন কলাম থেকে এক কলামের তালিকা হয়। প্রতিটি কার্ডে আলাদা view-transition-name, তাই প্রতিটি আলাদা করে নতুন জায়গায় সরে যায়। স্ক্রিপ্টটি মাত্র কয়েক লাইনের, আর পুরোনো ব্রাউজারের জন্য বিকল্পসহ:

<style>
  body { font-family: sans-serif; }
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
  .grid.list { grid-template-columns: 1fr; }
  .card { padding: 16px; border-radius: 10px; color: #fff; font-weight: 700; }
  ::view-transition-group(*) { animation-duration: 0.6s; }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
      animation: none !important;
    }
  }
</style>
<button id="toggle">লেআউট বদলান</button>
<p id="note" hidden>আপনার ব্রাউজারে View Transitions নেই — লেআউট বদলাবে, অ্যানিমেশন ছাড়া।</p>
<div class="grid" id="grid">
  <div class="card" style="background:#0f766e; view-transition-name: c1">ঢাকা</div>
  <div class="card" style="background:#b45309; view-transition-name: c2">চট্টগ্রাম</div>
  <div class="card" style="background:#7c3aed; view-transition-name: c3">সিলেট</div>
</div>
<script>
  const grid = document.getElementById('grid');
  const update = () => grid.classList.toggle('list');
  if (!document.startViewTransition) document.getElementById('note').hidden = false;
  document.getElementById('toggle').addEventListener('click', () => {
    if (!document.startViewTransition) return update();   // fallback
    document.startViewTransition(update);
  });
</script>

পাতা থেকে পাতায় — cross-document view transition

উপরেরটি “same-document” — একই পাতার ভেতরে বদল, যেখানে JavaScript লাগে। পর্ব ১৫-এর মতো সাধারণ বহু-পাতার সাইটে (একটি লিংকে ক্লিক করলে পুরো নতুন HTML পাতা আসে) আরও সহজ উপায় আছে: cross-document view transition. দুটি পাতার CSS-এই একটি লাইন লিখলে, একই origin-এর ভেতরে এক পাতা থেকে আরেক পাতায় যাওয়ার সময় ব্রাউজার নিজেই cross-fade করে — JavaScript ছাড়াই:

/* দুই পাতাতেই */
@view-transition {
  navigation: auto;
}
/* লোগোকে দুই পাতাতেই একই নাম দিলে, লোগো জায়গা বদলে সরে যাবে */
.site-logo { view-transition-name: logo; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

এটি এখানে চালিয়ে দেখানো যাচ্ছে না, কারণ প্রিভিউ একটিমাত্র ডকুমেন্ট, আর প্রিভিউর ভেতরে অন্য পাতা খোলে না। নিজের কম্পিউটারে দুটি HTML ফাইল বানিয়ে local server দিয়ে খুলে (পর্ব ২) চেষ্টা করতে পারেন। সাপোর্ট: same-document রূপটি Chromium, Safari আর ২০২৫-এর শেষ দিকে Firefox-এ আসায় Baseline Newly available; কিন্তু cross-document রূপটি এখনো Chromium আর Safari-তে, Firefox-এ নয় — not yet Baseline. সৌভাগ্যক্রমে এটি নিখুঁত progressive enhancement: যে ব্রাউজার @view-transition চেনে না, সে সাধারণভাবেই পাতা বদলায়।

৬ · ফর্মের নতুন সুবিধা — field-sizing আর customizable select

ফর্ম (পর্ব ৮–৯) ওয়েবের সবচেয়ে পুরোনো অংশগুলোর একটি, আর এখানেই দুটি অনেক দিনের অভিযোগের সমাধান আসছে। প্রথমটি: মন্তব্যের textarea লেখার সাথে সাথে বড় হোক। এতদিন এর জন্য JavaScript দিয়ে প্রতিটি কি-চাপে উচ্চতা মাপতে হতো। নতুন field-sizing: content বলে, “বাক্সের মাপ ঠিক করবে ভেতরের লেখা”:

body { font-family: sans-serif; }
input, textarea {
  field-sizing: content;   /* লেখা অনুযায়ী মাপ */
  min-width: 6ch;          /* খালি হলেও খুব সরু নয় */
  max-width: 100%;         /* কনটেইনারের বাইরে নয় */
  font: inherit;
  padding: 6px 8px;
}
textarea { min-height: 3em; }
.note { display: none; color: #b91c1c; }
@supports not (field-sizing: content) {
  .note { display: block; }
}

দ্বিতীয় অভিযোগটি আরও পুরোনো: <select>-এর খোলা তালিকা CSS দিয়ে সাজানো যায় না, কারণ সেটি আঁকে অপারেটিং সিস্টেম। তাই ডিজাইনাররা div দিয়ে নকল dropdown বানাতেন — যা প্রায়ই কীবোর্ড আর screen reader-এ ভাঙত। নতুন customizable select-এ এক লাইনের opt-in: appearance: base-select. তখন বোতাম, তালিকা (::picker(select)), টিকচিহ্ন (::checkmark) — সব CSS দিয়ে সাজানো যায়, আর আসল select-এর কীবোর্ড ও অ্যাক্সেসিবিলিটি অক্ষত থাকে:

body { font-family: sans-serif; padding-bottom: 150px; }
select, ::picker(select) {
  appearance: base-select;     /* নতুন রূপে যোগ দেওয়া */
}
select {
  border: 2px solid #0f766e; border-radius: 10px;
  padding: 6px 12px; background: #f0fdfa;
}
::picker(select) {
  border: 1px solid #0f766e; border-radius: 10px;
}
option:checked { background: #ccfbf1; font-weight: 700; }
option::checkmark { content: '✔'; color: #0f766e; }
.note { display: none; color: #b91c1c; }
@supports not (appearance: base-select) {
  .note { display: block; }
}

৭ · height: auto পর্যন্ত animation, স্ক্রল-অ্যানিমেশন আর আগামীর তালিকা

CSS-এর একটি বিখ্যাত অসম্ভব কাজ: height: 0 থেকে height: auto-তে transition. FAQ-এর উত্তর খোলার সময় মসৃণভাবে নামুক — এটুকুই চাওয়া, কিন্তু ব্রাউজার auto শব্দটির মাঝামাঝি মান হিসাব করত না, ফলে এক লাফে খুলত। মানুষ max-height: 1000px-এর মতো কৌশল করতেন, যাতে সময় ভুল হতো, বা JavaScript দিয়ে মেপে নিতেন।

নতুন সমাধান দুটি। interpolate-size: allow-keywords :root-এ দিলে পুরো পাতায় auto, min-content, fit-content-এর মতো keyword-এ animate করার অনুমতি মেলে। আর calc-size(auto, size) একটি নির্দিষ্ট জায়গায় একই কাজ করে, এমনকি হিসাবও করা যায় (calc-size(auto, size + 20px)). opt-in কেন? কারণ পুরোনো সাইট হয়তো ধরে রেখেছে যে auto-তে লাফ দেবে — সবার জন্য হঠাৎ বদলে দিলে সেগুলো ভাঙত।

:root { interpolate-size: allow-keywords; }
body { font-family: sans-serif; }
.faq { max-width: 360px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 10px; }
.answer {
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
}
.faq:has(:checked) .answer {
  height: auto;            /* এখন এটিও animate হয় */
}
@media (prefers-reduced-motion: reduce) {
  .answer { transition: none; }
}
.note { display: none; color: #b91c1c; }
@supports not (interpolate-size: allow-keywords) {
  .note { display: block; }
}

স্ক্রল ধরে অ্যানিমেশন — ঝলকমাত্র

Scroll-driven animation হলো এমন CSS animation, যা সময় ধরে নয়, স্ক্রল ধরে এগোয় — পাতার ওপরে পড়ার অগ্রগতির দাগ, বা পর্দায় ঢোকার সাথে সাথে ফুটে ওঠা ছবি। মূল কৌশল একটি property: animation-timeline: scroll() বা view(). এটি Chromium আর Safari 26-এ আছে, Firefox-এ এখনো পরীক্ষামূলক — not yet Baseline. পুরো আলোচনা, উদাহরণ আর fallback পর্ব ৪২-এ।

নজরে রাখার তালিকা — if() আর sibling-index()

দুটি ফিচার এসেছে মূলত Chromium-এ; অন্য ইঞ্জিনে এগুলো এখনো আলোচনায় বা সবে আসছে। এগুলো দিয়ে আজ প্রোডাকশন সাইট বানাবেন না, তবে দিক বোঝার জন্য চিনে রাখুন:

• if() — একটি property-র ভেতরেই শর্ত: color: if(style(--theme: dark): white; else: black);. এতদিন এই কাজে আলাদা selector বা media query লাগত।
• sibling-index() ও sibling-count() — element কত নম্বর child, আর মোট কয়জন। যেমন তালিকার প্রতিটি আইটেম একটু দেরিতে ফুটে উঠুক: transition-delay: calc(sibling-index() * 80ms); — আগে প্রতিটির জন্য আলাদা :nth-child() নিয়ম লিখতে হতো।

৮ · একসাথে ব্যবহার — @supports, স্তরে স্তরে fallback আর পেশাদার সিদ্ধান্ত

এই পর্বের প্রতিটি উদাহরণে একই নকশা ছিল, খেয়াল করেছেন? আগে এমন কোড যা সবখানে চলে, তারপর @supports দিয়ে নতুন ফিচারের স্তর। এর নাম progressive enhancement. বাড়ি বানানোর মতো ভাবুন: আগে ঢালাই আর দেয়াল (সবার জন্য), তারপর রং আর নকশা (যার সামর্থ্য আছে)। নকশা না থাকলে বাড়ি দেখতে সাধারণ, কিন্তু থাকার অযোগ্য নয়।

/* স্তর ১ — সবার জন্য: পুরোনো, নির্ভরযোগ্য কৌশল */
.help { position: relative; }
.help .tip { position: absolute; bottom: 100%; left: 0; }

/* স্তর ২ — যে ব্রাউজার পারে: নতুন কৌশল */
@supports (anchor-name: --a) {
  .help .btn { anchor-name: --help; }
  .help .tip {
    position-anchor: --help;
    inset: auto;                 /* স্তর ১-এর মান মুছে দিই */
    position-area: top;
    position-try-fallbacks: flip-block;
  }
}

এখানে তিনটি সূক্ষ্ম বিষয়। প্রথম, স্তর ২-এ স্তর ১-এর bottom/left মুছে দিতে হয়েছে — নইলে দুটি নিয়ম মিশে অদ্ভুত ফল দিত। দ্বিতীয়, শুধু property-র নাম নয়, একটি পুরো মান যাচাই করুন: @supports (position-area: top) বেশি নিখুঁত, কারণ কোনো ব্রাউজার property চিনলেও সব মান না-ও চিনতে পারে। তৃতীয়, CSS নিজেই ক্ষমাশীল (পর্ব ১৬) — অচেনা property বা at-rule ব্রাউজার চুপচাপ বাদ দেয়। তাই অনেক ক্ষেত্রে, যেমন field-sizing বা @view-transition-এ, @supports ছাড়াই শুধু নতুন লাইন যোগ করলেই চলে; @supports লাগে যখন নতুন কৌশল পুরোনো কৌশলকে বদলে দেয়।

৯ · AI-এর যুগে — “নতুন CSS” নিয়ে AI-এর ভুল ধরা

নতুন ফিচারেই AI সবচেয়ে বেশি ভুল করে, আর কারণটা সহজ: AI শিখেছে অতীতের লেখা থেকে। একটি ফিচার যখন খসড়া অবস্থায় ছিল, তখনকার ব্লগ-পোস্টে পুরোনো নাম আর পুরোনো syntax; সেই লেখা AI-এর স্মৃতিতে বেশি। আবার উল্টোটাও হয় — AI আত্মবিশ্বাসের সাথে বলে “সব ব্রাউজারে চলে”, অথচ ফিচারটি শুধু একটি ইঞ্জিনে।

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

• প্রতিটি নতুন property-র নাম MDN-এ খুঁজে দেখেছি — নামটি বর্তমান, খসড়ার পুরোনো নাম নয়
• Can I use বা MDN-এর Baseline-বাক্সে সাপোর্ট দেখেছি; AI-এর “সব ব্রাউজারে চলে” দাবি নিজে মিলিয়েছি
• অন্তত দুটি ভিন্ন ইঞ্জিনে খুলেছি (যেমন Edge/Chrome আর Firefox) — fallback সত্যিই কাজ করে
• DevTools-এর Rendering প্যানেলে prefers-reduced-motion: reduce নকল করে দেখেছি — অ্যানিমেশন থামে
• শুধু কীবোর্ড দিয়ে tooltip/dropdown খোলা-বন্ধ করেছি, আর Lighthouse ও validator.w3.org-এ কোনো বড় সমস্যা নেই