CSS পেইন্ট API

সুরমা

Chrome 65-এ নতুন সম্ভাবনা

সিএসএস পেইন্ট এপিআই ("সিএসএস কাস্টম পেইন্ট" বা "হাউডিনির পেইন্ট ওয়ার্কলেট" নামেও পরিচিত) ক্রোম 65 থেকে শুরু করে ডিফল্টরূপে সক্রিয় করা হয়েছে। এটি কী? আপনি এটা দিয়ে কি করতে পারেন? এবং এটি কিভাবে কাজ করে? আচ্ছা, পড়ুন, আপনি কি...

সিএসএস পেইন্ট এপিআই আপনাকে প্রোগ্রাম্যাটিকভাবে একটি ছবি তৈরি করতে দেয় যখনই একটি সিএসএস প্রপার্টি একটি ছবি আশা করে। background-image বা border-image মতো বৈশিষ্ট্যগুলি সাধারণত url() এর সাথে একটি ইমেজ ফাইল লোড করতে বা linear-gradient() এর মতো সিএসএস বিল্ট-ইন ফাংশনগুলির সাথে ব্যবহার করা হয়। সেগুলি ব্যবহার করার পরিবর্তে, আপনি এখন paint(myPainter) ব্যবহার করতে পারেন একটি পেইন্ট ওয়ার্কলেট রেফারেন্স করতে।

একটি পেইন্ট ওয়ার্কলেট লেখা

myPainter নামক একটি পেইন্ট ওয়ার্কলেট সংজ্ঞায়িত করতে, আমাদের CSS.paintWorklet.addModule('my-paint-worklet.js') ব্যবহার করে একটি CSS পেইন্ট ওয়ার্কলেট ফাইল লোড করতে হবে। সেই ফাইলটিতে, আমরা একটি পেইন্ট ওয়ার্কলেট ক্লাস নিবন্ধন করতে 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> ব্যবহার করে থাকলে, এই কোডটি পরিচিত দেখা উচিত। এখানে লাইভ ডেমো দেখুন.

একটি পটভূমি চিত্র হিসাবে একটি চেকারবোর্ড প্যাটার্ন সহ Textarea
একটি পটভূমি চিত্র হিসাবে একটি চেকারবোর্ড প্যাটার্ন সহ Textarea.

এখানে একটি সাধারণ ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করার থেকে পার্থক্য হল যে যখনই ব্যবহারকারী টেক্সটেরিয়ার আকার পরিবর্তন করবেন তখনই প্যাটার্নটি চাহিদা অনুযায়ী পুনরায় আঁকা হবে। এর মানে হল ব্যাকগ্রাউন্ড ইমেজ সবসময় ঠিক ততটা বড় হয় যতটা হওয়া দরকার, উচ্চ-ঘনত্বের ডিসপ্লেগুলির জন্য ক্ষতিপূরণ সহ।

এটি বেশ দুর্দান্ত, তবে এটি বেশ স্ট্যাটিকও। আমরা কি প্রতিবার একই প্যাটার্ন চাই কিন্তু ভিন্ন আকারের স্কোয়ার সহ একটি নতুন ওয়ার্কলেট লিখতে চাই? উত্তর হল না!

আপনার ওয়ার্কলেট প্যারামিটারাইজ করা

ভাগ্যক্রমে, পেইন্ট ওয়ার্কলেট অন্যান্য CSS বৈশিষ্ট্যগুলি অ্যাক্সেস করতে পারে, যেখানে অতিরিক্ত প্যারামিটার properties কার্যকর হয়। ক্লাসটিকে একটি স্ট্যাটিক inputProperties অ্যাট্রিবিউট দেওয়ার মাধ্যমে, আপনি কাস্টম বৈশিষ্ট্য সহ যেকোনো CSS প্রপার্টিতে পরিবর্তন সাবস্ক্রাইব করতে পারেন। 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-এ পেইন্ট ওয়ার্কলেট প্রয়োগ করা হয়েছে। অন্যান্য ব্রাউজার বিক্রেতাদের কাছ থেকে ইতিবাচক সংকেত থাকলেও, খুব বেশি অগ্রগতি নেই। আপ টু ডেট রাখতে, চেক করুন হাউডিনি কি এখনও প্রস্তুত? নিয়মিত ইতিমধ্যে, পেইন্ট ওয়ার্কলেটের জন্য কোনো সমর্থন না থাকলেও আপনার কোড চলমান রাখতে প্রগতিশীল বর্ধন ব্যবহার করতে ভুলবেন না। জিনিসগুলি আশানুরূপ কাজ করে তা নিশ্চিত করতে, আপনাকে দুটি জায়গায় আপনার কোড সামঞ্জস্য করতে হবে: CSS এবং JS।

