আসল সাইজ দিয়ে গণনা করুন

calc-size() হল একটি CSS ফাংশন যা auto, min-content এবং fit-content-এর মতো অন্তর্নিহিত সাইজিং কীওয়ার্ডে গাণিতিক অপারেশন সম্পাদন করে। বাধ্যতামূলক: শুধুমাত্র তখনই calc-size() ব্যবহার করুন যখন আপনাকে কোনও গণনা বা সীমাবদ্ধতার সাথে অন্তর্নিহিত সাইজ পরিবর্তন করতে হবে; সাধারণ কীওয়ার্ড-ভিত্তিক অ্যানিমেশনের জন্য (যেমন, 0 থেকে auto), আপনাকে অবশ্যই interpolate-size: allow-keywords ব্যবহার করতে হবে।

প্রয়োগ করার বিভিন্ন ধাপ

1. অন্তর্নিহিত ভিত্তি শনাক্ত করা: কোন অন্তর্নিহিত কীওয়ার্ড (auto, min-content ইত্যাদি) আপনার গণনার ভিত্তি হওয়া উচিত তা নির্ধারণ করুন।
2. সীমাবদ্ধতা নির্ধারণ করা: অন্তর্নিহিত সাইজের উপর ডিজাইনের সীমাবদ্ধতা প্রয়োগ করতে দ্বিতীয় আর্গুমেন্টের মধ্যে clamp(), min() বা max()-এর মতো CSS ম্যাথ ফাংশন ব্যবহার করুন।
3. বাধ্যতামূলক: একটি ফলব্যাক প্রদান করুন: অসমর্থিত ব্রাউজারে লেআউটটি যাতে কাজ করে তা নিশ্চিত করতে, calc-size() ব্যবহার করে প্রপার্টির ঠিক আগে সর্বদা একটি স্ট্যান্ডার্ড সাইজিং কীওয়ার্ড বা দৈর্ঘ্য ঘোষণা করুন।
4. লজিক্যাল প্রপার্টি প্রয়োগ করুন: inline-size বা block-size-এর মতো লজিক্যাল প্রপার্টি ডিফল্ট হিসেবে ব্যবহার করুন যাতে গণনা করার সময় ডকুমেন্টের রাইটিং মোড বজায় থাকে।
5. ঐচ্ছিক: প্রোগ্রেসিভ এনহ্যান্সমেন্ট: জটিল লেআউট লজিক বা অ্যানিমেশনকে @supports (inline-size: calc-size(auto, size + 0px)) ব্লকে র‍্যাপ করুন যাতে উন্নত ফিচার শুধুমাত্র উপযুক্ত ব্রাউজারে ডেলিভার করা যায়।

প্রাথমিক সিনট্যাক্স

/* calc-size(<calc-size-basis>, <calc-sum>) — mathematical operations on intrinsic sizing keywords */
.element {
  /* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
  inline-size: min-content;
  
  /* DO: Use calc-size to modify an intrinsic basis with a calculation or function */
  inline-size: calc-size(min-content, size + 2rem);
}

সঠিক বেসিস আর্গুমেন্ট (<calc-size-basis>)

প্রথম আর্গুমেন্টটি গণনার জন্য "বেস" সাইজ নির্ধারণ করে।

স্ট্যান্ডার্ড কীওয়ার্ড:

• auto: এলিমেন্টের জন্য ডিফল্ট সাইজ।
• min-content: ওভারফ্লো না করে এলিমেন্টটি সবচেয়ে ছোট যে সাইজ নিতে পারে।
• max-content: একটি লাইনে সব কন্টেন্ট ফিট করার জন্য এলিমেন্টের যে সাইজ প্রয়োজন।
• fit-content: clamp(min-content, auto, max-content)-এর সমতুল্য।
• content: flex-basis প্রপার্টির মধ্যে calc-size() ব্যবহার করা হলে তবেই এটি সঠিক।

বিশেষ আর্গুমেন্ট:

