फ़ंक्शन

सीएसएस पॉडकास्ट - 020: फ़ंक्शन

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

दूसरी प्रोग्रामिंग भाषाओं की तरह, सीएसएस में भी कई पहले से मौजूद फ़ंक्शन हैं जिन्हें ज़रूरत पड़ने पर कभी भी ऐक्सेस किया जा सकता है.

हर सीएसएस फ़ंक्शन का एक खास मकसद होता है. इस लेसन में, आपको इनके बारे में बहुत ज़्यादा जानकारी दी जाएगी. इससे आपको बेहतर तरीके से समझने में मदद मिलेगी कि उन्हें कहां और कैसे इस्तेमाल करना है.

फ़ंक्शन क्या होता है?

फ़ंक्शन एक नामी, सेल्फ़-कंटेन्ड कोड का हिस्सा होता है, जो किसी खास टास्क को पूरा करता है. फ़ंक्शन को नाम दिया जाता है, ताकि आप उसे अपने कोड के अंदर कॉल कर सकें. साथ ही, फ़ंक्शन में डेटा पास कर सकें. इसे पासिंग आर्ग्युमेंट के तौर पर जाना जाता है.

बहुत से सीएसएस फ़ंक्शन प्योर फ़ंक्शन होते हैं. इसका मतलब है कि अगर एक जैसे आर्ग्युमेंट पास किए जाते हैं, तो उनसे हमेशा एक जैसा नतीजा मिलता है. इससे कोई फ़र्क़ नहीं पड़ता कि कोड के बाकी हिस्से में क्या हो रहा है. भाषा के दूसरे एलिमेंट की तरह, आपके सीएसएस में वैल्यू में बदलाव होने पर, ये फ़ंक्शन अक्सर फिर से गिनती करते हैं. जैसे, currentColor जैसी कैस्केड की गई वैल्यू.

सीएसएस में, अपने दिए गए फ़ंक्शन लिखने के बजाय सिर्फ़ दिए गए फ़ंक्शन का इस्तेमाल किया जा सकता है. फ़ंक्शन को कुछ कॉन्टेक्स्ट में एक-दूसरे के अंदर नेस्ट किया जा सकता है, जिससे उन्हें ज़्यादा विकल्प मिलता है. हम इस बारे में विस्तार से इस मॉड्यूल में आगे बताएंगे.

फ़ंक्शनल सिलेक्टर

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

आपने फ़ंक्शनल सिलेक्टर के बारे में pseudo-classes मॉड्यूल में किया, जिसमें :is() और :not() जैसे ज़्यादा जानकारी वाले फ़ंक्शन शामिल हैं. इन फ़ंक्शन में दिए गए आर्ग्युमेंट, सीएसएस सिलेक्टर हैं जिनका आकलन किया जाता है. अगर एलिमेंट से मैच किया जाता है, तो उन पर सीएसएस का बाकी नियम लागू होगा.

कस्टम प्रॉपर्टी और var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

कस्टम प्रॉपर्टी एक वैरिएबल है. इसकी मदद से, अपने सीएसएस कोड में वैल्यू को टोकन के तौर पर देखा जा सकता है. कस्टम प्रॉपर्टी पर भी कैस्केड का असर होता है. इसका मतलब है कि ज़रूरत के हिसाब से उनमें बदलाव किया जा सकता है या उन्हें फिर से तय किया जा सकता है. कस्टम प्रॉपर्टी के आगे दो डैश (--) लगाने चाहिए और ये केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) होते हैं.

var() फ़ंक्शन एक ज़रूरी आर्ग्युमेंट का इस्तेमाल करता है: वह कस्टम प्रॉपर्टी जिसे वैल्यू के तौर पर दिखाने की कोशिश की जा रही है. ऊपर दिए गए स्निपेट में, var() फ़ंक्शन को --base-color आर्ग्युमेंट के तौर पर पास किया गया है. अगर --base-color तय है, तो var() वैल्यू देगा.

.my-element {
    background: var(--base-color, hotpink);
}

var() फ़ंक्शन में, फ़ॉलबैक डिक्लेरेशन वैल्यू भी पास की जा सकती है. इसका मतलब है कि अगर --base-color नहीं मिलती है, तो पास की गई घोषणा का इस्तेमाल किया जाएगा जो इस सैंपल के केस में hotpink रंग है.

