Houdini पेंट वर्कलेट की मदद से, अपनी सीएसएस को बेहतर बनाने के लिए बस कुछ ही क्लिक की ज़रूरत है.
सीएसएस Houdini एक ऐसा शब्द है जिससे, कम लेवल के ब्राउज़र एपीआई की सीरीज़ के बारे में पता चलता है. इन एपीआई की मदद से, डेवलपर अपनी लिखी गई स्टाइल पर ज़्यादा कंट्रोल और अधिकार पाते हैं.
Houdini, टाइप किए गए ऑब्जेक्ट मॉडल की मदद से, ज़्यादा सेमैटिक सीएसएस चालू करता है. डेवलपर, प्रॉपर्टी और वैल्यू एपीआई की मदद से, सिंटैक्स, डिफ़ॉल्ट वैल्यू, और इनहेरिटेंस की मदद से बेहतर सीएसएस कस्टम प्रॉपर्टी तय कर सकते हैं.
इसमें पेंट, लेआउट, और ऐनिमेशन के वर्कलेट भी शामिल किए गए हैं. इनकी मदद से, लेखकों के लिए ब्राउज़र के रेंडरिंग इंजन की स्टाइल और लेआउट की प्रोसेस को आसानी से इस्तेमाल करना संभव हो जाता है.
Houdini वर्कलेट को समझना
Houdini वर्कलेट, ब्राउज़र के निर्देश होते हैं जो मुख्य थ्रेड पर चलते हैं और ज़रूरत पड़ने पर उन्हें कॉल किया जा सकता है. वर्कलेट की मदद से, खास टास्क पूरे करने के लिए मॉड्यूलर सीएसएस लिखी जा सकती है. साथ ही, इन्हें इंपोर्ट और रजिस्टर करने के लिए, JavaScript की एक लाइन की ज़रूरत होती है. सीएसएस स्टाइल के लिए सेवा वर्कर की तरह ही, Houdini वर्कलेट को भी आपके ऐप्लिकेशन में रजिस्टर किया जाता है. रजिस्टर होने के बाद, इनका इस्तेमाल आपकी सीएसएस में नाम से किया जा सकता है.
वर्कलेट फ़ाइल लिखना वर्कलेट मॉड्यूल रजिस्टर करना (CSS.paintWorklet.addModule(workletURL)) वर्कलेट का इस्तेमाल करना (background: paint(confetti))
CSS Painting API की मदद से, अपनी सुविधाएं लागू करना
CSS Painting API, इस तरह के वर्कलेट (Paint वर्कलेट) का एक उदाहरण है. इसकी मदद से, डेवलपर कैनवस जैसे कस्टम पेंटिंग फ़ंक्शन तय कर सकते हैं. इनका इस्तेमाल सीधे सीएसएस में बैकग्राउंड, बॉर्डर, मास्क वगैरह के तौर पर किया जा सकता है. अपने यूज़र इंटरफ़ेस में सीएसएस पेंट का इस्तेमाल करने के कई तरीके हैं.
उदाहरण के लिए, ब्राउज़र में ऐंगल वाले बॉर्डर की सुविधा लागू होने का इंतज़ार करने के बजाय, अपनी पसंद के मुताबिक Paint वर्कलेट लिखा जा सकता है या पब्लिश किए गए किसी मौजूदा वर्कलेट का इस्तेमाल किया जा सकता है. इसके बाद, border-radius का इस्तेमाल करने के बजाय, इस वर्कलेट को बॉर्डर और क्लिपिंग पर लागू करें.
.angled {
--corner-radius: 15 0 0 0;
--paint-color: #6200ee;
--stroke-weight: 0;
/* Mask every angled button with fill mode */
-webkit-mask: paint(angled-corners, filled);
}
.outline {
--stroke-weight: 1;
/* Paint outline */
border-image: paint(angled-corners, outlined) 0 fill !important;
}
फ़िलहाल, CSS Painting API, Houdini के सबसे अच्छे एपीआई में से एक है. इसकी खास बात यह है कि इसे W3C के लिए सुझाया गया है. फ़िलहाल, यह सुविधा Chromium कोड वाले सभी ब्राउज़र में चालू है. यह Safari में कुछ हद तक काम करती है. साथ ही, Firefox के लिए इस सुविधा को उपलब्ध कराने पर विचार किया जा रहा है.
हालांकि, ब्राउज़र के पूरी तरह काम न करने पर भी, Houdini Paint API की मदद से क्रिएटिव बनाए जा सकते हैं. साथ ही, CSS Paint Polyfill की मदद से, यह देखा जा सकता है कि आपकी स्टाइल सभी आधुनिक ब्राउज़र पर काम करती हैं या नहीं. साथ ही, कुछ यूनीक तरीके दिखाने के लिए, मेरी टीम ने houdini.how बनाया है. इससे, संसाधन और वर्कलेट लाइब्रेरी भी मिलती है.
Houdini.how
Houdini.how, Houdini के वर्कलेट और संसाधनों के लिए एक लाइब्रेरी और रेफ़रंस है. इसमें, CSS Houdini के बारे में आपको ज़रूरी जानकारी मिलती है: ब्राउज़र के साथ काम करने की सुविधा, इसके अलग-अलग एपीआई की खास जानकारी, इस्तेमाल से जुड़ी जानकारी, अन्य रिसॉर्स, और लाइव पेंट वर्कलेट के सैंपल. Houdini.how पर मौजूद हर सैंपल, सीएसएस पेंट एपीआई पर काम करता है. इसका मतलब है कि ये सभी सैंपल, सभी मॉडर्न ब्राउज़र पर काम करते हैं. इसे आज़माएं!
Houdini का इस्तेमाल करना
Houdini वर्कलेट को स्थानीय सर्वर से या प्रोडक्शन में एचटीटीपीएस पर चलाया जाना चाहिए. Houdini वर्कलेट के साथ काम करने के लिए, आपको इसे स्थानीय तौर पर इंस्टॉल करना होगा या फ़ाइलों को दिखाने के लिए, unpkg जैसे कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) का इस्तेमाल करना होगा. इसके बाद, आपको वर्कलेट को लोकल तौर पर रजिस्टर करना होगा.
अपने वेब प्रोजेक्ट में Houdini.how के शोकेस वर्कलेट शामिल करने के कुछ तरीके हैं. इनका इस्तेमाल, प्रोटोटाइप के तौर पर सीडीएन के ज़रिए किया जा सकता है. इसके अलावा, npm मॉड्यूल का इस्तेमाल करके, वर्कलेट को खुद मैनेज किया जा सकता है. किसी भी तरह से, आपको सीएसएस पेंट पॉलीफ़िल भी शामिल करना होगा, ताकि यह पक्का किया जा सके कि वे सभी ब्राउज़र के साथ काम करते हैं.
1. सीडीएन की मदद से प्रोटोटाइप बनाना
unpkg से रजिस्टर करते समय, सीधे worklet.js फ़ाइल से लिंक किया जा सकता है. इसके लिए, आपको स्थानीय तौर पर वर्कलेट को इंस्टॉल करने की ज़रूरत नहीं है. Unpkg, मुख्य स्क्रिप्ट के तौर पर worklet.js को रिज़ॉल्व करेगा. इसके अलावा, आपके पास खुद से इसे तय करने का विकल्प भी है. Unpkg से सीओआरएस से जुड़ी समस्याएं नहीं होंगी, क्योंकि इसे एचटीटीपीएस पर दिखाया जाता है.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
ध्यान दें कि इससे सिंटैक्स और फ़ॉलबैक वैल्यू के लिए कस्टम प्रॉपर्टी रजिस्टर नहीं होती हैं. इसके बजाय, हर वर्कलेट में फ़ॉलबैक वैल्यू एम्बेड की जाती हैं.
कस्टम प्रॉपर्टी को रजिस्टर करने के लिए, properties.js फ़ाइल भी शामिल करें.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
unpkg के साथ सीएसएस पेंट पॉलीफ़िल शामिल करने के लिए:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. NPM की मदद से वर्कलेट मैनेज करना
npm से अपना वर्कलेट इंस्टॉल करें:
npm install <package-name>
npm install css-paint-polyfill
इस पैकेज को इंपोर्ट करने से, पेंट वर्कलेट अपने-आप इंजेक्ट नहीं होता. वर्कलेट को इंस्टॉल करने के लिए, आपको एक ऐसा यूआरएल जनरेट करना होगा जो पैकेज के worklet.js पर रीडायरेक्ट करता हो. साथ ही, आपको उस यूआरएल को रजिस्टर करना होगा. ऐसा करने के लिए:
CSS.paintWorklet.addModule(..file-path/worklet.js)
हर वर्कलेट कार्ड पर, npm पैकेज का नाम और लिंक देखा जा सकता है.
आपको स्क्रिप्ट के ज़रिए CSS Paint Polyfill को भी शामिल करना होगा या इसे सीधे इंपोर्ट करना होगा, जैसा कि किसी फ़्रेमवर्क या बंडलर के साथ किया जाता है.
यहां आधुनिक बंडलर में, पेंट पॉलीफ़िल के साथ Houdini का इस्तेमाल करने का उदाहरण दिया गया है:
import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';
CSS.paintWorklet.addModule(workletURL);
योगदान दें
अब आपने Houdini के कुछ सैंपल आज़मा लिए हैं, तो अब आपको अपना योगदान देना है! Houdini.how पर कोई भी वर्कलेट होस्ट नहीं किया जाता. इसके बजाय, इस पर कम्यूनिटी के बनाए गए वर्कलेट दिखाए जाते हैं. अगर आपके पास कोई ऐसा वर्कलेट या संसाधन है जिसे आपको सबमिट करना है, तो योगदान से जुड़े दिशा-निर्देशों के साथ github रेपो देखें. हमें यह देखने में खुशी होगी कि आपने क्या बनाया है!