• any: নির্দিষ্ট অন্তর্নিহিত ধরন অজানা থাকলে বা নেস্টিং গণনা করার সময় ব্যবহৃত একটি জেনেরিক ভিত্তি।
• নেস্টেড calc-size(): মাল্টি-স্টেপ বা শর্তসাপেক্ষ গণনা করার অনুমতি দেয়।
• <calc-sum>: একটি নির্দিষ্ট দৈর্ঘ্য, শতাংশ বা গাণিতিক এক্সপ্রেশন (যেমন, 100px বা 20%)। যখন একটি নির্দিষ্ট মান ভিত্তি হিসাবে ব্যবহার করা হয়, তখন size কীওয়ার্ড এখনও উপলভ্য থাকে (তবে শুধুমাত্র দ্বিতীয় আর্গুমেন্টের মধ্যে) এবং সেই ভিত্তির সমাধান করা মানকে উপস্থাপন করে।

বাধ্যতামূলক: প্রথম আর্গুমেন্টের (<calc-size-basis>) মধ্যে size কীওয়ার্ড সঠিক নয়। এটি একটি লোকাল ভেরিয়েবল যা শুধুমাত্র দ্বিতীয় আর্গুমেন্ট (<calc-sum>) থেকে বেসিসকে রেফার করার জন্য বিদ্যমান।

সঠিক ক্যালকুলেশন আর্গুমেন্ট (<calc-sum>)

দ্বিতীয় আর্গুমেন্ট হল গাণিতিক রাশি।

• এটি সাধারণত বেসিসের ভ্যালু উল্লেখ করতে size কীওয়ার্ড ব্যবহার করে।
• size কীওয়ার্ডটি প্রযুক্তিগতভাবে ঐচ্ছিক হলেও, এটি বাদ দেওয়ার অর্থ হল, ভিত্তি সম্পূর্ণভাবে উপেক্ষা করে, গণনাটি একটি নির্দিষ্ট মানে সমাধান করা হবে।
• এতে স্ট্যান্ডার্ড ম্যাথ অপারেটর (+, -, *, /) অন্তর্ভুক্ত থাকতে পারে।
• এতে clamp(), min(), max() ও round()-এর মতো CSS ম্যাথ ফাংশন অন্তর্ভুক্ত থাকতে পারে।
• বাধ্যতামূলক: calc-size() প্রতিটি গণনায় শুধুমাত্র একটি একক অন্তর্নিহিত সাইজ ভ্যালু (ভিত্তি) অনুমোদন করে। আপনি একই calc-size() কলে ইন্ট্রিনসিক সাইজিং কীওয়ার্ড মিক্স করতে পারবেন না।

ব্যবহারিক ক্ষেত্র

আসল সাইজে এবং আসল সাইজ থেকে অ্যানিমেট করা

ডিফল্ট হিসেবে, ব্রাউজার কোনও দৈর্ঘ্য (যেমন, 0px) এবং একটি অন্তর্নিহিত কীওয়ার্ডের (যেমন, auto) মধ্যে ইন্টারপোলেট করতে পারে না। calc-size()-এ কীওয়ার্ডটি র‍্যাপ করলে এটি একটি ইন্টারপোলেট করা যায় এমন ভ্যালু হয়ে যায়।

অ্যানিমেশনের জন্য সঠিক টুল বেছে নেওয়া

• বাধ্যতামূলক: interpolate-size: allow-keywords ব্যবহার করুন: কোনও গাণিতিক পরিবর্তন ছাড়াই অন্তর্নিহিত সাইজ (যেমন, height: 0 থেকে height: auto) থেকে বা তাতে সহজ অ্যানিমেশনের জন্য। সহজ কীওয়ার্ড ইন্টারপোলেশনের জন্য এটিই হল প্রয়োজনীয় পদ্ধতি এবং আদর্শগতভাবে :root-এর মাধ্যমে বিশ্বব্যাপী প্রয়োগ করা উচিত।

  :root {
    /* Best practice: Enable keyword interpolation globally */
    interpolate-size: allow-keywords;
  }
  
  .item {
    height: 0;
    transition: height 0.3s ease;
  }
  
  .item.open {
    /* Simple interpolation from 0 to auto now works without calc-size() */
    height: auto;
  }
  

