सीएसएस 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-चौड़ाई वर्ण अडवांस) यूनिट का इस्तेमाल करें:

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() का भी इस्तेमाल किया जा सकता है. यह उदाहरण CSS Tricks से लिया गया है. यहां पाठक Caluã de Lacerda Pataca ने यह आइडिया शेयर किया है: किसी एलिमेंट के लिए, स्क्रीन के बड़े साइज़ पर ज़्यादा पैडिंग रखें, लेकिन स्क्रीन के छोटे साइज़ पर कम से कम पैडिंग रखें. ऐसा करने के लिए, 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 स्पेसिफ़िकेशन
• इंटर-एलिमेंट की चौड़ाई के बारे में सीएसएस ट्रिक का लेख
• min(), max(), clamp() फ़ंक्शन के बारे में अहमद शादी की खास जानकारी

Unsplash पर @yer_a_wizard की दी गई कवर इमेज.