ব্লিঙ্ক রেন্ডারারে রঙের দৃষ্টি ঘাটতি অনুকরণ করা

ম্যাথিয়াস বাইনেন্স

এই নিবন্ধটি বর্ণনা করে যে আমরা কেন এবং কীভাবে DevTools এবং Blink Renderer-এ কালার ভিশন ডেফিসিয়েন্সি সিমুলেশন প্রয়োগ করেছি।

পটভূমি: খারাপ রঙের বৈসাদৃশ্য

কম-কনট্রাস্ট টেক্সট হল ওয়েবে সবচেয়ে সাধারণ স্বয়ংক্রিয়ভাবে সনাক্তযোগ্য অ্যাক্সেসযোগ্যতা সমস্যা।

ওয়েবে সাধারণ অ্যাক্সেসিবিলিটি সমস্যার একটি তালিকা৷ কম-কনট্রাস্ট টেক্সট এখন পর্যন্ত সবচেয়ে সাধারণ সমস্যা।

WebAIM-এর শীর্ষ 1-মিলিয়ন ওয়েবসাইটের অ্যাক্সেসিবিলিটি বিশ্লেষণ অনুসারে, 86% এর বেশি হোম পেজে কম বৈসাদৃশ্য রয়েছে। গড়ে, প্রতিটি হোম পেজে কম-কন্ট্রাস্ট পাঠ্যের 36টি স্বতন্ত্র উদাহরণ রয়েছে।

কনট্রাস্ট সমস্যাগুলি খুঁজতে, বুঝতে এবং ঠিক করতে DevTools ব্যবহার করে

Chrome DevTools ডেভেলপার এবং ডিজাইনারদের বৈসাদৃশ্য উন্নত করতে এবং ওয়েব অ্যাপের জন্য আরও অ্যাক্সেসযোগ্য রঙের স্কিম বেছে নিতে সাহায্য করতে পারে:

আমরা সম্প্রতি এই তালিকায় একটি নতুন টুল যোগ করেছি, এবং এটি অন্যদের থেকে একটু আলাদা। উপরের টুলগুলি প্রধানত কনট্রাস্ট রেশিওর তথ্য সারফেস করার উপর ফোকাস করে এবং আপনাকে এটি ঠিক করার বিকল্প দেয়। আমরা বুঝতে পেরেছি যে ডেভেলপারদের এই সমস্যার স্থান সম্পর্কে গভীরভাবে বোঝার জন্য DevTools এখনও একটি উপায় অনুপস্থিত। এটি সমাধানের জন্য, আমরা DevTools রেন্ডারিং ট্যাবে দৃষ্টি ঘাটতি সিমুলেশন প্রয়োগ করেছি।

Puppeteer-এ, নতুন page.emulateVisionDeficiency(type) API আপনাকে প্রোগ্রামগতভাবে এই সিমুলেশনগুলিকে সক্ষম করতে দেয়।

রঙ দৃষ্টি ঘাটতি

মোটামুটিভাবে 20 জনের মধ্যে 1 জন লোক রঙের দৃষ্টিশক্তির ঘাটতিতে ভুগছেন (কম সঠিক শব্দ "বর্ণ অন্ধত্ব" হিসাবেও পরিচিত)। এই ধরনের প্রতিবন্ধকতাগুলি বিভিন্ন রঙকে আলাদা করে বলা কঠিন করে তোলে, যা বৈসাদৃশ্যের সমস্যাগুলিকে বাড়িয়ে তুলতে পারে ।

গলিত ক্রেয়নগুলির একটি রঙিন ছবি, যেখানে কোনও রঙের দৃষ্টি ঘাটতি নেই
গলিত ক্রেয়নগুলির একটি রঙিন ছবি , যেখানে কোনও রঙের দৃষ্টি ঘাটতি নেই।
ALT_TEXT_HERE
গলিত ক্রেয়নের রঙিন ছবিতে অ্যাক্রোমাটোপসিয়ার অনুকরণের প্রভাব।
গলিত ক্রেয়নগুলির একটি রঙিন ছবির উপর ডিউটেরানোপিয়া অনুকরণের প্রভাব।
গলিত ক্রেয়নগুলির একটি রঙিন ছবির উপর ডিউটেরানোপিয়া অনুকরণের প্রভাব।
গলিত ক্রেয়নের রঙিন ছবির উপর প্রোটানোপিয়া অনুকরণের প্রভাব।
গলিত ক্রেয়নের রঙিন ছবির উপর প্রোটানোপিয়া অনুকরণের প্রভাব।
গলিত ক্রেয়নের রঙিন ছবির উপর ট্রাইটানোপিয়া অনুকরণের প্রভাব।
গলিত ক্রেয়নের রঙিন ছবির উপর ট্রাইটানোপিয়া অনুকরণের প্রভাব।