JS-এ পেইন্ট ওয়ার্কলেটের জন্য সমর্থন সনাক্ত করা CSS অবজেক্ট চেক করে করা যেতে পারে: js if ('paintWorklet' in CSS) { CSS.paintWorklet.addModule('mystuff.js'); } CSS সাইডের জন্য, আপনার কাছে দুটি বিকল্প আছে। আপনি @supports ব্যবহার করতে পারেন:

@supports (background: paint(id)) {
  /* ... */
}

একটি আরও কমপ্যাক্ট কৌশল হল এই সত্যটি ব্যবহার করা যে CSS বাতিল করে এবং পরবর্তীতে একটি সম্পূর্ণ সম্পত্তি ঘোষণা উপেক্ষা করে যদি এটিতে একটি অজানা ফাংশন থাকে। আপনি যদি একটি সম্পত্তি দুবার নির্দিষ্ট করেন — প্রথমে পেইন্ট ওয়ার্কলেট ছাড়াই, এবং তারপর পেইন্ট ওয়ার্কলেটের সাথে — আপনি প্রগতিশীল বর্ধন পাবেন:

textarea {
  background-image: linear-gradient(0, red, blue);
  background-image: paint(myGradient, red, blue);
}

পেইন্ট ওয়ার্কলেটের সমর্থন সহ ব্রাউজারগুলিতে, background-image দ্বিতীয় ঘোষণাটি প্রথমটিকে ওভাররাইট করবে। পেইন্ট ওয়ার্কলেটের সমর্থন ছাড়া ব্রাউজারগুলিতে, দ্বিতীয় ঘোষণাটি অবৈধ এবং বাতিল করা হবে, প্রথম ঘোষণাটি কার্যকর থাকবে৷

সিএসএস পেইন্ট পলিফিল

অনেক ব্যবহারের জন্য, CSS পেইন্ট পলিফিল ব্যবহার করাও সম্ভব, যা আধুনিক ব্রাউজারগুলিতে CSS কাস্টম পেইন্ট এবং পেইন্ট ওয়ার্কলেট সমর্থন যোগ করে।

ব্যবহারের ক্ষেত্রে

পেইন্ট ওয়ার্কলেটগুলির জন্য অনেকগুলি ব্যবহারের ক্ষেত্রে রয়েছে, তাদের মধ্যে কিছু অন্যদের তুলনায় আরও স্পষ্ট। আপনার DOM-এর আকার কমাতে পেইন্ট ওয়ার্কলেট ব্যবহার করা হচ্ছে আরও সুস্পষ্ট একটি। প্রায়শই, সিএসএস ব্যবহার করে অলঙ্করণ তৈরি করতে উপাদানগুলি সম্পূর্ণরূপে যোগ করা হয়। উদাহরণ স্বরূপ, মেটেরিয়াল ডিজাইন লাইটে রিপল ইফেক্ট সহ বোতামটিতে 2টি অতিরিক্ত <span> উপাদান রয়েছে যাতে লহরটি নিজেই প্রয়োগ করা যায়। আপনার যদি অনেকগুলি বোতাম থাকে তবে এটি বেশ কয়েকটি DOM উপাদান যোগ করতে পারে এবং মোবাইলে কর্মক্ষমতা হ্রাস পেতে পারে। আপনি যদি পরিবর্তে পেইন্ট ওয়ার্কলেট ব্যবহার করে রিপল ইফেক্ট বাস্তবায়ন করেন , তাহলে আপনি 0টি অতিরিক্ত উপাদান এবং শুধুমাত্র একটি পেইন্ট ওয়ার্কলেট সহ শেষ করবেন। উপরন্তু, আপনার কাছে এমন কিছু আছে যা কাস্টমাইজ করা এবং প্যারামিটারাইজ করা অনেক সহজ।