• calc-size() ব্যবহার করুন: শুধুমাত্র যখন আপনাকে ট্রানজিশনের সময় একটি অন্তর্নিহিত সাইজে গাণিতিক গণনা করতে হবে (যেমন, প্যাডিং যোগ করা বা সাইজ ক্ল্যাম্প করা)।

.accordion-content {
  display: block;
  overflow: hidden;
  /* MANDATORY: Fallback value for closed state */
  block-size: 0;
  transition: block-size 0.3s ease-out;
}

.accordion-content.open {
  /* MANDATORY: Fallback value for open state */
  block-size: auto;

  /* 
    DO: Use calc-size(auto, ...) to enable animation from 0 to the element's 
    intrinsic size while doing a calculation (in this case, adding a space of 2rem).
  */
  block-size: calc-size(auto, size + 2rem);
}

বাধ্যতামূলক: দুটি অন্তর্নিহিত সাইজিং কীওয়ার্ডের মধ্যে ইন্টারপোলেশন সরাসরি সম্ভব নয়। ট্রানজিশনের একটি প্রান্ত অবশ্যই দৈর্ঘ্য বা শতাংশ হতে হবে।

ব্যবহারকারীর মোশন সংক্রান্ত পছন্দকে সম্মান করা

যেসব অ্যানিমেশন বড় লে-আউট এলাকার সাইজ পরিবর্তন করে, সেগুলি ভেস্টিবুলার ডিসঅর্ডার আছে এমন ব্যবহারকারীদের জন্য বিশেষভাবে বিঘ্নজনক হতে পারে। বাধ্যতামূলক: অপ্রয়োজনীয় অ্যানিমেশন সহজ বা ছোট করতে prefers-reduced-motion মিডিয়া কোয়েরি ব্যবহার করে সবসময় ব্যবহারকারীর মোশন সংক্রান্ত পছন্দকে সম্মান করুন। সাধারণ স্ট্র্যাটেজির মধ্যে রয়েছে মোশন সম্পূর্ণভাবে বন্ধ করা, সময়সীমা কমানো বা লেআউট শিফটের পরিবর্তে সূক্ষ্ম অস্বচ্ছতা ট্রানজিশন ব্যবহার করা।

.accordion-content {
  opacity: 0;
  transition: block-size 0.3s ease, opacity 0.3s ease;
}

.accordion-content.open {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-content {
    /* 
       EXAMPLE: Replacing disruptive layout animations with a subtle fade-in.
       Setting the block-size instantly and transitioning opacity 
       provides a clear state change without large-scale motion.
    */
    transition: opacity 1.5s ease;
  }

  .accordion-content.open {
    /* Jump the size instantly */
    block-size: auto;
  }
}

আসল সাইজে সীমাবদ্ধতা প্রয়োগ করা হচ্ছে

কোনও এলিমেন্টের অন্তর্নিহিত সাইজ যাতে ডিজাইন বাউন্ডারির মধ্যে থাকে তা নিশ্চিত করতে, আপনি যেকোনও CSS ম্যাথ ফাংশনের সাথে calc-size() ব্যবহার করতে পারেন—যেমন min(), max(), clamp() বা round()।

.dynamic-container {
  /* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
  inline-size: fit-content;

  /* 
    DO: Establish a dynamic size based on content, while:
    1. Enforcing boundaries using CSS math functions (min, clamp, etc.)
    2. Modifying the intrinsic size with fixed or relative offsets
  */
  inline-size: calc-size(fit-content, min(size + var(--extra-space), var(--max-allowed)));
}

Critical Considerations