নিয়মিত দৃষ্টিভঙ্গি সহ একজন বিকাশকারী হিসাবে, আপনি দেখতে পারেন যে DevTools রঙ জোড়ার জন্য একটি খারাপ বৈসাদৃশ্য অনুপাত প্রদর্শন করে যা দৃশ্যত আপনার কাছে ঠিক দেখায়। এটি ঘটে কারণ বৈসাদৃশ্য অনুপাত সূত্রগুলি এই রঙের দৃষ্টি ঘাটতিগুলিকে বিবেচনা করে! আপনি এখনও কিছু ক্ষেত্রে কম-কন্ট্রাস্ট পাঠ্য পড়তে সক্ষম হতে পারেন, তবে দৃষ্টি প্রতিবন্ধী ব্যক্তিদের সেই বিশেষাধিকার নেই।

ডিজাইনার এবং ডেভেলপারদের তাদের নিজস্ব ওয়েব অ্যাপে এই দৃষ্টি ঘাটতিগুলির প্রভাব অনুকরণ করার মাধ্যমে, আমরা অনুপস্থিত অংশটি প্রদান করার লক্ষ্য রাখি: শুধুমাত্র DevTools আপনাকে বৈপরীত্য সমস্যাগুলি খুঁজে পেতে এবং সমাধান করতে সাহায্য করতে পারে না, এখন আপনি সেগুলি বুঝতেও পারবেন!

HTML, CSS, SVG, এবং C++ সহ রঙের দৃষ্টি ঘাটতি অনুকরণ করা

আমরা আমাদের বৈশিষ্ট্যের ব্লিঙ্ক রেন্ডারার বাস্তবায়নে ডুব দেওয়ার আগে, এটি বুঝতে সাহায্য করে যে আপনি কীভাবে ওয়েব প্রযুক্তি ব্যবহার করে সমতুল্য কার্যকারিতা প্রয়োগ করবেন।

আপনি এই কালার ভিশন ডেফিসিয়েন্সি সিমুলেশনের প্রতিটিকে পুরো পৃষ্ঠা জুড়ে একটি ওভারলে হিসাবে ভাবতে পারেন। ওয়েব প্ল্যাটফর্মে এটি করার একটি উপায় রয়েছে: CSS ফিল্টার! CSS filter প্রপার্টির সাথে, আপনি কিছু পূর্বনির্ধারিত ফিল্টার ফাংশন ব্যবহার করতে পারেন, যেমন blur , contrast , grayscale , hue-rotate এবং আরও অনেক কিছু। আরও বেশি নিয়ন্ত্রণের জন্য, filter প্রপার্টি একটি URL গ্রহণ করে যা একটি কাস্টম SVG ফিল্টার সংজ্ঞা নির্দেশ করতে পারে:

<style>
  :root {
    filter: url(#deuteranopia);
  }
</style>
<svg>
  <filter id="deuteranopia">
    <feColorMatrix values="0.367  0.861 -0.228  0.000  0.000
                           0.280  0.673  0.047  0.000  0.000
                          -0.012  0.043  0.969  0.000  0.000
                           0.000  0.000  0.000  1.000  0.000">
    </feColorMatrix>
  </filter>
</svg>

উপরের উদাহরণটি একটি কালার ম্যাট্রিক্সের উপর ভিত্তি করে একটি কাস্টম ফিল্টার সংজ্ঞা ব্যবহার করে। ধারণাগতভাবে, প্রতিটি পিক্সেলের [Red, Green, Blue, Alpha] রঙের মান ম্যাট্রিক্স-গুণ করে একটি নতুন রঙ তৈরি করা হয় [R′, G′, B′, A′] ।

ম্যাট্রিক্সের প্রতিটি সারিতে 5টি মান রয়েছে: R, G, B, এবং A-এর জন্য (বাম থেকে ডানে) একটি গুণক, পাশাপাশি একটি ধ্রুবক স্থানান্তর মানের জন্য একটি পঞ্চম মান। 4টি সারি রয়েছে: ম্যাট্রিক্সের প্রথম সারিটি নতুন লাল মান গণনা করতে ব্যবহৃত হয়, দ্বিতীয় সারিটি সবুজ, তৃতীয় সারিটি নীল এবং শেষ সারিটি আলফা।

আপনি হয়তো ভাবছেন যে আমাদের উদাহরণে সঠিক সংখ্যাগুলি কোথা থেকে এসেছে। কি এই রঙ ম্যাট্রিক্স deuteranopia একটি ভাল অনুমান করে তোলে? উত্তর হল: বিজ্ঞান! মানগুলি মাচাডো, অলিভেইরা এবং ফার্নান্দেস দ্বারা শারীরবৃত্তীয়ভাবে সঠিক রঙের দৃষ্টি ঘাটতি সিমুলেশন মডেলের উপর ভিত্তি করে।

যাই হোক, আমাদের কাছে এই SVG ফিল্টার আছে, এবং আমরা এখন CSS ব্যবহার করে পৃষ্ঠার নির্বিচারে উপাদানগুলিতে এটি প্রয়োগ করতে পারি। আমরা অন্যান্য দৃষ্টি ঘাটতি জন্য একই প্যাটার্ন পুনরাবৃত্তি করতে পারেন. এটি দেখতে কেমন তা এখানে একটি ডেমো রয়েছে:

আমরা চাইলে, আমরা আমাদের DevTools বৈশিষ্ট্যটি নিম্নরূপ তৈরি করতে পারি: যখন ব্যবহারকারী DevTools UI-তে একটি দৃষ্টি ঘাটতি অনুকরণ করে, তখন আমরা পরিদর্শন করা নথিতে SVG ফিল্টারটি ইনজেক্ট করি এবং তারপরে আমরা রুট উপাদানটিতে ফিল্টার শৈলী প্রয়োগ করি। যাইহোক, এই পদ্ধতির সাথে বেশ কয়েকটি সমস্যা রয়েছে:

  • পৃষ্ঠাটির মূল উপাদানে ইতিমধ্যেই একটি ফিল্টার থাকতে পারে, যা আমাদের কোডটি ওভাররাইড করতে পারে।
  • পৃষ্ঠাটিতে ইতিমধ্যেই id="deuteranopia" সহ একটি উপাদান থাকতে পারে, যা আমাদের ফিল্টার সংজ্ঞার সাথে সাংঘর্ষিক।
  • পৃষ্ঠাটি একটি নির্দিষ্ট DOM কাঠামোর উপর নির্ভর করতে পারে এবং DOM-এ <svg> ঢোকানোর মাধ্যমে আমরা এই অনুমানগুলি লঙ্ঘন করতে পারি।

এজ কেস বাদ দিয়ে, এই পদ্ধতির প্রধান সমস্যা হল আমরা পৃষ্ঠায় প্রোগ্রাম্যাটিকভাবে পর্যবেক্ষণযোগ্য পরিবর্তন করতে চাই । যদি একজন DevTools ব্যবহারকারী DOM পরিদর্শন করে, তাহলে তারা হঠাৎ করে একটি <svg> উপাদান দেখতে পাবে যা তারা কখনও যোগ করেনি, অথবা একটি CSS filter যা তারা কখনও লেখেনি। যে বিভ্রান্তিকর হবে! DevTools-এ এই কার্যকারিতা প্রয়োগ করার জন্য, আমাদের এমন একটি সমাধান প্রয়োজন যাতে এই ত্রুটিগুলি নেই৷

আসুন দেখি কিভাবে আমরা এই কম অনুপ্রবেশকারী করতে পারি। এই সমাধানের দুটি অংশ রয়েছে যা আমাদের লুকিয়ে রাখতে হবে: 1) filter বৈশিষ্ট্য সহ CSS শৈলী এবং 2) SVG ফিল্টার সংজ্ঞা, যা বর্তমানে DOM-এর অংশ৷

