Chrome 65 में नई संभावनाएं
CSS Paint API (इसे “CSS कस्टम पेंट” या “Huudini’s Paint Worklet) के नाम से भी जाना जाता है) Chrome 65 और इसके बाद के वर्शन में, डिफ़ॉल्ट रूप से चालू रहता है. यह क्या है? तुम क्या कर सकती हो इसके साथ? यह कैसे काम करता है? पढ़ना जारी रखिए, क्या आप मुझे बताएंगे/बताएंगी...
CSS Paint API की मदद से, किसी भी सीएसएस में, प्रोग्राम के हिसाब से इमेज जनरेट की जा सकती है
प्रॉपर्टी के लिए इमेज होनी चाहिए. background-image
या border-image
जैसी प्रॉपर्टी
आम तौर पर, इमेज फ़ाइल को लोड करने के लिए या बिल्ट-इन सीएसएस के साथ url()
का इस्तेमाल किया जाता है
linear-gradient()
जैसे फ़ंक्शन के लिए. उनका इस्तेमाल करने के बजाय, अब
पेंट वर्कलेट के रेफ़रंस के लिए paint(myPainter)
.
पेंट वर्कलेट लिखना
myPainter
नाम का पेंट वर्कलेट तय करने के लिए, हमें सीएसएस पेंट लोड करना होगा
CSS.paintWorklet.addModule('my-paint-worklet.js')
का इस्तेमाल करने वाली वर्कलेट फ़ाइल. इसमें
फ़ाइल में, हम पेंट वर्कलेट क्लास रजिस्टर करने के लिए registerPaint
फ़ंक्शन का इस्तेमाल कर सकते हैं:
class MyPainter {
paint(ctx, geometry, properties) {
// ...
}
}
registerPaint('myPainter', MyPainter);
paint()
कॉलबैक में, हम ctx
का इस्तेमाल ठीक वैसे ही कर सकते हैं जैसे हम
CanvasRenderingContext2D
जैसा कि हम <canvas>
से जानते हैं. अगर आपको लगता है कि
<canvas>
में ड्रॉइंग बना सकते हैं, तो आप पेंट वर्कलेट में भी ड्रॉ कर सकते हैं! geometry
हमें बताती है कि
कैनवस की चौड़ाई और ऊंचाई की जानकारी पाएं. properties
मैं यह करूंगा/करूंगी
इस लेख में आगे बताया गया है.
शुरुआती उदाहरण के तौर पर, एक चेकरबोर्ड पेंट वर्कलेट लिखें और इसका इस्तेमाल करें
<textarea>
की बैकग्राउंड इमेज के तौर पर. (मैं टेक्स्ट एरिया का इस्तेमाल इसलिए कर रहा/रही हूं, क्योंकि यह
इसका साइज़ डिफ़ॉल्ट तौर पर बदला जा सकता है.):
<!-- index.html -->
<!doctype html>
<style>
textarea {
background-image: paint(checkerboard);
}
</style>
<textarea></textarea>
<script>
CSS.paintWorklet.addModule('checkerboard.js');
</script>
// checkerboard.js
class CheckerboardPainter {
paint(ctx, geom, properties) {
// Use `ctx` as if it was a normal canvas
const colors = ['red', 'green', 'blue'];
const size = 32;
for(let y = 0; y < geom.height/size; y++) {
for(let x = 0; x < geom.width/size; x++) {
const color = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.fillStyle = color;
ctx.rect(x * size, y * size, size, size);
ctx.fill();
}
}
}
}
// Register our class under a specific name
registerPaint('checkerboard', CheckerboardPainter);
अगर आपने पहले <canvas>
का इस्तेमाल किया है, तो यह कोड जाना-पहचाना दिखना चाहिए. यहां जाएं:
लाइव
डेमो
यहां.
यहां सामान्य पृष्ठभूमि चित्र का उपयोग करने से यह अंतर है कि पैटर्न जब भी उपयोगकर्ता टेक्स्ट एरिया का साइज़ बदलेगा, तो उसे मांग पर दोबारा तैयार किया जाएगा. इसका मतलब है बैकग्राउंड की इमेज हमेशा ज़रूरत के हिसाब से बड़ी होती है. इसमें इमेज के बीच ज़्यादा डेंसिटी वाले डिसप्ले के लिए मुआवज़ा.
यह काफ़ी बढ़िया है, लेकिन इसमें कोई बदलाव नहीं होना चाहिए. क्या हम भाषा के आधार पर हर बार एक ही पैटर्न ढूँढने के लिए, लेकिन अलग साइज़ वाले वर्कलेट का इस्तेमाल करें वर्ग? इसका जवाब है, नहीं!
आपके वर्कलेट का पैरामीटर तय करना
अच्छी बात यह है कि पेंट वर्कलेट दूसरी सीएसएस प्रॉपर्टी को ऐक्सेस कर सकते हैं, जहां
अतिरिक्त पैरामीटर properties
काम करता है. क्लास को स्टैटिक बनाकर
inputProperties
एट्रिब्यूट के लिए, किसी भी सीएसएस प्रॉपर्टी में हुए बदलावों की सदस्यता ली जा सकती है,
इसमें कस्टम प्रॉपर्टी शामिल हैं. आपको ये वैल्यू इसके ज़रिए दी जाएंगी:
properties
पैरामीटर.
<!-- index.html -->
<!doctype html>
<style>
textarea {
/* The paint worklet subscribes to changes of these custom properties. */
--checkerboard-spacing: 10;
--checkerboard-size: 32;
background-image: paint(checkerboard);
}
</style>
<textarea></textarea>
<script>
CSS.paintWorklet.addModule('checkerboard.js');
</script>
// checkerboard.js
class CheckerboardPainter {
// inputProperties returns a list of CSS properties that this paint function gets access to
static get inputProperties() { return ['--checkerboard-spacing', '--checkerboard-size']; }
paint(ctx, geom, properties) {
// Paint worklet uses CSS Typed OM to model the input values.
// As of now, they are mostly wrappers around strings,
// but will be augmented to hold more accessible data over time.
const size = parseInt(properties.get('--checkerboard-size').toString());
const spacing = parseInt(properties.get('--checkerboard-spacing').toString());
const colors = ['red', 'green', 'blue'];
for(let y = 0; y < geom.height/size; y++) {
for(let x = 0; x < geom.width/size; x++) {
ctx.fillStyle = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.rect(x*(size + spacing), y*(size + spacing), size, size);
ctx.fill();
}
}
}
}
registerPaint('checkerboard', CheckerboardPainter);
अब हम सभी अलग-अलग तरह के चेकरबोर्ड के लिए एक ही कोड का इस्तेमाल कर सकते हैं. हालांकि, फिर बेहतर होगा, अब हम DevTools और वैल्यू के साथ फ़िडल पर जा सकते हैं जब तक कि हमें सही लुक न मिल जाए.
ऐसे ब्राउज़र जो पेंट वर्कलेट का समर्थन नहीं करते हैं
लिखते समय, सिर्फ़ Chrome में पेंट वर्कलेट लागू किया गया है. जब तक आप अन्य सभी ब्राउज़र वेंडर से पॉज़िटिव सिग्नल मिलते हैं, लेकिन बहुत ज़्यादा प्रोग्रेस नहीं है. अप-टू-डेट रहने के लिए, क्या Houdini अभी तैयार है? देखें नियमित रूप से. इस दौरान, प्रोग्रेसिव टूल का इस्तेमाल ज़रूर करें पेंट के लिए सहायता न होने पर भी, आपके कोड को चलाने के लिए बेहतर बनाने की सुविधा वर्कलेट. यह पक्का करने के लिए कि चीज़ें उम्मीद के मुताबिक काम करें, आपको अपने कोड में बदलाव करना होगा दो जगहों पर: सीएसएस और JS.
JS में पेंट वर्कलेट के लिए सहायता का पता लगाने के लिए, CSS
ऑब्जेक्ट की जांच करें:
js
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('mystuff.js');
}
सीएसएस की तरफ़ के लिए, आपके पास दो विकल्प हैं. @supports
का इस्तेमाल किया जा सकता है:
@supports (background: paint(id)) {
/* ... */
}
इसका एक और आसान तरीका, इस बात का इस्तेमाल करना है कि सीएसएस अमान्य हो जाती है और बाद में अगर किसी प्रॉपर्टी की जानकारी में कोई फ़ंक्शन है, तो पूरे प्रॉपर्टी एलान को अनदेखा कर देता है. अगर आपने आप प्रॉपर्टी को दो बार तय करते हैं — पहले वर्कलेट के बिना और फिर पेंट वर्कलेट — आपको प्रोग्रेसिव एन्हैंसमेंट मिलता है:
textarea {
background-image: linear-gradient(0, red, blue);
background-image: paint(myGradient, red, blue);
}
पेंट वर्कलेट के लिए समर्थन के साथ ब्राउज़र में, की दूसरी घोषणा
background-image
पहली वैल्यू को ओवरराइट कर देगा. ब्राउज़र में बिना सहायता के
पेंट वर्कलेट के लिए, दूसरा एलान अमान्य है और उसे खारिज कर दिया जाएगा,
करते समय, पहली बार एलान किया गया हो.
सीएसएस पेंट पॉलीफ़िल
कई तरह के इस्तेमाल के लिए, यह सीएसएस पेंट पॉलीफ़िल, इससे, सीएसएस कस्टम पेंट और पेंट वर्कलेट को मॉडर्न ब्राउज़र के साथ इस्तेमाल किया जा सकता है.
उपयोग के उदाहरण
पेंट वर्कलेट के लिए कई इस्तेमाल के उदाहरण हैं. इनमें से कुछ
अन्य. पेंट वर्कलेट का इस्तेमाल करके, पेंट का साइज़ कम करने के लिए पेंट वर्कलेट का इस्तेमाल सबसे ज़्यादा किया जा सकता है
. अक्सर, सजावट के लिए ही एलिमेंट जोड़े जाते हैं
क्लिक करें. उदाहरण के लिए, Material Design Lite में बटन
रिपल इफ़ेक्ट में दो अतिरिक्त <span>
एलिमेंट होते हैं, जो
खुद को अलग-थलग नहीं करता. अगर बटन बहुत ज़्यादा हैं, तो एक बड़ी संख्या में
इससे मोबाइल पर परफ़ॉर्मेंस में गिरावट आ सकती है. अगर आपको
पेंट वर्कलेट का इस्तेमाल करके रिपल इफ़ेक्ट लागू करना
इसके बजाय, आपको कोई अतिरिक्त एलिमेंट नहीं मिलता और सिर्फ़ एक पेंट वर्कलेट मिलता है.
इसके अलावा, आपको कुछ ऐसा भी मिलता है जिसे कस्टमाइज़ करना और भी आसान होता है
पैरामीटर का इस्तेमाल करना होगा.
पेंट वर्कलेट का इस्तेमाल करने का एक और फ़ायदा यह भी है कि ज़्यादातर मामलों में यह एक समाधान है पेंट वर्कलेट का इस्तेमाल बाइट के मामले में छोटा होता है. बेशक, यहां एक बंद करें: जब भी कैनवस के साइज़ या पैरामीटर में बदलाव. इसलिए, अगर आपका कोड जटिल है और उसे बनाने में ज़्यादा समय लगता है, तो जैंक. Chrome पेंट वर्कलेट को मुख्य थ्रेड से बाहर ले जाने पर काम कर रहा है, ताकि यहाँ तक कि लंबे समय तक चलने वाले पेंट वर्कलेट भी मुख्य विंडो की संवेदनशीलता को प्रभावित नहीं करते थ्रेड.
मेरे हिसाब से सबसे बड़ी चुनौती यह है कि पेंट वर्कलेट की मदद से, सीएसएस की ऐसी सुविधाओं की पॉलीफ़िलिंग जो ब्राउज़र में अभी तक नहीं हैं. इसका एक उदाहरण यह होगा: कोनिक ग्रेडिएंट को पॉलीफ़िल करने के लिए जब तक वे मूल रूप से Chrome पर जाते हैं. एक और उदाहरण: सीएसएस मीटिंग में, यह ने तय किया कि अब आप एक से अधिक बॉर्डर रंग डाल सकते हैं. जब यह मीटिंग मेरे सहयोगी इयान किलपैट्रिक ने इस नई सीएसएस के लिए एक पॉलीफ़िल लिखा पेंट वर्कलेट का इस्तेमाल करके व्यवहार के बारे में बताएँ.
कुछ अलग तरीके से सोचना
ज़्यादातर लोग बैकग्राउंड इमेज और बॉर्डर इमेज के बारे में सोचना शुरू कर देते हैं, जब वे
पेंट वर्कलेट के बारे में जानें. पेंट वर्कलेट के लिए एक कम सहज उपयोग का उदाहरण यह है
mask-image
, ताकि DOM एलिमेंट के आर्बिट्रेरी आकार बनाए जा सकें. उदाहरण के लिए:
डायमंड:
mask-image
, एलिमेंट के साइज़ की इमेज लेता है. वे इलाके जहां
मास्क चित्र पारदर्शी है, तत्व पारदर्शी है. वे जगहें जहां मास्क लगा है
इमेज ओपेक है और एलिमेंट ओपेक है.
अब Chrome में
पेंट वर्कलेट कुछ समय से Chrome कैनरी में मौजूद है. Chrome 65 के साथ, यह डिफ़ॉल्ट रूप से चालू रहता है. आगे बढ़ें और नई-नई सुविधाओं को आज़माएं पेंट का वर्कलेट खुल जाता है और हमें दिखता है कि आपने क्या बनाया है! प्रेरणा पाने के लिए, विंसेंट डी ऑलिवेरा के कलेक्शन को देखें.