फ़ंक्शन

सीएसएस पॉडकास्ट - 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() फ़ंक्शन, एक string यूआरएल लेता है. इसका इस्तेमाल इमेज, फ़ॉन्ट, और कॉन्टेंट को लोड करने के लिए किया जाता है. अगर कोई मान्य यूआरएल पास नहीं किया गया है या वह संसाधन नहीं मिला जिस पर वह सही जानकारी देता है, तो 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 के बीच की ऊंचाई, सबसे ज़्यादा वैल्यू होनी चाहिए —जो व्यूपोर्ट की ऊंचाई का 20% है—और 20rem.

क्लैंप()

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() फ़ंक्शन है, जो किसी एलिमेंट को उसके सेंटर ऐक्सिस पर घुमा देगा. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए 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. Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए translate3d इसकी मदद से, एक फ़ंक्शन में X, Y, और Z ट्रांसलेशन के बारे में बताया जा सकता है.

स्क्वीइंग

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

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

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

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

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

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

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

देखें कि आपको कितना समझ आया है

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