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

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

Una Kravets

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

गणित फ़ंक्शन, 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() का भी इस्तेमाल किया जा सकता है. यह उदाहरण यहां से लिया गया है सीएसएस ट्रिक, जहां रीडर 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() अहमद शेडीद की खास जानकारी

@yer_a_wizard से इमेज का कवर वर्शन चालू करें अनस्प्लैश.