कोई वैल्यू दिखाने वाले फ़ंक्शन

var() फ़ंक्शन, उन सीएसएस फ़ंक्शन में से सिर्फ़ एक है जो वैल्यू दिखाता है. attr() और url() जैसे फ़ंक्शन, var() के जैसे ही स्ट्रक्चर का इस्तेमाल करते हैं. एक या उससे ज़्यादा आर्ग्युमेंट को पास किया जाता है और उनका इस्तेमाल सीएसएस के एलान के दाईं ओर किया जाता है.

a::after {
  content: attr(href);
}

यहां मौजूद attr() फ़ंक्शन, <a> एलिमेंट के href एट्रिब्यूट का कॉन्टेंट ले रहा है और उसे ::after स्यूडो एलिमेंट के content के तौर पर सेट कर रहा है. अगर <a> एलिमेंट के href एट्रिब्यूट की वैल्यू में बदलाव करना है, तो यह content एट्रिब्यूट में अपने-आप दिखने लगेगा.

.my-element {
    background-image: url('/path/to/image.jpg');
}

url() फ़ंक्शन एक स्ट्रिंग यूआरएल लेता है. इसका इस्तेमाल इमेज, फ़ॉन्ट, और कॉन्टेंट को लोड करने के लिए किया जाता है. अगर कोई मान्य यूआरएल पास नहीं होता या वह रिसॉर्स नहीं मिलता जिस पर यूआरएल ले जाता है, तो url() फ़ंक्शन से कुछ नहीं दिखेगा.

कलर फ़ंक्शन

आपने color मॉड्यूल में, कलर फ़ंक्शन के बारे में पूरी जानकारी दी है. अगर आपने अभी तक इसे नहीं पढ़ा है, तो हमारा सुझाव है कि इसे ज़रूर पढ़ें.

सीएसएस में कुछ कलर फ़ंक्शन ये हैं: rgb(), rgba(), hsl(), hsla(), hwb(), lab(), और lch(). इन सभी का फ़ॉर्मैट एक जैसा होता है, जहां कॉन्फ़िगरेशन के आर्ग्युमेंट पास किए जाते हैं और एक रंग वापस दिया जाता है.

गणितीय व्यंजक

कई अन्य प्रोग्रामिंग भाषाओं की तरह, सीएसएस भी कई तरह के कैलकुलेशन में मदद के लिए, गणित के काम के फ़ंक्शन उपलब्ध कराती है.

calc()

calc() फ़ंक्शन, अपने पैरामीटर के तौर पर सिर्फ़ एक मैथमैटिकल एक्सप्रेशन लेता है. गणित के इस व्यंजक के कई प्रकार हो सकते हैं, जैसे कि लंबाई, संख्या, कोण, और आवृत्ति. इकाइयां भी मिलाई जा सकती हैं.

.my-element {
    width: calc(100% - 2rem);
}

इस उदाहरण में, calc() फ़ंक्शन का इस्तेमाल, एलिमेंट की चौड़ाई को उसके मौजूदा पैरंट एलिमेंट के 100% जितना साइज़ करने के लिए किया गया है. इसके बाद, कैलकुलेट की गई वैल्यू से 2rem को हटाया जा रहा है.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

calc() फ़ंक्शन को किसी दूसरे calc() फ़ंक्शन में नेस्ट किया जा सकता है. एक्सप्रेशन के हिस्से के तौर पर, var() फ़ंक्शन में कस्टम प्रॉपर्टी भी पास की जा सकती हैं.

min() और max()

min() फ़ंक्शन, पास किए गए एक या उससे ज़्यादा आर्ग्युमेंट की सबसे छोटी वैल्यू दिखाता है. max() फ़ंक्शन इसका उलटा करता है: पास किए गए एक या उससे ज़्यादा आर्ग्युमेंट की सबसे बड़ी वैल्यू पाएं.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

इस उदाहरण में, चौड़ाई 20vw के बीच सबसे कम वैल्यू होनी चाहिए, जो व्यूपोर्ट की चौड़ाई और 30rem के बीच का 20% है. ऊंचाई, 20vh और 20rem के बीच की सबसे बड़ी वैल्यू होनी चाहिए. यह व्यूपोर्ट की ऊंचाई का 20% होनी चाहिए.

क्लैम्प()

