सिर्फ़ कुछ क्लिक में, Houdini पेंट वर्कलेट की मदद से अपनी सीएसएस को बेहतर बनाया जा सकता है.
सीएसएस Huudini एक ऐसा शब्द है जिसे आम तौर पर इस्तेमाल किया जा सकता है लो-लेवल ब्राउज़र एपीआई की सीरीज़ के बारे में बताता है. इससे डेवलपर को ज़्यादा कंट्रोल और कंट्रोल मिलते हैं उनके लिखने की शैली.
Houdini टाइप किए गए ऑब्जेक्ट के साथ ज़्यादा सिमैंटिक सीएसएस को चालू करती है मॉडल. डेवलपर ये काम कर सकते हैं इनके ज़रिए सिंटैक्स, डिफ़ॉल्ट वैल्यू, और इनहेरिटेंस के साथ, ऐडवांस सीएसएस कस्टम प्रॉपर्टी को परिभाषित करने की अनुमति दें Properties and Value API.
यह पेंट, लेआउट, और ऐनिमेशन भी पेश करता है वर्कलेट, जिनसे वेबसाइट पर आने वाले इससे लेखकों को स्टाइल और लेआउट को समझने में आसानी होती है. के रेंडर होने में लगने वाला समय है.
Houdini वर्कलेट को समझना
Houdini वर्कलेट, ब्राउज़र के लिए निर्देश हैं जो मुख्य थ्रेड से बाहर चले जाते हैं और इन्हें तब कॉल किया जा सकता है जब की ज़रूरत नहीं है. वर्कलेट से, आपको खास टास्क पूरे करने के लिए मॉड्यूलर सीएसएस लिखने में मदद मिलती है. साथ ही, इसके लिए एक ही तरीके की ज़रूरत होती है की अनुमति दें. सीएसएस स्टाइल के लिए सर्विस वर्कर की तरह, हुडीनी वर्कलेट भी आपके ऐप्लिकेशन पर रजिस्टर किए जाते हों और एक बार रजिस्टर हो जाने पर, इन्हें आपकी सीएसएस में नाम से इस्तेमाल किया जा सकता है.
वर्कलेट फ़ाइल लिखें वर्कलेट मॉड्यूल को रजिस्टर करें (CSS.paintWorklet.addModule(workletURL)) वर्कलेट का इस्तेमाल करें
(background: paint(confetti))
CSS Paint API की मदद से, अपनी सुविधाएं लागू करना
CSS Paint 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 Portrait API, फ़िलहाल इस्तेमाल के लिए उपलब्ध Houdini एपीआई के सबसे बेहतरीन एपीआई में से एक है. इसकी खासियत है W3C उम्मीदवार का सुझाव. फ़िलहाल, यह सुविधा Chromium पर आधारित सभी ब्राउज़र में चालू है. हालांकि, यह सुविधा कुछ हद तक चालू है जो Safari में काम करता है और Firefox के लिए विचार किया जा रहा है.
लेकिन ब्राउज़र पर पूरी तरह से काम न करने पर भी, Houdini Paint API से क्रिएटिव बनाया जा सकता है और आपकी स्टाइल सभी मॉडर्न ब्राउज़र पर CSS Paint पॉलीफ़िल. साथ ही, दुनिया भर की लागू करने, संसाधन और वर्कलेट की लाइब्रेरी उपलब्ध कराने के लिए, मेरी टीम ने बनाया houdini.how.
Houdini.how
Houdini.how, Houdini वर्कलेट और संसाधनों के लिए एक लाइब्रेरी और रेफ़रंस है. यह यह आपको CSS Houdini के बारे में जानने के लिए हर ज़रूरी जानकारी देता है: ब्राउज़र सहायता, इसके अलग-अलग एपीआई के इस्तेमाल की खास जानकारी जानकारी, अतिरिक्त संसाधन, और लाइव पेंट वर्कलेट सैंपल. Houdini.how पर मौजूद हर सैंपल, CSS Paint API का इस्तेमाल करता है, जिसका मतलब है वे सभी आधुनिक ब्राउज़र पर काम करते हैं. इसे आज़माएं!
Houdini का इस्तेमाल करना
Houdini वर्कलेट, या तो स्थानीय तौर पर सर्वर के ज़रिए या प्रोडक्शन में एचटीटीपीएस पर चलाए जाने चाहिए. कार्रवाई करने के लिए अगर आप Houdini वर्कलेट के साथ काम करते हैं, तो आपको या तो इसे स्थानीय तौर पर इंस्टॉल करना होगा या कॉन्टेंट डिलीवरी का इस्तेमाल करना होगा फ़ाइलें दिखाने के लिए, नेटवर्क (सीडीएन) जैसे कि unpkg को नेटवर्क से कनेक्ट करें. आपको इसके बाद वर्कलेट को एक ही जगह पर सेव किया जा सकता है.
अपने वेब प्रोजेक्ट में Houdini.how शोकेस वर्कलेट शामिल करने के कुछ तरीके हैं. वे ये काम कर सकते हैं या तो सीडीएन के ज़रिए प्रोटोटाइपिंग की क्षमता में इस्तेमाल किया जाए या वर्कलेट को खुद ही इस तरीके से मैनेज किया जा सकता है npm मॉड्यूल. दोनों ही मामलों में, सीएसएस पेंट पॉलीफ़िल को भी शामिल करके यह पक्का किया जा सकता है कि वे क्रॉस-ब्राउज़र के साथ काम करता है.
1. सीडीएन के साथ प्रोटोटाइप करना
Unpkg से रजिस्टर करते समय, आप स्थानीय तौर पर ज़रूरी बिना सीधे Worklet.js फ़ाइल से लिंक कर सकते हैं वर्कलेट को इंस्टॉल करना होगा. Unpkg में Worklet.js को मुख्य स्क्रिप्ट के तौर पर इस्तेमाल किया जाएगा या आपके पास इसे तय करने का विकल्प है खुद को बेहतर बनाएं. Unpkg पर सीओआरएस से जुड़ी समस्याएं नहीं होती हैं, क्योंकि इसे एचटीटीपीएस पर दिखाया जाता है.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
ध्यान दें कि इससे सिंटैक्स और फ़ॉलबैक वैल्यू के लिए, कस्टम प्रॉपर्टी रजिस्टर नहीं की जाती हैं. इसके बजाय, वे हर एक के लिए फ़ॉलबैक वैल्यू, वर्कलेट में एम्बेड की गई हैं.
कस्टम प्रॉपर्टी को रजिस्टर करने के लिए, प्रॉपर्टीज़.js फ़ाइल को भी शामिल करें.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
सीएसएस पेंट पॉलीफ़िल को Unpkg के साथ शामिल करने के लिए:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. एनपीएम से वर्कलेट मैनेज करना
एनपीएम से अपना वर्कलेट इंस्टॉल करें:
npm install <package-name>
npm install css-paint-polyfill
इस पैकेज को इंपोर्ट करने से, पेंट वर्कलेट अपने-आप इंजेक्ट नहीं होता. वर्कलेट को इंस्टॉल करने के लिए, आपको पैकेज के Worklet.js के साथ काम करने वाला यूआरएल जनरेट करके उसे रजिस्टर करना होगा. आप करें इसलिए:
CSS.paintWorklet.addModule(..file-path/worklet.js)
npm पैकेज का नाम और लिंक, हर वर्कलेट कार्ड पर मिल सकते हैं.
आपको स्क्रिप्ट के ज़रिए, CSS 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 योगदान के दिशा-निर्देशों के साथ रेपो का इस्तेमाल करें. हम जानना चाहेंगे कि आपके पास क्या है!