सीएसएस min(), max(), और clamp()

इन सीएसएस फ़ंक्शन का इस्तेमाल करके, एलिमेंट के साइज़ को कंट्रोल करने, सही स्पेसिंग बनाए रखने, और फ़्लूइड टाइपोग्राफ़ी लागू करने का तरीका जानें.

Una Kravets

रिस्पॉन्सिव डिज़ाइन को बेहतर बनाने के लिए, सीएसएस में लगातार बदलाव किए जा रहे हैं, ताकि लेखकों को ज़्यादा कंट्रोल मिल सके. min(), max(), और clamp() फ़ंक्शन, अब सभी मॉडर्न ब्राउज़र में काम करते हैं. ये वेबसाइटों और ऐप्लिकेशन को ज़्यादा डाइनैमिक और रिस्पॉन्सिव बनाने के लिए, सबसे नए टूल में से एक हैं. इन फ़ंक्शन का इस्तेमाल करके, एलिमेंट का साइज़ कंट्रोल किया जा सकता है और उसे बदला जा सकता है. साथ ही, एलिमेंट के बीच स्पेस को मैनेज किया जा सकता है. इसके अलावा, ज़रूरत के हिसाब से बदलने वाली और फ़्लूइड टाइपोग्राफ़ी बनाई जा सकती है.

गणित के फ़ंक्शन, calc(), min(), max(), और clamp() की मदद से, कॉम्पोनेंट की वैल्यू के तौर पर जोड़ (+), घटाव (-), गुणा (*), और भाग (/) वाले गणितीय एक्सप्रेशन इस्तेमाल किए जा सकते हैं

सीएसएस वैल्यू और यूनिट लेवल 4

ब्राउज़र समर्थन

min()

max()

clamp()

इस्तेमाल

किसी भी सीएसएस एक्सप्रेशन के दाईं ओर, min(), max(), और clamp() का इस्तेमाल किया जा सकता है. हालांकि, ऐसा सिर्फ़ तब करें, जब इनका इस्तेमाल करना सही हो. min() और max() के लिए, वैल्यू की एक आर्ग्युमेंट लिस्ट दी जाती है. इसके बाद, ब्राउज़र यह तय करता है कि कौनसी वैल्यू सबसे छोटी या सबसे बड़ी है. उदाहरण के लिए, width: min(1rem, 50%, 10vw) के मामले में, ब्राउज़र यह कैलकुलेट करता है कि इनमें से कौनसी रिलेटिव यूनिट सबसे छोटी है. इसके बाद, वह उस वैल्यू का इस्तेमाल एलिमेंट की चौड़ाई के लिए करता है.

max() फ़ंक्शन, ज़्यादा से ज़्यादा वैल्यू के लिए भी यही काम करता है.

clamp() का इस्तेमाल करने के लिए, तीन वैल्यू डालें: कम से कम वैल्यू, कैलकुलेट करने के लिए सबसे सही वैल्यू, और ज़्यादा से ज़्यादा वैल्यू.

इन फ़ंक्शन का इस्तेमाल वहां किया जा सकता है जहां <length>, <frequency>, <angle>, <time>, <percentage>, <number> या <integer> की अनुमति हो. इन्हें अलग से इस्तेमाल किया जा सकता है (जैसे कि font-size: max(0.5vw, 50%, 2rem) में), calc() के साथ इस्तेमाल किया जा सकता है (जैसे कि font-size: max(calc(0.5vw - 1em), 2rem) में) या कंपोज़ किया जा सकता है (जैसे कि font-size: max(min(0.5vw, 1em), 2rem) में).

इन फ़ंक्शन को इस्तेमाल करने के कुछ उदाहरण यहां दिए गए हैं.

सही चौड़ाई

रॉबर्ट ब्रिंगहर्स्ट की किताब, द एलिमेंट्स ऑफ़ टाइपोग्राफ़िक स्टाइल के मुताबिक, "एक कॉलम वाले पेज पर, सेरिफ़ टेक्स्ट फ़ेस में टेक्स्ट साइज़ के लिए, 45 से 75 वर्णों की लंबाई को संतोषजनक माना जाता है."

यह पक्का करने के लिए कि आपके टेक्स्ट ब्लॉक 45 से 75 वर्णों के बीच हों, clamp() और ch (0-width character advance) यूनिट का इस्तेमाल करें:

p {
  width: clamp(45ch, 50%, 75ch);
}

इससे ब्राउज़र, पैराग्राफ़ की चौड़ाई तय कर पाता है. यह डिफ़ॉल्ट रूप से चौड़ाई को 50% पर सेट करता है. अगर 50% की वैल्यू 45ch से कम है, तो यह चौड़ाई के तौर पर 45ch का इस्तेमाल करता है. अगर 50% की वैल्यू 75ch से ज़्यादा है, तो यह 75ch का इस्तेमाल करता है.

इसे सिर्फ़ min() या max() का इस्तेमाल करके भी अलग किया जा सकता है. अगर आपको एलिमेंट की चौड़ाई हमेशा 50% रखनी है और बड़ी स्क्रीन पर इसकी चौड़ाई 75ch से ज़्यादा नहीं करनी है, तो ज़्यादा से ज़्यादा साइज़ सेट करने के लिए width: min(75ch, 50%); का इस्तेमाल करें.

इसी तरह, max() फ़ंक्शन का इस्तेमाल करके, पढ़े जा सकने वाले टेक्स्ट के लिए कम से कम साइज़ सेट किया जा सकता है, जैसा कि width: max(45ch, 50%); में किया गया है. यहां ब्राउज़र, जो भी वैल्यू बड़ी होती है उसे चुनता है. इसका मतलब है कि एलिमेंट 45ch या उससे ज़्यादा चौड़ा होना चाहिए.

पैडिंग मैनेज करना

पैडिंग का कम से कम साइज़ सेट करने के लिए, max() का भी इस्तेमाल किया जा सकता है. यह उदाहरण सीएसएस ट्रिक्स से लिया गया है. इसमें पाठक कालुआ दे लासेर्दा पताका ने यह आइडिया शेयर किया है: किसी एलिमेंट को बड़ी स्क्रीन पर ज़्यादा पैडिंग दें, लेकिन छोटी स्क्रीन पर कम से कम पैडिंग रखें. इसके लिए, calc() या max() का इस्तेमाल करें. साथ ही, एलिमेंट के दोनों तरफ़ से कम से कम पैडिंग घटाएं: calc((100vw - var(--contentWidth)) / 2) या max(2rem, 50vw - var(--contentWidth) / 2). आपकी स्टाइल शीट में, यह कुछ ऐसा दिखना चाहिए:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

फ़्लूइड टाइपोग्राफ़ी

फ़्लूइड टाइपोग्राफ़ी को चालू करने के लिए, माइक रीथम्यूलर ने एक तकनीक को लोकप्रिय बनाया. इसमें clamp() फ़ंक्शन का इस्तेमाल करके, फ़ॉन्ट का कम से कम और ज़्यादा से ज़्यादा साइज़ सेट किया जाता है. साथ ही, इन साइज़ के बीच स्केलिंग की अनुमति दी जाती है.

clamp(), से पहले, फ़ॉन्ट स्केलिंग को डिज़ाइन करने के लिए, जटिल स्टाइल स्ट्रिंग की ज़रूरत होती थी. अब, ब्राउज़र को अपना काम करने दें. फ़ॉन्ट का कम से कम साइज़ (उदाहरण के लिए, टाइटल के लिए 1.5rem), ज़्यादा से ज़्यादा साइज़ (जैसे कि 3rem), और सही साइज़ (जैसे कि 5vw) सेट करें. अब आपके पास ऐसी टाइपोग्राफ़ी है जो पेज के व्यूपोर्ट की चौड़ाई के हिसाब से स्केल होती है. ऐसा तब तक होता है, जब तक कि यह कम से कम और ज़्यादा से ज़्यादा वैल्यू तक नहीं पहुंच जाती. इसके लिए, बहुत कम कोड का इस्तेमाल किया जाता है:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

ज़्यादा रिसॉर्स

• एमडीएन पर सीएसएस वैल्यू और यूनिट
• सीएसएस वैल्यू और यूनिट लेवल 4 स्पेसिफ़िकेशन
• इनर-एलिमेंट की चौड़ाई के बारे में CSS-Tricks का लेख
• अहमद शादीद की min(), max(), clamp() की खास जानकारी