क्रॉस-ब्राउज़र पेंट वर्कलेट और Houdini.how

Houdini पेंट वर्कलेट की मदद से, अपनी सीएसएस को बेहतर बनाने के लिए, बस कुछ ही क्लिक की ज़रूरत है.

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

Houdini लेयर

Houdini, टाइप किए गए ऑब्जेक्ट मॉडल की मदद से, ज़्यादा सेमैंटिक सीएसएस चालू करता है. डेवलपर Properties and Value API का इस्तेमाल करके सिंटैक्स, डिफ़ॉल्ट वैल्यू, और इनहेरिटेंस के साथ बेहतर सीएसएस कस्टम प्रॉपर्टी के बारे में बता सकते हैं.

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

Houdini वर्कलेट को समझना

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

वर्कलेट फ़ाइल लिखना वर्कलेट मॉड्यूल रजिस्टर करना (CSS.paintWorklet.addModule(workletURL)) वर्कलेट का इस्तेमाल करना (background: paint(confetti))

CSS Painting API की मदद से, अपनी सुविधाएं लागू करना

CSS Paint API, ऐसे वर्कलेट (पेंट वर्कलेट) का एक उदाहरण है. इसकी मदद से, डेवलपर कैनवस जैसे कस्टम पेंटिंग फ़ंक्शन तय कर सकते हैं. इन्हें सीधे सीएसएस में बैकग्राउंड, बॉर्डर, मास्क वगैरह के तौर पर इस्तेमाल किया जा सकता है. अपने यूज़र इंटरफ़ेस में CSS Paint का इस्तेमाल करने के कई विकल्प हैं.

उदाहरण के लिए, ब्राउज़र में ऐंगल वाली बॉर्डर की सुविधा लागू होने का इंतज़ार करने के बजाय, अपनी पसंद के मुताबिक 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 के लिए इस पर विचार किया जा रहा है.

Caniuse की सहायता
फ़िलहाल, CSS Painting API का इस्तेमाल क्रोमियम पर आधारित ब्राउज़र पर किया जा सकता है.

हालांकि, ब्राउज़र के पूरी तरह काम न करने पर भी, Houdini Paint API की मदद से क्रिएटिव बनाया जा सकता है. साथ ही, CSS Paint Polyfill की मदद से, यह देखा जा सकता है कि आपकी स्टाइल सभी आधुनिक ब्राउज़र पर काम करती हैं या नहीं. साथ ही, कुछ यूनीक तरीके दिखाने के लिए, मेरी टीम ने houdini.how बनाया है. इससे, संसाधन और वर्कलेट लाइब्रेरी भी मिलती है.

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>

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)

हर वर्कलेट कार्ड पर, 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 रेपो देखें. हमें यह देखने में खुशी होगी कि आपने क्या बनाया है!