<!-- Part 1: the CSS style with the filter property -->
<style>
  :root {
    filter: url(#deuteranopia);
  }
</style>
<!-- Part 2: the SVG filter definition -->
<svg>
  <filter id="deuteranopia">
    <feColorMatrix values="0.367  0.861 -0.228  0.000  0.000
                           0.280  0.673  0.047  0.000  0.000
                          -0.012  0.043  0.969  0.000  0.000
                           0.000  0.000  0.000  1.000  0.000">
    </feColorMatrix>
  </filter>
</svg>

ইন-ডকুমেন্ট এসভিজি নির্ভরতা এড়ানো

পার্ট 2 দিয়ে শুরু করা যাক: কিভাবে আমরা DOM এ SVG যোগ করা এড়াতে পারি? একটি ধারণা হল এটিকে একটি পৃথক SVG ফাইলে সরানো। আমরা উপরের HTML থেকে <svg>…</svg> কপি করে filter.svg হিসাবে সংরক্ষণ করতে পারি — তবে আমাদের প্রথমে কিছু পরিবর্তন করতে হবে! HTML এ ইনলাইন SVG HTML পার্সিং নিয়ম অনুসরণ করে। তার মানে আপনি কিছু ক্ষেত্রে অ্যাট্রিবিউট মানগুলির চারপাশে উদ্ধৃতি বাদ দেওয়ার মতো জিনিসগুলি থেকে দূরে যেতে পারেন। যাইহোক, আলাদা ফাইলে SVG বৈধ XML-এবং XML পার্সিং HTML এর চেয়ে অনেক বেশি কঠোর। এখানে আমাদের এসভিজি-ইন-এইচটিএমএল স্নিপেট আবার আছে:

<svg>
  <filter id="deuteranopia">
    <feColorMatrix values="0.367  0.861 -0.228  0.000  0.000
                           0.280  0.673  0.047  0.000  0.000
                          -0.012  0.043  0.969  0.000  0.000
                           0.000  0.000  0.000  1.000  0.000">
    </feColorMatrix>
  </filter>
</svg>

এই বৈধ স্বতন্ত্র SVG (এবং এইভাবে XML) করতে, আমাদের কিছু পরিবর্তন করতে হবে। আপনি যা অনুমান করতে পারেন? 

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="deuteranopia">
    <feColorMatrix values="0.367  0.861 -0.228  0.000  0.000
                           0.280  0.673  0.047  0.000  0.000
                          -0.012  0.043  0.969  0.000  0.000
                           0.000  0.000  0.000  1.000  0.000" />
  </filter>
</svg>

প্রথম পরিবর্তন হল শীর্ষে XML নামস্থান ঘোষণা। দ্বিতীয় সংযোজন হল তথাকথিত "সলিডাস" — যে স্ল্যাশটি <feColorMatrix> ট্যাগটিকে নির্দেশ করে উভয়ই উপাদানটি খুলে এবং বন্ধ করে। এই শেষ পরিবর্তনটি আসলে প্রয়োজনীয় নয় (এর পরিবর্তে আমরা শুধুমাত্র স্পষ্ট </feColorMatrix> ক্লোজিং ট্যাগে আটকে থাকতে পারি), কিন্তু যেহেতু XML এবং SVG-in-HTML উভয়ই এই /> শর্টহ্যান্ড সমর্থন করে, তাই আমরাও এটি ব্যবহার করতে পারি।

যাইহোক, এই পরিবর্তনগুলির সাথে, আমরা অবশেষে এটিকে একটি বৈধ SVG ফাইল হিসাবে সংরক্ষণ করতে পারি এবং আমাদের HTML নথিতে CSS filter প্রপার্টি মান থেকে এটি নির্দেশ করতে পারি:

<style>
  :root {
    filter: url(filters.svg#deuteranopia);
  }
</style>

হুররাহ, আমাদের আর নথিতে SVG ইনজেক্ট করতে হবে না! যে ইতিমধ্যে অনেক ভাল. কিন্তু... আমরা এখন একটি পৃথক ফাইলের উপর নির্ভরশীল। এটি এখনও একটি নির্ভরতা। আমরা কি কোনভাবে এটি পরিত্রাণ পেতে পারি?

এটি সক্রিয় আউট, আমরা আসলে একটি ফাইল প্রয়োজন নেই. আমরা একটি ডেটা URL ব্যবহার করে একটি URL এর মধ্যে সম্পূর্ণ ফাইলটি এনকোড করতে পারি। এটি ঘটানোর জন্য, আমরা আক্ষরিক অর্থে আমাদের আগে থাকা SVG ফাইলের বিষয়বস্তু গ্রহণ করি, data: উপসর্গ, সঠিক MIME প্রকার কনফিগার করুন এবং আমরা নিজেদেরকে একটি বৈধ ডেটা URL পেয়েছি যা একই SVG ফাইলকে উপস্থাপন করে:

data:image/svg+xml,
  <svg xmlns="http://www.w3.org/2000/svg">
    <filter id="deuteranopia">
      <feColorMatrix values="0.367  0.861 -0.228  0.000  0.000
                             0.280  0.673  0.047  0.000  0.000
                            -0.012  0.043  0.969  0.000  0.000
                             0.000  0.000  0.000  1.000  0.000" />
    </filter>
  </svg>

সুবিধা হল যে এখন, আমাদের আর ফাইলটিকে কোথাও সংরক্ষণ করতে হবে না, বা এটিকে আমাদের HTML নথিতে ব্যবহার করার জন্য ডিস্ক থেকে বা নেটওয়ার্কে লোড করতে হবে না। সুতরাং আমরা আগে যেমন ফাইলের নাম উল্লেখ করার পরিবর্তে, আমরা এখন ডেটা URL নির্দেশ করতে পারি:

<style>
  :root {
    filter: url('data:image/svg+xml,\
      <svg xmlns="http://www.w3.org/2000/svg">\
        <filter id="deuteranopia">\
          <feColorMatrix values="0.367  0.861 -0.228  0.000  0.000\
                                 0.280  0.673  0.047  0.000  0.000\
                                -0.012  0.043  0.969  0.000  0.000\
                                 0.000  0.000  0.000  1.000  0.000" />\
        </filter>\
      </svg>#deuteranopia');
  }
</style>

URL-এর শেষে, আমরা এখনও আগের মতো যে ফিল্টারটি ব্যবহার করতে চাই তার আইডি নির্দিষ্ট করি। মনে রাখবেন যে ইউআরএল-এ SVG ডকুমেন্টটিকে Base64-এনকোড করার কোন প্রয়োজন নেই—এটি করলে শুধুমাত্র পঠনযোগ্যতা ক্ষতিগ্রস্ত হবে এবং ফাইলের আকার বৃদ্ধি পাবে। আমরা প্রতিটি লাইনের শেষে ব্যাকস্ল্যাশ যোগ করেছি যাতে নিশ্চিত করা যায় যে ডেটা ইউআরএলে নতুন লাইনের অক্ষরগুলি সিএসএস স্ট্রিং লিটারেলকে শেষ না করে।

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

AtomicString CreateFilterDataUrl(const char* piece) {
  AtomicString url =
      "data:image/svg+xml,"
        "<svg xmlns=\"http://www.w3.org/2000/svg\">"
          "<filter id=\"f\">" +
            StringView(piece) +
          "</filter>"
        "</svg>"
      "#f";
  return url;
}

এবং আমাদের প্রয়োজনীয় সমস্ত ফিল্টার তৈরি করতে আমরা কীভাবে এটি ব্যবহার করছি তা এখানে:

AtomicString CreateVisionDeficiencyFilterUrl(VisionDeficiency vision_deficiency) {
  switch (vision_deficiency) {
    case VisionDeficiency::kAchromatopsia:
      return CreateFilterDataUrl("…");
    case VisionDeficiency::kBlurredVision:
      return CreateFilterDataUrl("<feGaussianBlur stdDeviation=\"2\"/>");
    case VisionDeficiency::kDeuteranopia:
      return CreateFilterDataUrl(
          "<feColorMatrix values=\""
          " 0.367  0.861 -0.228  0.000  0.000 "
          " 0.280  0.673  0.047  0.000  0.000 "
          "-0.012  0.043  0.969  0.000  0.000 "
          " 0.000  0.000  0.000  1.000  0.000 "
          "\"/>");
    case VisionDeficiency::kProtanopia:
      return CreateFilterDataUrl("…");
    case VisionDeficiency::kTritanopia:
      return CreateFilterDataUrl("…");
    case VisionDeficiency::kNoVisionDeficiency:
      NOTREACHED();
      return "";
  }
}

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

ঠিক আছে, তাই আমরা বের করেছি কিভাবে SVG ফিল্টার তৈরি করা যায় এবং সেগুলিকে ডেটা URL-এ রূপান্তর করা যায় যা আমরা আমাদের CSS filter প্রপার্টি মানের মধ্যে ব্যবহার করতে পারি। আপনি এই কৌশল সঙ্গে একটি সমস্যা চিন্তা করতে পারেন? দেখা যাচ্ছে, আমরা আসলে সব ক্ষেত্রে ডেটা ইউআরএল লোড করার উপর নির্ভর করতে পারি না, যেহেতু টার্গেট পৃষ্ঠায় একটি Content-Security-Policy থাকতে পারে যা ডেটা URL গুলিকে ব্লক করে। লোড করার সময় এই "অভ্যন্তরীণ" ডেটা URLগুলির জন্য CSP বাইপাস করার জন্য আমাদের চূড়ান্ত ব্লিঙ্ক-স্তরের বাস্তবায়ন বিশেষ যত্ন নেয়।

এজ কেস একপাশে, আমরা কিছু ভাল অগ্রগতি করেছি। যেহেতু আমরা আর ইনলাইন <svg> একই নথিতে উপস্থিত থাকার উপর নির্ভর করি না, তাই আমরা কার্যকরভাবে আমাদের সমাধানকে শুধুমাত্র একটি স্বয়ংসম্পূর্ণ CSS filter প্রপার্টি সংজ্ঞাতে কমিয়ে দিয়েছি। দারুণ! এবার সেটাও বাদ দেওয়া যাক।

ইন-ডকুমেন্ট সিএসএস নির্ভরতা এড়ানো

শুধু সংক্ষেপে, আমরা এখন পর্যন্ত এখানেই আছি: 

<style>
  :root {
    filter: url('data:…');
  }
</style>

আমরা এখনও এই CSS filter সম্পত্তির উপর নির্ভর করি, যা বাস্তব নথিতে একটি filter ওভাররাইড করতে পারে এবং জিনিসগুলি ভেঙে দিতে পারে। DevTools-এ গণনা করা শৈলীগুলি পরিদর্শন করার সময়ও এটি প্রদর্শিত হবে, যা বিভ্রান্তিকর হবে। কিভাবে আমরা এই সমস্যাগুলি এড়াতে পারি? আমাদের ডকুমেন্টে একটি ফিল্টার যোগ করার উপায় খুঁজে বের করতে হবে এটি বিকাশকারীদের কাছে প্রোগ্রাম্যাটিকভাবে পর্যবেক্ষণযোগ্য না হয়ে।

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

CSS স্পেকের একটি বিভাগ রয়েছে যা এটি ব্যবহার করে ভিজ্যুয়াল ফরম্যাটিং মডেলের সাথে পরিচয় করিয়ে দেয় এবং সেখানে মূল ধারণাগুলির মধ্যে একটি হল ভিউপোর্ট । এটি সেই ভিজ্যুয়াল ভিউ যার মাধ্যমে ব্যবহারকারীরা ওয়েব পেজের সাথে পরামর্শ করে। একটি ঘনিষ্ঠভাবে সম্পর্কিত ধারণা হল প্রাথমিক ধারণকারী ব্লক , যা একধরনের শৈলীযোগ্য ভিউপোর্ট <div> এর মত যা শুধুমাত্র বিশেষ স্তরে বিদ্যমান। স্পেকটি সমস্ত জায়গায় এই "ভিউপোর্ট" ধারণাটিকে বোঝায়। উদাহরণস্বরূপ, আপনি জানেন কিভাবে ব্রাউজার স্ক্রলবার দেখায় যখন বিষয়বস্তু ফিট না? এই "ভিউপোর্ট" এর উপর ভিত্তি করে এই সমস্ত সিএসএস স্পেসিকে সংজ্ঞায়িত করা হয়েছে।

এই viewport ব্লিঙ্ক রেন্ডারারের মধ্যেও বিদ্যমান, একটি বাস্তবায়নের বিবরণ হিসাবে। এখানে সেই কোডটি রয়েছে যা স্পেস অনুযায়ী ডিফল্ট ভিউপোর্ট শৈলী প্রয়োগ করে: 

scoped_refptr<ComputedStyle> StyleResolver::StyleForViewport() {
  scoped_refptr<ComputedStyle> viewport_style =
      InitialStyleForElement(GetDocument());
  viewport_style->SetZIndex(0);
  viewport_style->SetIsStackingContextWithoutContainment(true);
  viewport_style->SetDisplay(EDisplay::kBlock);
  viewport_style->SetPosition(EPosition::kAbsolute);
  viewport_style->SetOverflowX(EOverflow::kAuto);
  viewport_style->SetOverflowY(EOverflow::kAuto);
  // …
  return viewport_style;
}

এই কোডটি ভিউপোর্টের (বা আরও সঠিকভাবে: প্রাথমিক ধারণকারী ব্লকের) z-index , display , position এবং overflow পরিচালনা করে তা দেখতে আপনাকে C++ বা Blink এর স্টাইল ইঞ্জিনের জটিলতা বোঝার দরকার নেই। এই সব ধারণা আপনি CSS থেকে পরিচিত হতে পারে! স্ট্যাকিং প্রসঙ্গগুলির সাথে সম্পর্কিত কিছু অন্য যাদু আছে, যা সরাসরি কোনও CSS সম্পত্তিতে অনুবাদ করে না, তবে সামগ্রিকভাবে আপনি এই viewport অবজেক্টটিকে এমন কিছু হিসাবে ভাবতে পারেন যা ব্লিঙ্কের মধ্যে থেকে CSS ব্যবহার করে স্টাইল করা যেতে পারে, ঠিক একটি DOM উপাদানের মতো—ব্যতীত এটি নয় DOM এর অংশ।

আমরা যা চাই তা আমাদের দেয়! আমরা আমাদের filter শৈলীগুলি viewport অবজেক্টে প্রয়োগ করতে পারি, যা দৃশ্যত রেন্ডারিংকে প্রভাবিত করে, কোনোভাবেই পর্যবেক্ষণযোগ্য পৃষ্ঠা শৈলী বা DOM-এর সাথে হস্তক্ষেপ না করে।

উপসংহার

এখানে আমাদের ছোট্ট যাত্রার সংক্ষিপ্তসারের জন্য, আমরা C++ এর পরিবর্তে ওয়েব প্রযুক্তি ব্যবহার করে একটি প্রোটোটাইপ তৈরি করে শুরু করেছি এবং তারপর এটির কিছু অংশ ব্লিঙ্ক রেন্ডারারে নিয়ে যাওয়ার কাজ শুরু করেছি।

  • আমরা প্রথমে ডেটা ইউআরএল ইনলাইন করে আমাদের প্রোটোটাইপকে আরও স্বয়ংসম্পূর্ণ করে তুলেছি।
  • তারপরে আমরা সেই অভ্যন্তরীণ ডেটা URLগুলিকে CSP-বান্ধব করেছিলাম, বিশেষ-কেসিং করে তাদের লোডিং করে৷
  • ব্লিঙ্ক-অভ্যন্তরীণ viewport শৈলীগুলি সরানোর মাধ্যমে আমরা আমাদের বাস্তবায়ন DOM-অজ্ঞেয়বাদী এবং প্রোগ্রামগতভাবে পর্যবেক্ষণযোগ্য করে তুলেছি।

এই বাস্তবায়নের অনন্য বিষয় হল আমাদের HTML/CSS/SVG প্রোটোটাইপ চূড়ান্ত প্রযুক্তিগত নকশাকে প্রভাবিত করে। আমরা ওয়েব প্ল্যাটফর্ম ব্যবহার করার একটি উপায় খুঁজে পেয়েছি, এমনকি ব্লিঙ্ক রেন্ডারারের মধ্যেও!

আরও পটভূমির জন্য, আমাদের নকশা প্রস্তাব বা Chromium ট্র্যাকিং বাগ দেখুন যা সমস্ত সম্পর্কিত প্যাচগুলিকে উল্লেখ করে৷

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসাবে Chrome Canary , Dev , বা Beta ব্যবহার করার কথা বিবেচনা করুন৷ এই প্রিভিউ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম APIগুলি পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের করার আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

নতুন বৈশিষ্ট্য, আপডেট বা DevTools সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷

  • crbug.com এ আমাদের কাছে প্রতিক্রিয়া এবং বৈশিষ্ট্যের অনুরোধ জমা দিন।
  • আরও বিকল্প > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন।
  • @ ChromeDevTools-এ টুইট করুন।
  • DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