clamp() फ़ंक्शन में तीन आर्ग्युमेंट होते हैं: कम से कम साइज़, सबसे सही साइज़, और ज़्यादा से ज़्यादा.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

इस उदाहरण में, व्यूपोर्ट की चौड़ाई के हिसाब से font-size तरल होगा. स्क्रीन ज़ूम करने में मदद करने के लिए, vw यूनिट को rem यूनिट में जोड़ा जाता है, क्योंकि ज़ूम लेवल चाहे जो भी हो, vw यूनिट का साइज़ एक जैसा ही होगा. रूट फ़ॉन्ट साइज़ के आधार पर rem यूनिट से गुणा करने पर, clamp() फ़ंक्शन मिलता है. इससे आपको मिलते-जुलते कैलकुलेशन पॉइंट मिलते हैं.

min(), max(), और clamp() फ़ंक्शन के बारे में ज़्यादा जानने के लिए, यह लेख पढ़ें.

आकार

clip-path, offset-path, और shape-outside सीएसएस प्रॉपर्टी, आपके बॉक्स को विज़ुअल तौर पर क्लिप करने के लिए आकार का इस्तेमाल करती हैं या कॉन्टेंट को एक जगह पर दिखाने के लिए आकार उपलब्ध कराती हैं.

इन दोनों प्रॉपर्टी के साथ शेप फ़ंक्शन इस्तेमाल किए जा सकते हैं. circle(), ellipse(), और inset() जैसे आसान आकार, इनका साइज़ तय करने के लिए कॉन्फ़िगरेशन आर्ग्युमेंट इस्तेमाल करते हैं. ज़्यादा मुश्किल आकार, जैसे कि polygon() अपनी पसंद के मुताबिक आकार बनाने के लिए, X और Y ऐक्सिस की वैल्यू के कॉमा से अलग किए गए जोड़े बनाते हैं.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

polygon() की तरह, path() फ़ंक्शन भी होता है, जो SVG फ़िल नियम को तर्क के तौर पर इस्तेमाल करता है. यह बहुत मुश्किल आकार बनाने की अनुमति देता है, जिन्हें Illustrator या Inkscape जैसे ग्राफ़िक टूल में बनाया जा सकता है और फिर उसे आपके सीएसएस में कॉपी किया जा सकता है.

रूपांतरण

आखिर में सीएसएस फ़ंक्शन के इस खास जानकारी में 'ट्रांसफ़ॉर्म फ़ंक्शन' के बारे में बताया गया है, जो तिरछा होता है, रीसाइज़ करता है, और यहां तक कि किसी एलिमेंट की गहराई भी बदलता है. transform प्रॉपर्टी के साथ, इन सभी फ़ंक्शन का इस्तेमाल किया जाता है.

घुमाव

आपके पास किसी एलिमेंट को घुमाने के लिए, rotate() फ़ंक्शन का इस्तेमाल करने का विकल्प है. यह फ़ंक्शन, एलिमेंट के बीच वाले ऐक्सिस पर घूमता है. इसके बजाय, किसी खास ऐक्सिस पर किसी एलिमेंट को घुमाने के लिए, rotateX(), rotateY(), और rotateZ() फ़ंक्शन का भी इस्तेमाल किया जा सकता है. रोटेशन का लेवल तय करने के लिए, डिग्री, मोड़, और रेडियन यूनिट पास की जा सकती हैं.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

rotate3d() फ़ंक्शन में चार आर्ग्युमेंट होते हैं.

पहले तीन आर्ग्युमेंट नंबर होते हैं, जो X, Y, और Z कोऑर्डिनेट के बारे में बताते हैं. चौथा तर्क वह घूर्णन है, जो अन्य घूर्णन फ़ंक्शन की तरह, डिग्री, कोण और मोड़ को स्वीकार करता है.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

स्केल

transform और scale() फ़ंक्शन की मदद से, किसी एलिमेंट की स्केलिंग को बदला जा सकता है. फ़ंक्शन, वैल्यू के तौर पर एक या दो संख्याओं को स्वीकार करता है. इनसे पॉज़िटिव या नेगेटिव स्केलिंग का पता चलता है. अगर आपने सिर्फ़ एक नंबर आर्ग्युमेंट तय किया है, तो X और Y ऐक्सिस पर एक ही स्केल किया जाएगा. साथ ही, X और Y के लिए शॉर्टहैंड की मदद से, दोनों ऐक्सिस को एक शॉर्टहैंड के तौर पर तय किया जाएगा. rotate() की तरह ही, इसके बजाय scaleX(), scaleY(), और scaleZ() किसी एलिमेंट को किसी खास ऐक्सिस पर स्केल करने के लिए इस्तेमाल किया जाता है.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

