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

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

Una Kravets

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

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

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

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

min()

ब्राउज़र सहायता

  • 79
  • 79
  • 75
  • 11.1

सोर्स

max()

ब्राउज़र सहायता

  • 79
  • 79
  • 75
  • 11.1

सोर्स

clamp()

ब्राउज़र सहायता

  • 79
  • 79
  • 75
  • 78 जीबी में से

सोर्स

इस्तेमाल का तरीका

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

min() फ़ंक्शन, इस कोडपेन डेमो में विकल्पों की सूची से, कम से कम वैल्यू चुनता है.

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

max() फ़ंक्शन, Codepen डेमो में मौजूद विकल्पों की सूची से कोई वैल्यू चुनता है.

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

इस कोडपेन डेमो में, 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) की तरह) इस्तेमाल किया जा सकता है.

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

बिलकुल सही चौड़ाई

रॉबर्ट ब्रिंगहर्स्ट के लिखे The Elements of Typographic अगर स्टाइल के मुताबिक, "45 से 75 वर्णों में से किसी को भी एक कॉलम वाले पेज के लिए ऐसी लाइन माना जाता है जो टेक्स्ट साइज़ में सेरिफ़ टेक्स्ट वाले पेज पर सेट की गई हो."

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

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

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

कम से कम और ज़्यादा से ज़्यादा चौड़ाई सेट करने के लिए, clamp() फ़ंक्शन का इस्तेमाल करें. Codepen पर डेमो देखें.

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

ज़्यादा से ज़्यादा चौड़ाई सेट करने के लिए, min() फ़ंक्शन का इस्तेमाल करें.

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

कम से कम चौड़ाई सेट करने के लिए, max() फ़ंक्शन का इस्तेमाल करें.

पैडिंग (जगह) मैनेज करें

पैडिंग (जगह) के कम से कम साइज़ को सेट करने के लिए, 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);
}
max() फ़ंक्शन का इस्तेमाल करके, किसी कॉम्पोनेंट के लिए कम से कम पैडिंग (जगह) सेट करें. Codepen पर डेमो देखें.

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

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

फ़्लूइड टाइपोग्राफ़ी बनाने के लिए, clamp() का इस्तेमाल करें. Codepen पर डेमो देखें.

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

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

कई और संसाधन

Unsplash पर @yer_a_wizard से मिली कवर इमेज.