इमेज के मूल साइज़ के हिसाब से कैलकुलेट करें

calc-size() एक सीएसएस फ़ंक्शन है. इसका इस्तेमाल, auto, min-content, और fit-content जैसे इंट्रिन्सिक साइज़िंग कीवर्ड पर गणितीय ऑपरेशन करने के लिए किया जाता है. ज़रूरी: calc-size() का इस्तेमाल सिर्फ़ तब करें, जब आपको किसी कैलकुलेशन या शर्त के साथ, इंट्रिन्सिक साइज़ में बदलाव करना हो. कीवर्ड पर आधारित आसान ऐनिमेशन (जैसे, 0 से auto) के लिए, आपको interpolate-size: allow-keywords का इस्तेमाल करना होगा.

लागू करने के चरण

1. इंट्रिन्सिक बेस की पहचान करना: तय करें कि किस इंट्रिन्सिक कीवर्ड (auto, min-content वगैरह) को कैलकुलेशन का आधार बनाना चाहिए.
2. सीमाएं तय करना: दूसरे आर्ग्युमेंट में clamp(), min() या max() जैसे सीएसएस मैथ फ़ंक्शन का इस्तेमाल करें, ताकि इंट्रिन्सिक साइज़ पर डिज़ाइन की सीमाएं लागू की जा सकें.
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: यह सिर्फ़ तब मान्य होता है, जब calc-size() का इस्तेमाल flex-basis प्रॉपर्टी में किया जाता है.

खास आर्ग्युमेंट:

• any: यह एक सामान्य बेस है. इसका इस्तेमाल तब किया जाता है, जब इंट्रिन्सिक टाइप की जानकारी न हो या कैलकुलेशन को नेस्ट किया जा रहा हो.
• नेस्ट किया गया calc-size(): इससे कई चरणों में या शर्तों के आधार पर कैलकुलेशन की जा सकती है.
• <calc-sum>: कोई तय लंबाई, प्रतिशत या गणितीय एक्सप्रेशन (जैसे, 100px या 20%). जब किसी तय वैल्यू को आधार के तौर पर इस्तेमाल किया जाता है, तब भी size कीवर्ड उपलब्ध रहता है (लेकिन सिर्फ़ दूसरे आर्ग्युमेंट में) और उस आधार की रिज़ॉल्व की गई वैल्यू को दिखाता है.

ज़रूरी: पहले आर्ग्युमेंट (<calc-size-basis>) में size कीवर्ड मान्य नहीं है. यह एक लोकल वैरिएबल है, जो सिर्फ़ दूसरे आर्ग्युमेंट (<calc-sum>) में मौजूद बेस को रेफ़र करने के लिए मौजूद होता है.

कैलकुलेशन के लिए मान्य आर्ग्युमेंट (<calc-sum>)

दूसरा आर्ग्युमेंट, मैथमैटिकल एक्सप्रेशन होता है.

• आम तौर पर, यह बेसिस की वैल्यू को रेफ़र करने के लिए, size कीवर्ड का इस्तेमाल करता है.
• size कीवर्ड का इस्तेमाल करना ज़रूरी नहीं है. हालांकि, इसे शामिल न करने का मतलब है कि कैलकुलेशन की वैल्यू तय होगी और आधार को पूरी तरह से अनदेखा कर दिया जाएगा.
• इसमें स्टैंडर्ड मैथमैटिकल ऑपरेटर (+, -, *, /) शामिल किए जा सकते हैं.
• इसमें clamp(), min(), max(), और round() जैसे सीएसएस मैथ फ़ंक्शन शामिल हो सकते हैं.
• ज़रूरी: 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;
  }
}

इंट्रिन्सिक साइज़ पर पाबंदियां लागू करना

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)));
}

ज़रूरी बातें

• प्रतिशत से जुड़ी गड़बड़ियां: <calc-sum> में मौजूद प्रतिशत, कंटेनर के साइज़ के हिसाब से तय किए जाते हैं, न कि size कीवर्ड के हिसाब से. उदाहरण के लिए, calc-size(auto, size + 10%), एलिमेंट की auto चौड़ाई में पैरंट की चौड़ाई का 10% जोड़ता है. इससे अनचाहे नतीजे मिल सकते हैं या ओवरफ़्लो हो सकता है.
• कैलकुलेशन की ज़रूरी शर्त: ज़रूरी: आसान ऐनिमेशन (जैसे, 0 से auto) के लिए, calc-size() के बजाय interpolate-size: allow-keywords का इस्तेमाल करें. 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-आधारित मेज़रमेंट से बचें: एलिमेंट को मेज़र करने और उनके डाइमेंशन को मैन्युअल तरीके से ऐनिमेट करने के लिए, JavaScript का इस्तेमाल किया जा सकता है. हालांकि, अक्सर इसकी ज़रूरत नहीं होती और इससे लेआउट थ्रैशिंग हो सकती है. आधुनिक वेब ऐप्लिकेशन के लिए, नेटिव "इंस्टैंट जंप" पर भरोसा करना सबसे सही फ़ॉलबैक है.

ऐनिमेशन के लिए, फ़ॉलबैक अनुभव फ़ाइनल साइज़ पर तुरंत जंप करना होगा. सीएसएस या JavaScript में इस सुविधा की उपलब्धता का पता लगाने के लिए:

/* 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
}