CSS मैजिक को अनलॉक करना: @property और कस्टम प्रॉपर्टी टाइप डेफिनिशन में एक गहन गोता

CSS कस्टम प्रॉपर्टीज (जिन्हें CSS वेरिएबल्स के रूप में भी जाना जाता है) ने CSS लिखने और बनाए रखने के तरीके में क्रांति ला दी है। वे पुन: प्रयोज्यता, लचीलापन और रखरखाव प्रदान करते हैं, जिससे हमारी स्टाइलशीट अधिक गतिशील और प्रबंधनीय बनती है। हालांकि, हाल तक, कस्टम प्रॉपर्टीज में अपनी अपेक्षित डेटा प्रकारों को परिभाषित करने की क्षमता का अभाव था, जिससे उन्नत स्टाइलिंग और एनिमेशन के लिए उनकी क्षमता सीमित हो गई थी। @property नियम पेश किया गया है - एक गेम-चेंजर जो हमें अपनी कस्टम प्रॉपर्टीज के प्रकार, सिंटैक्स और प्रारंभिक मान को स्पष्ट रूप से परिभाषित करने की अनुमति देता है।

@property नियम क्या है?

@property नियम CSS Houdini API परिवार का हिस्सा है, जिसका उद्देश्य CSS इंजन के आंतरिक कार्यों को डेवलपर्स के लिए खोलना है। विशेष रूप से, @property कस्टम प्रॉपर्टीज और वैल्यूज API का हिस्सा है। यह आपको ब्राउज़र के साथ एक कस्टम प्रॉपर्टी पंजीकृत करने की अनुमति देता है, जिसमें इसके निर्दिष्ट किया गया है:

• नाम: कस्टम प्रॉपर्टी का नाम (जैसे, --my-color)।
• सिंटैक्स: प्रॉपर्टी का अपेक्षित डेटा प्रकार (जैसे, <color>, <number>, <length>)।
• इनहेरिट्स: क्या प्रॉपर्टी को अपने पैरेंट एलिमेंट से अपना मान इनहेरिट करना चाहिए (true या false)।
• इनिशियल-वैल्यू: यदि कोई अन्य मान निर्दिष्ट नहीं किया गया है तो प्रॉपर्टी का डिफ़ॉल्ट मान।

इन विशेषताओं को परिभाषित करके, आप कस्टम प्रॉपर्टीज का उपयोग कैसे किया जाता है और वे कैसे व्यवहार करते हैं, इस पर अधिक नियंत्रण प्राप्त करते हैं, विशेष रूप से एनिमेशन और संक्रमणों में।

@property का उपयोग क्यों करें? लाभ

@property का उपयोग करने से कई महत्वपूर्ण फायदे मिलते हैं:

1. टाइप सुरक्षा और सत्यापन

@property के बिना, CSS सभी कस्टम प्रॉपर्टीज को स्ट्रिंग्स के रूप में मानता है। जब आप उन्हें गणनाओं या एनिमेशन में उपयोग करने का प्रयास करते हैं जिनके लिए विशिष्ट डेटा प्रकारों की आवश्यकता होती है, तो यह अप्रत्याशित व्यवहार का कारण बन सकता है। उदाहरण के लिए, यदि आपका इरादा एक कस्टम प्रॉपर्टी को एक संख्या का प्रतिनिधित्व करने का है, लेकिन गलती से इसे एक स्ट्रिंग मान असाइन करते हैं, तो आपके एनिमेशन टूट सकते हैं या गलत परिणाम उत्पन्न कर सकते हैं।

@property कस्टम प्रॉपर्टी के अपेक्षित सिंटैक्स (डेटा प्रकार) को निर्दिष्ट करके इसे हल करता है। फिर ब्राउज़र असाइन किए गए मान को इस सिंटैक्स के विरुद्ध मान्य करेगा, यह सुनिश्चित करेगा कि यह अपेक्षित प्रकार के अनुरूप हो। यदि मान सिंटैक्स से मेल नहीं खाता है, तो ब्राउज़र प्रारंभिक मान (यदि प्रदान किया गया है) का उपयोग करेगा या प्रॉपर्टी को अमान्य मानेगा।

