एक अच्छा सीएसएस लेआउट बनाने के लिए, वेब ऐप्लिकेशन में रखी जाने वाली सभी चीज़ों को साइज़ असाइन करना शुरू किया जाता है. एक सुविधा जिसके लिए बहुत अनुरोध किया जाता था, वह हमेशा से यह सुविधा होती है कि अलग-अलग साइज़ के यूनिट के हिसाब से साइज़ तय करने की सुविधा मिलती है. उदाहरण के लिए, एक जगह का 50% हिस्सा और एक तय जगह बुक करना एक अच्छा तरीका है, जैसे कि 10px. और आप अभी calc() प्रॉपर्टी का इस्तेमाल करके ऐसा कर सकते हैं. इस सुविधा का इस्तेमाल हर उस जगह किया जा सकता है जहां लंबाई या संख्या का इस्तेमाल किया गया हो, ताकि आप इसका इस्तेमाल चीज़ों की जगह करने के लिए या rgb() रंग की वैल्यू में भी कर सकें. ऐसा इसलिए, ताकि स्टाइल शीट में इसके कई बेहतरीन इस्तेमाल किए जा सकें.
calc() से क्या किया जा सकता है?
calc() प्रॉपर्टी का इस्तेमाल, आपकी स्टाइलशीट में मौजूद सीएसएस की लंबाई या संख्या वाली किसी भी जगह पर किया जा सकता है.
इसमें लेआउट को ज़्यादा लचीला बनाने के लिए आपको दो मुख्य सुविधाएं मिलती हैं:
- प्रतिशत और ऐब्सलूट वैल्यू को मिलाना.
- प्रॉडक्ट के साइज़ में बदलाव करने की इकाइयां.
प्रतिशत को निरपेक्ष इकाइयों के साथ मिलाना
आइए, प्रतिशत को निरपेक्ष इकाइयों के साथ मिलाने का उदाहरण देखते हैं. मान लें कि हम उपलब्ध इलाके के 50% हिस्से को किसी तय संख्या से कम पिक्सल असाइन करना चाहते हैं. इसके बाद, हम इसे इस तरह लिख सकते हैं:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
अगर इसकी बैकग्राउंड का रंग हरा हो, तो यह ऐसा दिखेगा:
और अगर आपने पैरंट साइज़ को छोटा कर दिया है, तो यह ऐसा दिखेगा:
यहां सबसे अच्छी बात यह है कि हमें हमेशा यह पता होता है कि कॉन्टेंट का दायां किनारा 100 पिक्सल होगा, जो शामिल जगह के बीच में बाईं ओर होगा. इस तरह अलग-अलग वैल्यू टाइप को मिलाने की सुविधा से, आपका वेब ऐप्लिकेशन अलग-अलग साइज़ के डिवाइसों पर लेआउट मैनेज कर सकता है. इन डिवाइसों पर पहले से कहीं ज़्यादा कंट्रोल होता है.
मिक्सिंग यूनिट
एक और अच्छी बात यह है कि नतीजों का साइज़ पाने के लिए, अलग-अलग माप के साथ इकाइयों को जोड़ा जाए. उदाहरण के लिए, 'em' और 'px' इकाइयों को मिक्स करके, मौजूदा फ़ॉन्ट साइज़ के हिसाब से साइज़ सेट किए जा सकते हैं.
#bar {
height: calc(10em + 3px);
}
वैल्यू को आपस में जोड़ने के कुछ बेहतरीन उदाहरण यहां और यहां देखे जा सकते हैं.
इसे आज़माएं
calc() के साथ, +, -, *, और / का इस्तेमाल करके वैल्यू को जोड़ा जा सकता है, घटाया जा सकता है, गुणा किया जा सकता है, और भाग दिया जा सकता है. ऐसा करने से, कई तरह की संभावनाएं मिल सकती हैं. calc() का इस्तेमाल ऐसी किसी भी जगह किया जा सकता है जहां सीएसएस की लंबाई या संख्या का इस्तेमाल किया जा सकता है. हम ऐंगल और फ़्रीक्वेंसी प्रॉपर्टी के लिए, जल्द ही calc() जोड़ने पर काम कर रहे हैं. लंबाई के लिए calc() प्रॉपर्टी अब Chrome 19 (डेव चैनल बिल्ड) में -webkit-calc प्रॉपर्टी का इस्तेमाल करके उपलब्ध है, जबकि Firefox में -moz-calc प्रॉपर्टी का इस्तेमाल करके वर्शन 8 में और Internet Explorer में वर्शन 9 से शुरू नहीं हुआ है. नीचे टिप्पणी करके हमें अपने विचार बताएं.