rotate फ़ंक्शन की तरह ही, एक scale3d() फ़ंक्शन भी होता है. यह scale() की तरह है, लेकिन इसमें तीन आर्ग्युमेंट की ज़रूरत होती है: X, Y, और Z स्केल फ़ैक्टर.

अनुवाद पाएं

translate() फ़ंक्शन, किसी एलिमेंट को तब मूव करता है, जब वह दस्तावेज़ के फ़्लो में अपनी पोज़िशन बनाए रखता है. ये आर्ग्युमेंट के तौर पर लंबाई और प्रतिशत की वैल्यू को स्वीकार करते हैं. अगर एक तर्क तय किया गया है, तो translate() फ़ंक्शन X ऐक्सिस के साथ किसी एलिमेंट का अनुवाद करता है. साथ ही, अगर दोनों तर्क दिए गए हैं, तो X और Y ऐक्सिस के साथ एलिमेंट का अनुवाद करता है.

.my-element {
  transform: translatex(40px) translatey(25px);
}

अन्य ट्रांसफ़ॉर्म फ़ंक्शन की तरह ही, किसी खास ऐक्सिस के लिए भी खास फ़ंक्शन का इस्तेमाल किया जा सकता है. इसके लिए, translateX, translateY, और translateZ का इस्तेमाल करें. आपके पास translate3d का इस्तेमाल करने का भी विकल्प है. इससे एक फ़ंक्शन में X, Y, और Z का अनुवाद किया जा सकता है.

तिरछा

skew() फ़ंक्शन का इस्तेमाल करके, किसी एलिमेंट का लुक बदला जा सकता है. इसके लिए, उन फ़ंक्शन का इस्तेमाल किया जाता है जो कोणों को आर्ग्युमेंट के तौर पर स्वीकार करते हैं. skew() फ़ंक्शन, translate() की तरह ही काम करता है. अगर सिर्फ़ एक आर्ग्युमेंट तय किया जाता है, तो सिर्फ़ X ऐक्सिस पर असर पड़ेगा. अगर दोनों ऐक्सिस पर तय किए जाते हैं, तो X और Y ऐक्सिस पर ही असर पड़ेगा. हर ऐक्सिस पर अलग-अलग असर डालने के लिए, skewX और skewY का भी इस्तेमाल किया जा सकता है.

.my-element {
  transform: skew(10deg);
}

रास्ते की जानकारी

आखिर में, उपयोगकर्ता और Z प्लेन के बीच की दूरी बदलने के लिए, perspective प्रॉपर्टी का इस्तेमाल किया जा सकता है. यह प्रॉपर्टी, प्रॉपर्टी के ट्रांसफ़ॉर्म फ़ैमिली का हिस्सा है. इससे दूरी का एहसास होता है और अपने डिज़ाइन में फ़ील्ड की गहराई बनाने के लिए इसका इस्तेमाल किया जा सकता है.

डेविड डेसांद्रो का यह उदाहरण उनके बहुत ही उपयोगी लेख में बताया गया है कि असल में 3D अनुभव बनाने के लिए, perspective-origin-x और perspective-origin-y प्रॉपर्टी के साथ इसका इस्तेमाल कैसे किया जा सकता है.

ऐनिमेशन फ़ंक्शन, ग्रेडिएंट और फ़िल्टर

सीएसएस में ऐसे फ़ंक्शन भी मिलते हैं जो एलिमेंट को ऐनिमेट करने, उन पर ग्रेड लागू करने, और उनके लुक में बदलाव करने के लिए ग्राफ़िकल फ़िल्टर का इस्तेमाल करने में आपकी मदद करते हैं. इस मॉड्यूल को जितना हो सके छोटा रखने के लिए, इसे लिंक किए गए मॉड्यूल में शामिल किया गया है. ये सभी फ़ंक्शन, इस मॉड्यूल में दिखाए गए फ़ंक्शन के जैसे ही स्ट्रक्चर का पालन करते हैं.

जांचें कि आपको कितना समझ आया

फ़ंक्शन के बारे में अपनी जानकारी की जांच करें