2. निर्बाध एनिमेशन और संक्रमण

@property की वास्तविक शक्ति एनिमेशन और संक्रमणों की बात आने पर चमकती है। इसके बिना, कस्टम प्रॉपर्टीज को एनिमेट करना मुश्किल हो सकता है क्योंकि ब्राउज़र को एक सामान्य स्ट्रिंग के विभिन्न मानों के बीच इंटरपोलेट करना नहीं पता होता है। वांछित प्रभाव प्राप्त करने के लिए आपको जावास्क्रिप्ट हैक्स का सहारा लेना पड़ सकता है या सीमित CSS सुविधाओं का उपयोग करना पड़ सकता है।

कस्टम प्रॉपर्टी के सिंटैक्स को परिभाषित करके, आप ब्राउज़र को एनिमेशन और संक्रमणों के दौरान इसके मानों के बीच इंटरपोलेट करने का तरीका बताते हैं। उदाहरण के लिए, यदि आप <color> सिंटैक्स के साथ एक कस्टम प्रॉपर्टी को परिभाषित करते हैं, तो ब्राउज़र जानता है कि उसे एक चिकने रंग ग्रेडिएंट का उपयोग करके रंगों के बीच इंटरपोलेट करना चाहिए। इसी तरह, यदि आप <number> सिंटैक्स के साथ एक प्रॉपर्टी को परिभाषित करते हैं, तो ब्राउज़र जानता है कि उसे एक रैखिक प्रगति का उपयोग करके संख्याओं के बीच इंटरपोलेट करना चाहिए।

3. बेहतर कोड पठनीयता और रखरखाव

@property आपके CSS कोड की पठनीयता और रखरखाव में सुधार करता है, यह स्पष्ट करके कि एक कस्टम प्रॉपर्टी का क्या डेटा प्रकार दर्शाने का इरादा है। यह अन्य डेवलपर्स (और आपके भविष्य के स्वयं) को प्रॉपर्टी के उद्देश्य को समझने और इसे कैसे उपयोग किया जाना चाहिए, इसमें मदद करता है।

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

4. बेहतर प्रदर्शन

कुछ मामलों में, @property का उपयोग करने से आपके CSS कोड का प्रदर्शन बेहतर हो सकता है। ब्राउज़र को आपके कस्टम प्रॉपर्टीज के अपेक्षित डेटा प्रकारों के बारे में अधिक जानकारी प्रदान करके, आप इसे रेंडरिंग प्रक्रिया को अनुकूलित करने की अनुमति देते हैं। इससे तेज़ एनिमेशन और संक्रमण हो सकते हैं, खासकर जटिल लेआउट पर।

@property का सिंटैक्स

@property नियम का उपयोग निम्नलिखित सिंटैक्स का उपयोग करके परिभाषित किया गया है:

            @property --property-name {
 syntax: <type>;
 inherits: true | false;
 initial-value: <value>;
}
            

              
                Copy
              
            
          

आइए इन घटकों में से प्रत्येक को तोड़ें:

• --property-name: यह आपके द्वारा परिभाषित की जा रही कस्टम प्रॉपर्टी का नाम है। इसे दो हाइफ़न (--) से शुरू होना चाहिए और इसमें कोई भी मान्य CSS आइडेंटिफ़ायर वर्ण हो सकते हैं। उदाहरण के लिए: --primary-color, --font-size, --spacing-unit।
• syntax: यह कस्टम प्रॉपर्टी के अपेक्षित डेटा प्रकार को निर्दिष्ट करता है। इसे CSS मान प्रकार डिस्क्रिप्टर का उपयोग करके परिभाषित किया गया है। कुछ सामान्य सिंटैक्स मानों में शामिल हैं:
  • <color>: एक रंग मान का प्रतिनिधित्व करता है (जैसे, #ffffff, rgb(255, 255, 255), hsl(0, 0%, 100%), white)।
  • <number>: एक संख्यात्मक मान का प्रतिनिधित्व करता है (जैसे, 1, 3.14, -42)।
  • <length>: एक लंबाई मान का प्रतिनिधित्व करता है (जैसे, 10px, 2em, 50vh, 1rem)।
  • <percentage>: एक प्रतिशत मान का प्रतिनिधित्व करता है (जैसे, 50%, 100%, 25.5%)।
  • <string>: एक स्ट्रिंग मान का प्रतिनिधित्व करता है (जैसे, "Hello", "World")।
  • <image>: एक छवि मान का प्रतिनिधित्व करता है (जैसे, url("image.jpg"), linear-gradient(...))।
  • <angle>: एक कोण मान का प्रतिनिधित्व करता है (जैसे, 45deg, 0.5rad, 1turn)।
  • *: किसी भी मान्य CSS मान का प्रतिनिधित्व करता है। सावधानी के साथ उपयोग करें, क्योंकि यह प्रकार की जाँच के उद्देश्य को विफल करता है।
  • कस्टम सिंटैक्स: आपको रेगुलर एक्सप्रेशन-जैसे पैटर्न का उपयोग करके जटिल सिंटैक्स को परिभाषित करने की अनुमति देता है।
• inherits: यह बूलियन मान निर्धारित करता है कि कस्टम प्रॉपर्टी को अपने पैरेंट एलिमेंट से अपना मान इनहेरिट करना चाहिए या नहीं। यदि true पर सेट किया गया है, तो प्रॉपर्टी इनहेरिट करेगी। यदि false पर सेट किया गया है, तो प्रॉपर्टी इनहेरिट नहीं करेगी और यदि तत्व पर स्पष्ट रूप से परिभाषित नहीं किया गया है तो उसका प्रारंभिक मान का उपयोग करेगी। डिफ़ॉल्ट मान false है।
• initial-value: यह कस्टम प्रॉपर्टी का डिफ़ॉल्ट मान निर्दिष्ट करता है। यदि प्रॉपर्टी को किसी तत्व पर स्पष्ट रूप से सेट नहीं किया गया है, तो यह इस मान का उपयोग करेगा। प्रारंभिक मान निर्दिष्ट सिंटैक्स के अनुसार एक मान्य मान होना चाहिए। यदि कोई प्रारंभिक मान प्रदान नहीं किया गया है और कोई अन्य मान सेट नहीं है, तो प्रॉपर्टी को अपने अनसेट मान के रूप में माना जाएगा।

@property के व्यावहारिक उदाहरण

आइए कुछ व्यावहारिक उदाहरण देखें कि आपके CSS कोड में @property का उपयोग कैसे करें।

उदाहरण 1: एक रंग को एनिमेट करना

इस उदाहरण में, हम --background-color नामक एक कस्टम प्रॉपर्टी बनाएंगे और इसे CSS संक्रमण का उपयोग करके एनिमेट करेंगे। हम यह सुनिश्चित करने के लिए सिंटैक्स को <color> के रूप में परिभाषित करेंगे कि ब्राउज़र रंगों के बीच सही ढंग से इंटरपोलेट करे।

            @property --background-color {
 syntax: <color>;
 inherits: false;
 initial-value: #ffffff; /* White */
}

.box {
 width: 200px;
 height: 200px;
 background-color: var(--background-color);
 transition: --background-color 0.5s ease-in-out;
}

.box:hover {
 --background-color: #007bff; /* Blue */
}
            

              
                Copy
              
            
          

इस कोड में:

• हमने <color> सिंटैक्स के साथ एक कस्टम प्रॉपर्टी --background-color परिभाषित की है, inherits को false पर सेट किया है, और initial-value को सफेद (#ffffff) पर सेट किया है।
• हमने var(--background-color) का उपयोग करके इस प्रॉपर्टी को .box एलिमेंट के background-color पर लागू किया है।
• हमने --background-color प्रॉपर्टी में एक ट्रांज़िशन जोड़ा है ताकि मान बदलने पर यह सुचारू रूप से एनिमेट हो।
• हमने होवर पर --background-color के मान को नीले (#007bff) में बदल दिया है, जिससे एक चिकना रंग संक्रमण प्रभाव पैदा होता है।

उदाहरण 2: एक संख्या को एनिमेट करना

इस उदाहरण में, हम --blur-radius नामक एक कस्टम प्रॉपर्टी बनाएंगे और इसे CSS ट्रांज़िशन का उपयोग करके एनिमेट करेंगे। हम यह सुनिश्चित करने के लिए सिंटैक्स को <length> के रूप में परिभाषित करेंगे कि ब्राउज़र लंबाई मानों के बीच सही ढंग से इंटरपोलेट करे। यह उदाहरण लंबाई के उपयोग के एक लोकप्रिय उपयोग के मामले को भी प्रदर्शित करता है: पिक्सेल मान। यह आसानी से अन्य इकाई प्रकारों में भी परिवर्तित हो सकता है। यह ध्यान रखना भी महत्वपूर्ण है कि प्रारंभिक मान को `0px` पर सेट करना महत्वपूर्ण है, क्योंकि ब्राउज़र को संक्रमणों को ठीक से करने के लिए एक आधार इकाई की आवश्यकता होती है।

            @property --blur-radius {
 syntax: <length>;
 inherits: false;
 initial-value: 0px;
}

.image {
 width: 300px;
 height: 200px;
 background-image: url("image.jpg");
 filter: blur(var(--blur-radius));
 transition: --blur-radius 0.3s ease-in-out;
}

.image:hover {
 --blur-radius: 5px;
}
            

              
                Copy
              
            
          

इस कोड में:

• हमने <length> सिंटैक्स के साथ एक कस्टम प्रॉपर्टी --blur-radius परिभाषित की है, inherits को false पर सेट किया है, और initial-value को 0px पर सेट किया है।
• हमने var(--blur-radius) का उपयोग करके इस प्रॉपर्टी को .image एलिमेंट के filter: blur() फ़ंक्शन पर लागू किया है।
• हमने --blur-radius प्रॉपर्टी में एक ट्रांज़िशन जोड़ा है ताकि मान बदलने पर यह सुचारू रूप से एनिमेट हो।
• हमने होवर पर --blur-radius के मान को 5px में बदल दिया है, जिससे एक चिकना धुंधला प्रभाव पैदा होता है।

उदाहरण 3: इनहेरिटेड प्रॉपर्टीज के साथ एक थीम्ड UI बनाना

इस उदाहरण में, हम इनहेरिटेड कस्टम प्रॉपर्टीज का उपयोग करके एक साधारण थीम्ड UI बनाएंगे। हम --theme-color नामक एक कस्टम प्रॉपर्टी परिभाषित करेंगे और इसे :root एलिमेंट पर सेट करेंगे। यह सभी चाइल्ड एलिमेंट को थीम कलर इनहेरिट करने की अनुमति देगा।

            @property --theme-color {
 syntax: <color>;
 inherits: true;
 initial-value: #4caf50; /* Green */
}

:root {
 --theme-color: #4caf50;
}

.button {
 background-color: var(--theme-color);
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}

.button:hover {
 --theme-color: #388e3c; /* Darker Green */
}
            

              
                Copy
              
            
          

इस कोड में:

• हमने <color> सिंटैक्स के साथ एक कस्टम प्रॉपर्टी --theme-color परिभाषित की है, inherits को true पर सेट किया है, और initial-value को हरे (#4caf50) पर सेट किया है।
• हमने :root एलिमेंट पर --theme-color का मान सेट किया है, जिससे यह दस्तावेज़ के सभी तत्वों के लिए उपलब्ध हो गया है।
• हमने इस प्रॉपर्टी का उपयोग .button एलिमेंट के background-color को सेट करने के लिए किया है।
• हमने होवर पर --theme-color के मान को एक गहरे हरे (#388e3c) में बदल दिया है, जिससे यह प्रदर्शित होता है कि UI के थीम को बदलने के लिए इनहेरिटेड प्रॉपर्टीज को आसानी से कैसे अपडेट किया जा सकता है।

उदाहरण 4: एक कस्टम सिंटैक्स को परिभाषित करना

syntax प्रॉपर्टी अधिक विशिष्ट पैटर्न को परिभाषित करने के लिए एक स्ट्रिंग भी स्वीकार कर सकती है, जो अधिक जटिल मानों को मान्य करने के लिए विशेष रूप से उपयोगी है। सिंटैक्स MDN (Mozilla Developer Network) पर प्रलेखित एक रेगुलर एक्सप्रेशन-जैसे सिस्टम का उपयोग करता है। यह उदाहरण पृष्ठभूमि स्थिति के लिए एक कस्टम सिंटैक्स को परिभाषित करने और उपयोग करने का तरीका दिखाता है जो `top`, `bottom`, `left`, और `right` कीवर्ड विकल्पों दोनों को मान्य मान के रूप में स्वीकार करता है।

            @property --background-position {
 syntax: "[ top | bottom | left | right ]{1,2}";
 inherits: false;
 initial-value: top left;
}

.container {
 width: 300px;
 height: 300px;
 background-image: url('image.jpg');
 background-position: var(--background-position);
}

/* Valid positions */
.container.top-right {
 --background-position: top right;
}

.container.bottom-left {
 --background-position: bottom left;
}

/* Invalid position (will fallback to initial-value) */
.container.invalid {
 --background-position: center;
}
            

              
                Copy
              
            
          

यहां, syntax को मान्य कीवर्ड के स्ट्रिंग प्रतिनिधित्व का उपयोग करके निर्दिष्ट किया गया है। `[ ]` नोटेशन विकल्पों का एक सेट परिभाषित करता है, `|` प्रतीक उन्हें अलग करता है, और `{1,2}` अनुमत मानों की संख्या को एक या दो कीवर्ड तक सीमित करता है। यदि `center` जैसा अमान्य मान उपयोग किया जाता है, तो ब्राउज़र `top left` के `initial-value` पर वापस आ जाएगा।

ब्राउज़र समर्थन

@property के लिए ब्राउज़र समर्थन आधुनिक ब्राउज़रों में आम तौर पर अच्छा है, जिसमें शामिल हैं:

• Chrome (संस्करण 64 और ऊपर)
• Edge (संस्करण 79 और ऊपर - Chromium पर आधारित)
• Firefox (संस्करण 72 और ऊपर)
• Safari (संस्करण 14.1 और ऊपर)

हालांकि, यह सुनिश्चित करने के लिए कि आप जिन सुविधाओं का उपयोग कर रहे हैं, वे आपके उपयोगकर्ताओं द्वारा उपयोग किए जाने वाले ब्राउज़रों में समर्थित हैं, Can I use... जैसी वेबसाइटों पर नवीनतम ब्राउज़र संगतता तालिकाओं की जांच करना हमेशा एक अच्छा विचार होता है।

पुराने ब्राउज़रों के लिए जो @property का समर्थन नहीं करते हैं, ब्राउज़र @property नियम को अनदेखा कर देगा और कस्टम प्रॉपर्टी को एक नियमित CSS वेरिएबल मानेगा। इसका मतलब है कि एनिमेशन और संक्रमण अपेक्षा के अनुसार काम नहीं कर सकते हैं, लेकिन कोड कार्यात्मक रहेगा।

@property का उपयोग करने के लिए सर्वोत्तम अभ्यास

@property का उपयोग करते समय ध्यान रखने योग्य कुछ सर्वोत्तम अभ्यास यहां दिए गए हैं:

• हमेशा सिंटैक्स को परिभाषित करें: टाइप सुरक्षा सुनिश्चित करने और निर्बाध एनिमेशन और संक्रमणों को सक्षम करने के लिए अपनी कस्टम प्रॉपर्टीज के syntax को हमेशा परिभाषित करना सुनिश्चित करें।
• एक प्रारंभिक मान सेट करें: डिफ़ॉल्ट मान प्रदान करने और अप्रत्याशित दृश्य गड़बड़ियों को रोकने के लिए एक initial-value प्रदान करें।
• वर्णनात्मक नामों का उपयोग करें: अपनी कस्टम प्रॉपर्टीज के लिए वर्णनात्मक नाम चुनें जो उनके उद्देश्य और डेटा प्रकार को स्पष्ट रूप से इंगित करते हैं। उदाहरण के लिए, --color के बजाय --button-background-color का उपयोग करें।
• इनहेरिटेंस पर विचार करें: तय करें कि आपकी कस्टम प्रॉपर्टीज को उनके पैरेंट एलिमेंट से इनहेरिट करना चाहिए या नहीं। UI में साझा की जाने वाली प्रॉपर्टीज, जैसे थीम रंग या फ़ॉन्ट आकार के लिए inherits: true का उपयोग करें।
• पूरी तरह से परीक्षण करें: यह सुनिश्चित करने के लिए कि यह अपेक्षा के अनुसार काम करता है, विभिन्न ब्राउज़रों में अपने कोड का परीक्षण करें। उन पुराने ब्राउज़रों के लिए फ़ॉलबैक तंत्र प्रदान करें जो @property का समर्थन नहीं करते हैं।
• अपनी कस्टम प्रॉपर्टीज का दस्तावेज़ीकरण करें: अपनी कस्टम प्रॉपर्टीज के उद्देश्य और उपयोग को समझाने के लिए अपने CSS कोड में टिप्पणियां जोड़ें। इससे अन्य डेवलपर्स (और आपके भविष्य के स्वयं) के लिए आपके कोड को समझना आसान हो जाएगा। Stylelint जैसे उपकरण इन सर्वोत्तम प्रथाओं को लागू करने के लिए भी कॉन्फ़िगर किए जा सकते हैं।

@property और CSS Houdini

जैसा कि पहले उल्लेख किया गया है, @property CSS Houdini API के संग्रह का हिस्सा है। CSS Houdini निम्न-स्तरीय API का एक संग्रह है जो CSS इंजन के आंतरिक कार्यों को डेवलपर्स के लिए खोलता है, जिससे उन्हें कस्टम सुविधाओं और व्यवहारों के साथ CSS का विस्तार करने की अनुमति मिलती है।

अन्य Houdini API में शामिल हैं:

• Paint API: आपको जावास्क्रिप्ट का उपयोग करके कस्टम बैकग्राउंड इमेज, बॉर्डर और मास्क को परिभाषित करने की अनुमति देता है।
• Animation Worklet API: आपको जावास्क्रिप्ट का उपयोग करके उच्च-प्रदर्शन एनिमेशन बनाने की अनुमति देता है।
• Layout API: आपको तत्वों के लिए कस्टम लेआउट एल्गोरिदम को परिभाषित करने की अनुमति देता है, जैसे ग्रिड सिस्टम या मैसनरी लेआउट।
• Parser API: आपको जावास्क्रिप्ट का उपयोग करके CSS कोड को पार्स और हेरफेर करने की अनुमति देता है।

@property को अन्य Houdini API के साथ जोड़कर, आप वास्तव में शक्तिशाली और अनुकूलन योग्य CSS समाधान बना सकते हैं।

निष्कर्ष

@property नियम CSS के लिए एक शक्तिशाली जोड़ है जो आपको कस्टम प्रॉपर्टी प्रकारों को परिभाषित करने की अनुमति देता है, जिससे उन्नत स्टाइलिंग, एनिमेशन और संक्रमण सक्षम होते हैं। @property का उपयोग करके, आप अपने CSS कोड की प्रकार सुरक्षा, पठनीयता, रखरखाव और प्रदर्शन में सुधार कर सकते हैं।

जबकि ब्राउज़र समर्थन आम तौर पर अच्छा है, विभिन्न ब्राउज़रों में अपने कोड का परीक्षण करना और उन पुराने ब्राउज़रों के लिए फ़ॉलबैक तंत्र प्रदान करना महत्वपूर्ण है जो @property का समर्थन नहीं करते हैं।

इस लेख में उल्लिखित सर्वोत्तम प्रथाओं का पालन करके, आप वास्तव में अद्भुत वेब अनुभव बनाने के लिए @property की शक्ति का उपयोग कर सकते हैं।

आगे अन्वेषण

• MDN Web Docs: @property
• Houdini.how: A Guide to CSS Houdini
• Can I use @property