बस कुछ ही क्लिक में, अपनी सीएसएस को हूडीनी पेंट वर्कलेट से सुपरचार्ज करें.
सीएसएस Houdini एक ऐसा शब्द है जो लो-लेवल के ब्राउज़र एपीआई की सीरीज़ के बारे में बताता है. इससे डेवलपर को उनकी बनाई गई स्टाइल पर ज़्यादा कंट्रोल और कंट्रोल मिलता है.
Houdini, टाइप किए गए ऑब्जेक्ट मॉडल की मदद से ज़्यादा सिमैंटिक सीएसएस चालू करती है. डेवलपर, Properties and value API की मदद से सिंटैक्स, डिफ़ॉल्ट वैल्यू, और इनहेरिटेंस की मदद से बेहतर सीएसएस कस्टम प्रॉपर्टी तय कर सकते हैं.
इसमें पेंट, लेआउट, और ऐनिमेशन वर्कलेट भी दिए गए हैं, जिनसे कई तरह की संभावनाओं को खोला जा सकता है. इससे लेखक अपने ब्राउज़र के रेंडरिंग इंजन की स्टाइल और लेआउट प्रोसेस को आसानी से कंट्रोल कर पाते हैं.
हूडीनी वर्कलेट को समझना
हाउडीनी वर्कलेट, ब्राउज़र के निर्देश होते हैं. ये मुख्य थ्रेड से अलग होते हैं और ज़रूरत पड़ने पर इन्हें कॉल किया जा सकता है. वर्कलेट से, आपको खास टास्क पूरे करने के लिए मॉड्यूलर सीएसएस लिखने की सुविधा मिलती है. साथ ही, इंपोर्ट और रजिस्टर करने के लिए, JavaScript की एक लाइन की ज़रूरत होती है. सीएसएस स्टाइल के लिए सर्विस वर्कर की तरह, हाउडीनी वर्कलेट आपके ऐप्लिकेशन पर रजिस्टर होते हैं. रजिस्टर होने के बाद, इन्हें सीएसएस में नाम से इस्तेमाल किया जा सकता है.
वर्कलेट फ़ाइल लिखें. वर्कलेट मॉड्यूल रजिस्टर करें (CSS.paintWorklet.addModule(workletURL)) वर्कलेट का इस्तेमाल करें
(background: paint(confetti))
CSS Painting API की मदद से अपनी सुविधाएं लागू करना
CSS Painting API एक ऐसे वर्कलेट (पेंट वर्कलेट) का एक उदाहरण है जिसकी मदद से डेवलपर कैनवस जैसे कस्टम पेंटिंग फ़ंक्शन तय कर सकते हैं. इन फ़ंक्शन का इस्तेमाल सीधे सीएसएस में बैकग्राउंड, बॉर्डर, मास्क वगैरह के तौर पर किया जा सकता है. अपने यूज़र इंटरफ़ेस में CSS Paint का इस्तेमाल कैसे किया जा सकता है, इस बारे में बहुत सारी संभावनाएं हैं.
उदाहरण के लिए, कोण वाले बॉर्डर की सुविधा के लिए किसी ब्राउज़र का इंतज़ार करने के बजाय, आपके पास खुद का पेंट वर्कलेट लिखने या पब्लिश किए गए किसी मौजूदा वर्कलेट का इस्तेमाल करने का विकल्प होता है. फिर, बॉर्डर-दायरा का इस्तेमाल करने के बजाय इस वर्कलेट को बॉर्डर और क्लिपिंग पर लागू करें.
.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.how पर हर सैंपल, CSS Paint API के साथ काम करता है. इसका मतलब है कि वे सभी मॉडर्न ब्राउज़र पर काम करते हैं. कर दें!
Houdini का इस्तेमाल करना
हुडीनी वर्कलेट या तो स्थानीय सर्वर के ज़रिए चलाए जाने चाहिए या प्रोडक्शन में एचटीटीपीएस पर चलाए जाने चाहिए. Houdini वर्कलेट के साथ काम करने के लिए, आपको इसे स्थानीय रूप से इंस्टॉल करना होगा या फ़ाइलें उपलब्ध कराने के लिए, unpkg जैसे कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) का इस्तेमाल करना होगा. इसके बाद, आपको वर्कलेट को स्थानीय तौर पर रजिस्टर करना होगा.
अपने वेब प्रोजेक्ट में Houdini.how एलिमेंट दिखाने के कुछ तरीके यहां बताए गए हैं. इन्हें प्रोटोटाइप करने के लिए, सीडीएन के ज़रिए इस्तेमाल किया जा सकता है या फिर एनपीएम मॉड्यूल का इस्तेमाल करके, वर्कलेट खुद मैनेज किए जा सकते हैं. दोनों स्थितियों में, आपको CSS Paint Polyfill को भी शामिल करना होगा, ताकि यह पक्का किया जा सके कि वे क्रॉस-ब्राउज़र के साथ काम करते हैं.
1. सीडीएन की मदद से प्रोटोटाइप करना
Unpkg से रजिस्टर करते समय, वर्कलेट को स्थानीय रूप से इंस्टॉल किए बिना, सीधे Worklet.js फ़ाइल से लिंक किया जा सकता है. Unpkg से वर्कलेट.js को मुख्य स्क्रिप्ट के रूप में स्वीकार किया जाएगा या इसे खुद बताया जा सकता है. Unpkg से सीओआरएस से जुड़ी कोई समस्या नहीं होगी, क्योंकि इसे एचटीटीपीएस पर दिखाया जाता है.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
ध्यान दें कि यह सिंटैक्स और फ़ॉलबैक वैल्यू के लिए, कस्टम प्रॉपर्टी को रजिस्टर नहीं करता. इसके बजाय, हर एक में वर्कलेट में एम्बेड की गई फ़ॉलबैक वैल्यू होती हैं.
अगर आपको कस्टम प्रॉपर्टी को रजिस्टर करने का विकल्प नहीं चाहिए, तो property.js फ़ाइल भी शामिल करें.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
CSS Paint Polyfill को 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)
एनपीएम पैकेज का नाम और लिंक, हर वर्कलेट कार्ड पर मिल सकता है.
आपको स्क्रिप्ट के ज़रिए सीएसएस Paint Polyfill को शामिल करना होगा या इसे सीधे इंपोर्ट करना होगा, जैसा कि किसी फ़्रेमवर्क या बंडलर के साथ किया जाता है.
यहां दिए गए उदाहरण में बताया गया है कि मॉडर्न बंडलर में, पेंट पॉलीफ़िल के साथ हूडीनी का इस्तेमाल कैसे किया जाता है:
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.how किसी भी वर्कलेट को होस्ट नहीं करता. इसके बजाय, यह कम्यूनिटी का काम दिखाता है. अगर आपके पास कोई वर्कलेट या संसाधन है जिसे आपको सबमिट करना है, तो योगदान से जुड़े दिशा-निर्देशों के साथ GitHub रेपो देखें. हम यह देखना चाहेंगे कि आप क्या करते हैं!