block-size: auto বা inline-size: max-content-এর মতো ডায়নামিক সাইজে এলিমেন্ট অ্যানিমেট করার জন্য ঐতিহাসিকভাবে জাভাস্ক্রিপ্ট বা ভঙ্গুর "max-height" হ্যাকের প্রয়োজন হয়। interpolate-size প্রপার্টি এবং calc-size() ফাংশন ব্রাউজারকে নির্দিষ্ট দৈর্ঘ্য এবং অন্তর্নিহিত সাইজিং কীওয়ার্ডের মধ্যে নেটিভভাবে ইন্টারপোলেট করার অনুমতি দেয়।
প্রয়োগ করার বিভিন্ন ধাপ
- কীওয়ার্ড ইন্টারপোলেশন চালু করুন: অন্তর্নিহিত কীওয়ার্ড ব্যবহার করে প্রপার্টির জন্য ট্রানজিশন চালু করতে পেরেন্ট এলিমেন্টে (সাধারণত
:root)interpolate-size: allow-keywordsপ্রয়োগ করুন। - ট্রানজিশন নির্ধারণ করুন: টার্গেট এলিমেন্টে সাইজ নির্ধারণকারী প্রপার্টির (যেমন,
block-size,inline-size) জন্য একটিtransitionসেট করুন। - ইন্ট্রিনসিক কীওয়ার্ড ব্যবহার করুন: ইন্টার্যাকশন চলাকালীন (যেমন,
:hoverবা স্টেট ক্লাস) সাইজিং প্রপার্টি পরিবর্তন করে কাজ করে এমন ইন্ট্রিনসিক কীওয়ার্ড—auto,min-content,max-content,fit-content, অথবা (ফ্লেক্স-বেসিসের জন্য)content—ব্যবহার করুন। - গণনা করা (ঐচ্ছিক): অন্তর্নিহিত সাইজের (যেমন,
auto + 2rem) উপর গণিত করার প্রয়োজন হলেcalc-size()ব্যবহার করুন।calc-size()বেসিস-অ্যাগনস্টিক গণনার জন্যanyকীওয়ার্ডও সমর্থন করে।
উদাহরণ: জেনেরিক এক্সপ্যানশন প্যাটার্ন
আপনি এই প্যাটার্নটি যেকোনও কন্টেনারে (যেমন "আরও দেখুন" বিভাগ বা নেভিগেশন মেনু) প্রয়োগ করতে পারেন যাতে সীমাবদ্ধ উচ্চতা এবং এলিমেন্টের স্বাভাবিক আকারের মধ্যে ট্রানজিশন করা যায়।
/* Opt-in globally for all children */
:root {
/* MANDATORY: Transitions to intrinsic keywords are disabled by default for compatibility */
interpolate-size: allow-keywords;
}
.expandable-container {
/* 1. Define a fixed initial size (or 0) and hide overflow */
block-size: 100px;
overflow: hidden;
/* 2. Transition the sizing property */
transition: block-size 0.4s ease-out;
}
.expandable-container.is-expanded {
/* 3. Smoothly animate to the intrinsic natural height */
block-size: auto;
}
উদাহরণ: হিসেব করা আসল ইনলাইন-সাইজ
.badge {
inline-size: 40px;
overflow: hidden;
white-space: nowrap;
transition: inline-size 0.3s ease;
}
.badge:hover {
/* calc-size(basis, calculation) */
/* 'size' refers to the evaluated basis (max-content in this case) */
inline-size: calc-size(max-content, size + 20px);
}
যেমন: ইন্ট্রিনসিক থেকে ফিক্সড সাইজে পরিবর্তন
আপনি বিপরীত দিকেও অ্যানিমেট করতে পারেন—স্বাভাবিক সাইজ থেকে শুরু করে নির্দিষ্ট দৈর্ঘ্য পর্যন্ত ছোট করা। "বাতিল করা যায়" এমন কম্পোনেন্টের ক্ষেত্রে এটি উপযোগী।
.collapsible-alert {
/* 1. Start with the natural content height */
block-size: auto;
overflow: hidden;
transition: block-size 0.5s ease-in-out, opacity 0.5s ease;
}
.collapsible-alert.is-dismissed {
/* 2. Smoothly collapse to zero */
block-size: 0;
opacity: 0;
pointer-events: none;
}
/* MANDATORY Copy-Paste Safety: Disable sizing animations for sensitive users */
@media (prefers-reduced-motion: reduce) {
.expandable-container,
.badge,
.collapsible-alert {
transition: none !important;
}
}
// MANDATORY Accessibility Synchronization: Ensure elements collapsed to zero dimensions are removed from the assistive technology tree, and sync aria-expanded states on triggers.
const alertElement = document.querySelector('.collapsible-alert');
alertElement.addEventListener('transitionend', (e) => {
if (e.propertyName === 'block-size' && alertElement.classList.contains('is-dismissed')) {
alertElement.hidden = true;
}
});
// Example trigger syncer
const triggerBtn = document.querySelector('.accordion-trigger');
triggerBtn?.addEventListener('click', () => {
const isExpanded = triggerBtn.getAttribute('aria-expanded') === 'true';
triggerBtn.setAttribute('aria-expanded', !isExpanded);
});
মূল বাধ্যবাধকতা
- কীওয়ার্ড-টু-কীওয়ার্ড সংক্রান্ত সীমাবদ্ধতা: আপনি সরাসরি দুটি আলাদা কীওয়ার্ডের মধ্যে অ্যানিমেশন করতে পারবেন না (যেমন,
min-contentথেকেmax-content)। ট্রানজিশনের একটি প্রান্ত অবশ্যই নির্দিষ্ট দৈর্ঘ্য বা শতাংশ হতে হবে (যেমন,0থেকেauto)। - Calc-size সিনট্যাক্স:
calc-size()-এর মধ্যে, আপনি একই এক্সপ্রেশনে বিভিন্ন অন্তর্নিহিত কীওয়ার্ড মেশাতে পারবেন না। প্রথম আর্গুমেন্ট (ভিত্তি)sizeকী উপস্থাপন করে তা নির্ধারণ করে। - অপ্ট-ইন করার প্রয়োজনীয়তা: ব্যাকওয়ার্ড কম্প্যাটিবিলিটি বজায় রাখার জন্য ইন্ট্রিনসিক কীওয়ার্ডে ট্রানজিশন ডিফল্ট হিসেবে বন্ধ করা থাকে (
numeric-only)। আপনাকে অবশ্যই এলিমেন্ট বা পূর্বসূরিতেinterpolate-size: allow-keywordsপ্রয়োগ করতে হবে।calc-size()প্রপার্টি প্রতি ওভাররাইড হিসেবে কাজ করে, যখনই এটি ব্যবহার করা হয় তখনই ইন্টারপোলেশন অটোমেটিক চালু করে।
ফলব্যাক স্ট্র্যাটেজি
interpolate-size ও calc-size() হল প্রোগ্রেসিভ এনহ্যান্সমেন্ট। যেসব ব্রাউজারে এই সুবিধা কাজ করে না, সেগুলি সরাসরি টার্গেট সাইজে পরিবর্তিত হবে।
- গ্রেসফুল ডিগ্রেডেশন: সাধারণ
block-size: autoট্রানজিশনের জন্য, স্ট্যান্ডার্ড ব্রাউজারগুলি তাৎক্ষণিকভাবে সাইজ টগল করবে, যা কার্যকরী হলেও কম পালিশ করা। - ম্যানুয়াল কীওয়ার্ড ফলব্যাক:
calc-size()ব্যবহার করার সময়, পুরনো ব্রাউজারের জন্য সবসময় স্ট্যান্ডার্ড কীওয়ার্ড ফলব্যাক প্রদান করুন, কারণ সেগুলি সম্পূর্ণcalc-size()ডিক্লারেশন বাতিল করে দেবে।
.card {
block-size: auto; /* Fallback for older browsers */
block-size: calc-size(auto, size); /* Modern browsers use this */
transition: block-size 0.3s ease;
}