• শতাংশ সংক্রান্ত সমস্যা: <calc-sum>-এর মধ্যে থাকা শতাংশ কন্টেনারের সাইজ অনুযায়ী সমাধান করা হয়, size কীওয়ার্ড অনুযায়ী নয়। যেমন, calc-size(auto, size + 10%) এলিমেন্টের auto প্রস্থে পেরেন্টের প্রস্থের ১০% যোগ করে, যার ফলে অপ্রত্যাশিত ফলাফল বা ওভারফ্লো হতে পারে।
• হিসেব সংক্রান্ত প্রয়োজনীয়তা: বাধ্যতামূলক: সহজ অ্যানিমেশনের জন্য calc-size()-এর পরিবর্তে interpolate-size: allow-keywords ব্যবহার করুন (যেমন, 0 থেকে auto)। calc-size() শুধুমাত্র তখনই ব্যবহার করা উচিত যখন লেআউটের জন্য অন্তর্নিহিত বেসে ডাইনামিক গাণিতিক অ্যাডজাস্টমেন্টের প্রয়োজন হয়।
• পারফর্ম্যান্স নোট: inline-size বা block-size-এর মতো অ্যানিমেটিং বক্স মডেল প্রপার্টি লেআউট রিক্যালকুলেশন ট্রিগার করে, যা ব্যয়বহুল হতে পারে। লেআউট-ক্রিটিক্যাল এলিমেন্টের জন্য প্রাথমিকভাবে calc-size() অ্যানিমেশন ব্যবহার করুন যেখানে নন-লেআউট বিকল্পগুলি যথেষ্ট নয়।

ফলব্যাক স্ট্র্যাটেজি

calc-size() এবং interpolate-size হল প্রোগ্রেসিভ এনহ্যান্সমেন্ট। যেসব ব্রাউজারে এগুলি কাজ করে না, সেখানে প্রপার্টি উপেক্ষা করা হবে এবং লেআউট কাজ করবে, তবে ইন্ট্রিনসিক কীওয়ার্ডের অ্যানিমেশন ট্রানজিশন করার পরিবর্তে জাম্প করবে। ফলব্যাক হিসেবে সবসময় স্ট্যান্ডার্ড কীওয়ার্ড বা দৈর্ঘ্য প্রদান করুন।

.element {
  /* Fallback for browsers that don't support calc-size() */
  inline-size: fit-content; 
  /* Modern browsers will override the fallback */
  inline-size: calc-size(fit-content, size + 2rem);
}

অ্যানিমেশন ও ট্রানজিশন ফলব্যাক

calc-size() বা interpolate-size-এর জন্য সাপোর্ট নেই এমন ব্রাউজারে, অন্তর্নিহিত সাইজিং কীওয়ার্ড সহ ট্রানজিশন ইন্টারপোলেট করতে ব্যর্থ হবে।

• গ্রেসফুল ডিগ্রেডেশন: ডিফল্ট ফলব্যাক হল বিভিন্ন অবস্থার মধ্যে "ইনস্ট্যান্ট জাম্প" (যেমন, 0 থেকে auto)। এটি প্রায়শই গ্রহণযোগ্য কারণ লেআউট ফাংশনাল থাকে।
• উন্নত অভিজ্ঞতা: জটিল লেআউট লজিক বা অতিরিক্ত স্টাইলিং প্রয়োগ করতে @supports ব্যবহার করুন যা শুধুমাত্র তখনই অর্থপূর্ণ হয় যখন স্মুথ ইন্ট্রিনসিক অ্যানিমেশন সম্ভব হয়।
• JS-ভিত্তিক পরিমাপ এড়িয়ে চলুন: আপনি এলিমেন্ট পরিমাপ করতে এবং ম্যানুয়ালি তাদের ডাইমেনশন অ্যানিমেট করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারলেও, এটি প্রায়শই অপ্রয়োজনীয় এবং এর ফলে লেআউট থ্র্যাশিং হতে পারে। আধুনিক ওয়েব অ্যাপ্লিকেশনের ক্ষেত্রে নেটিভ "ইনস্ট্যান্ট জাম্প" ব্যবহার করা হল সাজেস্ট করা ফলব্যাক।

অ্যানিমেশনের ক্ষেত্রে, ফলব্যাক অভিজ্ঞতা হবে সরাসরি চূড়ান্ত সাইজে জাম্প করা। CSS বা জাভাস্ক্রিপ্টে সাপোর্ট শনাক্ত করতে:

/* CSS Feature Detection */
@supports (inline-size: calc-size(auto, size + 0px)) {
  .element {
    /* Apply advanced logic only when supported */
  }
}

/* JavaScript Feature Detection */
if (CSS.supports('inline-size', 'calc-size(auto, size + 0px)')) {
  // Apply advanced sizing or animations
}