सीएसएस लेआउट calc() की मदद से और बेहतर हो जाता है

अच्छा सीएसएस लेआउट बनाने के लिए, वेब ऐप्लिकेशन में मौजूद सभी चीज़ों के लिए साइज़ असाइन करना ज़रूरी है. साइज़ की अलग-अलग यूनिट का इस्तेमाल करके, साइज़ की जानकारी देने की सुविधा का अनुरोध हमेशा किया जाता रहा है. उदाहरण के लिए, किसी एलिमेंट के लिए 50% जगह और 10 पिक्सल की तय जगह को रिज़र्व करना अच्छा होगा. 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 के 8वें वर्शन से -moz-calc प्रॉपर्टी का इस्तेमाल करके और Internet Explorer के 9वें वर्शन से बिना प्रीफ़िक्स के उपलब्ध है. नीचे टिप्पणी करके हमें बताएं कि आपका क्या अनुभव रहा.