পেইন্ট ওয়ার্কলেট ব্যবহার করার আরেকটি উত্থান হল - বেশিরভাগ পরিস্থিতিতে - পেইন্ট ওয়ার্কলেট ব্যবহার করে একটি সমাধান বাইটের পরিপ্রেক্ষিতে ছোট। অবশ্যই, একটি ট্রেড-অফ আছে: যখনই ক্যানভাসের আকার বা কোনো প্যারামিটার পরিবর্তন হবে তখনই আপনার পেইন্ট কোড চলবে। তাই যদি আপনার কোড জটিল হয় এবং এটি দীর্ঘ সময় নেয় তবে এটি জ্যাঙ্ক প্রবর্তন করতে পারে। Chrome মূল থ্রেড থেকে পেইন্ট ওয়ার্কলেটগুলি সরানোর জন্য কাজ করছে যাতে এমনকি দীর্ঘ-চলমান পেইন্ট ওয়ার্কলেটগুলিও মূল থ্রেডের প্রতিক্রিয়াশীলতাকে প্রভাবিত না করে।

আমার কাছে, সবচেয়ে উত্তেজনাপূর্ণ সম্ভাবনা হল পেইন্ট ওয়ার্কলেট সিএসএস বৈশিষ্ট্যগুলির একটি দক্ষ পলিফিলিংকে অনুমতি দেয় যা একটি ব্রাউজারে এখনও নেই। একটি উদাহরণ হবে পলিফিল কনিক গ্রেডিয়েন্ট যতক্ষণ না তারা নেটিভভাবে ক্রোমে অবতরণ করে। আরেকটি উদাহরণ: একটি CSS মিটিংয়ে সিদ্ধান্ত নেওয়া হয়েছিল যে আপনি এখন একাধিক বর্ডার রং থাকতে পারেন। যখন এই মিটিংটি এখনও চলছে, আমার সহকর্মী ইয়ান কিলপ্যাট্রিক পেইন্ট ওয়ার্কলেট ব্যবহার করে এই নতুন CSS আচরণের জন্য একটি পলিফিল লিখেছেন ৷

বক্সের বাইরে চিন্তা"

বেশিরভাগ লোকেরা যখন পেইন্ট ওয়ার্কলেট সম্পর্কে শিখে তখন ব্যাকগ্রাউন্ড ইমেজ এবং বর্ডার ইমেজ সম্পর্কে ভাবতে শুরু করে। পেইন্ট ওয়ার্কলেটের জন্য একটি কম স্বজ্ঞাত ব্যবহারের ক্ষেত্রে হল mask-image যাতে DOM উপাদানগুলিকে নির্বিচারে আকার দেওয়া হয়। উদাহরণস্বরূপ একটি হীরা :

একটি হীরার আকারে একটি DOM উপাদান৷
একটি হীরার আকারে একটি DOM উপাদান৷

mask-image একটি ইমেজ নেয় যা উপাদানটির আকার। যে এলাকায় মুখোশের ছবি স্বচ্ছ, উপাদানটি স্বচ্ছ। যে এলাকায় মুখোশের ছবি অস্বচ্ছ, উপাদান অস্বচ্ছ।

এখন ক্রোমে

পেইন্ট ওয়ার্কলেট কিছু সময়ের জন্য ক্রোম ক্যানারিতে আছে। Chrome 65-এর সাথে, এটি ডিফল্টরূপে সক্রিয় থাকে। এগিয়ে যান এবং পেইন্ট ওয়ার্কলেট খোলার নতুন সম্ভাবনাগুলি চেষ্টা করে দেখুন এবং আপনি কী তৈরি করেছেন তা আমাদের দেখান! আরও অনুপ্রেরণার জন্য, ভিনসেন্ট ডি অলিভেইরার সংগ্রহটি দেখুন।