फ़ंक्शन

The CSS Podcast - 020: फ़ंक्शन

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

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

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

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

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

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

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

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

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

आपने स्यूडो-क्लास मॉड्यूल में फ़ंक्शनल सेलेक्टर के बारे में जाना है. इसमें :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() फ़ंक्शन, वैल्यू दिखाने वाले CSS फ़ंक्शन में से एक है. 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() फ़ंक्शन से कुछ भी नहीं मिलेगा.

कलर फ़ंक्शन

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

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

मैथमैटिकल एक्सप्रेशन

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

calc()

Browser Support

• 26
• 12
• 16
• 7

Source

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()

Browser Support

• 79
• 79
• 75
• 11.1

Source

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

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

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

ध्यान दें: हम साइज़ यूनिट मॉड्यूल में vw और vh जैसी यूनिट शामिल करते हैं.

clamp()

Browser Support

• 79
• 79
• 75
• 13.1

Source

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 जैसे ग्राफ़िक टूल में काफ़ी जटिल आकार बनाए जा सकते हैं. इसके बाद, उन्हें अपनी सीएसएस में कॉपी किया जा सकता है.

रूपांतरण

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

घुमाव

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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

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

rotate3d() फ़ंक्शन में चार आर्ग्युमेंट इस्तेमाल किए जाते हैं.

Browser Support

• 12
• 12
• 10
• 4

Source

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

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

स्केल

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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 स्केल फ़ैक्टर.

अनुवाद करें

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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

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

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

Skewing

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

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

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

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

Browser Support

• 36
• 12
• 16
• 9

Source

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

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

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

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

देखें कि आपको क्या समझ आया

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

सीएसएस फ़ंक्शन की पहचान किन वर्णों से की जा सकती है?

[]

ये वर्ण, JavaScript में ऐरे के लिए होते हैं.

{}

ये वर्ण, सीएसएस में नियमों को रैप करते हैं.

()

फ़ंक्शन, आर्ग्युमेंट को रैप करने के लिए इन वर्णों का इस्तेमाल करते हैं!

::

ये वर्ण, सीएसएस में सूडो-एलिमेंट के लिए होते हैं.

:

ये वर्ण, सीएसएस में सूडो-क्लास के लिए होते हैं.

क्या सीएसएस में गणित के फ़ंक्शन पहले से मौजूद हैं?

सही

इनमें से कई सुविधाएं पहले से मौजूद हैं और स्पेसिफ़िकेशन और ब्राउज़र में और भी सुविधाएं जोड़ी जा रही हैं!

गलत

फिर से कोशिश करें!

calc() फ़ंक्शन को किसी दूसरे calc() फ़ंक्शन के अंदर रखा जा सकता है, जैसे कि font-size: calc(10px + calc(5px * 3));

सही

🎉

गलत

फिर से कोशिश करें!

इनमें से कौनसे CSS शेप फ़ंक्शन हैं?

ellipse()

🎉

square()

फिर से कोशिश करें!

circle()

🎉

rect()

फिर से कोशिश करें!

inset()

🎉

polygon()

🎉