इस पेज का अनुवाद Cloud Translation API से किया गया है.

सीएसएस पेंट एपीआई

Surma

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 मैं यह करूंगा/करूंगी इस लेख में आगे बताया गया है.

ध्यान दें: पेंट वर्कलेट का कॉन्टेक्स्ट <canvas> कॉन्टेक्स्ट के बराबर नहीं है. जैसे फ़िलहाल, टेक्स्ट रेंडरिंग के तरीके मौजूद नहीं हैं और सुरक्षा की वजहों से, आपके पास ये विकल्प नहीं हैं कैनवस से पिक्सल को पीछे ले जाएं.

शुरुआती उदाहरण के तौर पर, एक चेकरबोर्ड पेंट वर्कलेट लिखें और इसका इस्तेमाल करें <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> का इस्तेमाल किया है, तो यह कोड जाना-पहचाना दिखना चाहिए. यहां जाएं: लाइव डेमो यहां.

ध्यान दें: करीब सभी नए एपीआई की तरह ही, CSS Paint API सिर्फ़ एचटीटीपीएस पर उपलब्ध है (या localhost).

बैकग्राउंड इमेज के तौर पर, चेकबोर्ड पैटर्न वाला टेक्स्ट एरिया — बैकग्राउंड की इमेज के तौर पर, चेकबोर्ड पैटर्न वाला टेक्स्ट एरिया.

यहां सामान्य पृष्ठभूमि चित्र का उपयोग करने से यह अंतर है कि पैटर्न जब भी उपयोगकर्ता टेक्स्ट एरिया का साइज़ बदलेगा, तो उसे मांग पर दोबारा तैयार किया जाएगा. इसका मतलब है बैकग्राउंड की इमेज हमेशा ज़रूरत के हिसाब से बड़ी होती है. इसमें इमेज के बीच ज़्यादा डेंसिटी वाले डिसप्ले के लिए मुआवज़ा.

यह काफ़ी बढ़िया है, लेकिन इसमें कोई बदलाव नहीं होना चाहिए. क्या हम भाषा के आधार पर हर बार एक ही पैटर्न ढूँढने के लिए, लेकिन अलग साइज़ वाले वर्कलेट का इस्तेमाल करें वर्ग? इसका जवाब है, नहीं!

आपके वर्कलेट का पैरामीटर तय करना

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

ध्यान दें: रंगों को भी पैरामीटर में बांटना अच्छा होगा, है ना? खास जानकारी paint() फ़ंक्शन को आर्ग्युमेंट की सूची लेने की अनुमति देता है. इस सुविधा में फ़िलहाल इसे Chrome पर लागू नहीं किया गया है, क्योंकि यह लगातार Houdini की प्रॉपर्टी पर निर्भर करता है और वैल्यू एपीआई को भेजा जा सकता है, जिसे भेजने से पहले कुछ काम करने की ज़रूरत है.

ऐसे ब्राउज़र जो पेंट वर्कलेट का समर्थन नहीं करते हैं

लिखते समय, सिर्फ़ 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 के साथ, यह डिफ़ॉल्ट रूप से चालू रहता है. आगे बढ़ें और नई-नई सुविधाओं को आज़माएं पेंट का वर्कलेट खुल जाता है और हमें दिखता है कि आपने क्या बनाया है! प्रेरणा पाने के लिए, विंसेंट डी ऑलिवेरा के कलेक्शन को देखें.