इन सीएसएस फ़ंक्शन का इस्तेमाल करके, एलिमेंट के साइज़ को कंट्रोल करने, सही स्पेस बनाए रखने, और फ़्लूइड टाइपोग्राफ़ी लागू करने का तरीका जानें.
रिस्पॉन्सिव डिज़ाइन के बारीकियों के साथ-साथ, लेखकों को ज़्यादा कंट्रोल देने के लिए सीएसएस को लगातार बेहतर बनाया जा रहा है. min()
,
max()
, और
clamp()
फ़ंक्शन, अब सभी मॉडर्न ब्राउज़र में काम करते हैं. ये वेबसाइटों और ऐप्लिकेशन को ज़्यादा डाइनैमिक और रिस्पॉन्सिव बनाने के लिए, सबसे नए टूल हैं. इन फ़ंक्शन का इस्तेमाल, एलिमेंट का साइज़ और साइज़ बदलने को कंट्रोल किया जा सकता है. साथ ही, एलिमेंट के बीच स्पेस बनाए रखने, और सुविधाजनक और फ़्लूइड टाइपोग्राफ़ी बनाने का काम भी किया जा सकता है.
सीएसएस की वैल्यू और यूनिट लेवल 4
calc()
,min()
,max()
, औरclamp()
के गणितीय फ़ंक्शन, जोड़ (+), घटाव (-), गुणा (*), और भाग (/) वाले गणितीय व्यंजकों को कॉम्पोनेंट वैल्यू के रूप में इस्तेमाल करने की अनुमति देते हैं
ब्राउज़र समर्थन
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)
की तरह) इस्तेमाल किया जा सकता है.
यहां, इन फ़ंक्शन को इस्तेमाल करने के कुछ उदाहरण दिए गए हैं.
बिलकुल सही चौड़ाई
रॉबर्ट ब्रिंगहर्स्ट के लिखे The Elements of Typographic अगर स्टाइल के मुताबिक, "45 से 75 वर्णों में से किसी को भी एक कॉलम वाले पेज के लिए ऐसी लाइन माना जाता है जो टेक्स्ट साइज़ में सेरिफ़ टेक्स्ट वाले पेज पर सेट की गई हो."
यह पक्का करने के लिए कि आपके टेक्स्ट ब्लॉक 45 से 75 वर्णों के बीच रहें, clamp()
और ch
(0-चौड़ाई वर्ण ऐडवांस) यूनिट का इस्तेमाल करें:
p {
width: clamp(45ch, 50%, 75ch);
}
इससे ब्राउज़र को पैराग्राफ़ की चौड़ाई तय करने में मदद मिलती है. यह डिफ़ॉल्ट रूप से चौड़ाई को
50% पर सेट करता है. अगर 45ch
से 50% छोटा है, तो यह चौड़ाई के तौर पर 45ch
का इस्तेमाल करता है. साथ ही, अगर 75ch
से 50% ज़्यादा चौड़ाई वाला है, तो यह 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 से मिली कवर इमेज.