প্রস্তাবিত <অনুমতি> উপাদান

Thomas Steiner

প্রকাশিত: ১২ মে, ২০২৫

প্রস্তাবিত HTML <permission> উপাদানটি এখনও অরিজিন ট্রায়ালে রয়েছে, কারণ Chrome টিম এটিকে পরিমার্জন করছে, আমাদের প্রাথমিক অরিজিন ট্রায়ালের ভিত্তির উপর ভিত্তি করে। এই পোস্টে এমন উন্নতিগুলি ভাগ করা হয়েছে যা ওয়েব অ্যাপ্লিকেশনগুলির মধ্যে অনুমতির অনুরোধ করার সময় আপনাকে আরও নমনীয়তা এবং নিয়ন্ত্রণ প্রদানের লক্ষ্যে কাজ করে। <permission> উপাদানের ভূমিকা এবং এর প্রাথমিক ক্ষমতা সম্পর্কে একটি বিস্তৃত সারসংক্ষেপের জন্য, আমাদের পূর্ববর্তী নিবন্ধটি একটি নতুন HTML <permission> উপাদানের জন্য অরিজিন ট্রায়াল পড়ুন।

ফলব্যাক UX-এর জন্য কন্টেন্ট সাপোর্ট

<permission> এলিমেন্টটি প্রথমে Chrome 136 পর্যন্ত একটি void এলিমেন্ট হিসেবে সংজ্ঞায়িত করা হয়েছিল যেখানে কন্টেন্ট থাকে না। Chrome 137 থেকে এটি কন্টেন্ট সাপোর্ট করে, যার অর্থ এখন এটিকে opening এবং closing ট্যাগ দিয়ে চিহ্নিত করতে হবে :

<permission>
  <!-- optional content -->
</permission>

এই পরিবর্তনের মাধ্যমে আপনি উপাদানের কন্টেন্টের মধ্যে ফলব্যাক ইউজার ইন্টারফেস অন্তর্ভুক্ত করতে পারবেন। এই ফলব্যাকগুলি এমন ব্রাউজারগুলিতে প্রদর্শিত হয় যা <permission> উপাদান সমর্থন করে না অথবা যখন একটি অসমর্থিত type অ্যাট্রিবিউট নির্দিষ্ট করা থাকে। এটি বিভিন্ন ব্রাউজার পরিবেশে আরও সুন্দর অবক্ষয় এবং উন্নত ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করে।

<!-- Invalid `type` attribute value -->
<permission type="not-supported">
  <p>Your browser does not support the specified <code>type</code>.</p>
</permission>

আরও বিস্তারিত প্রোগ্রাম্যাটিক বৈশিষ্ট্য সনাক্তকরণ

নির্দিষ্ট অনুমতির ধরণগুলির জন্য সমর্থন নির্ধারণে আপনাকে সাহায্য করার জন্য, আমরা একটি স্ট্যাটিক পদ্ধতি চালু করেছি, isTypeSupported() :

HTMLPermissionElement.isTypeSupported('geolocation');

এই পদ্ধতিটি একটি বুলিয়ান প্রদান করে যা নির্দেশ করে যে নির্দিষ্ট অনুমতির ধরণটি সমর্থিত কিনা। বিদ্যমান বৈশিষ্ট্য সনাক্তকরণের সাথে মিলিত হয়ে, typeof HTMLPermissionElement !== 'undefined' , আপনি এখন প্রোগ্রাম্যাটিকভাবে নিশ্চিত করতে পারেন যে <permission> উপাদান এবং নির্দিষ্ট অনুমতির ধরণ উভয়ই সমর্থন করে।

মনে রাখবেন যে আপনি একাধিক স্পেস-সেপারেটেড পারমিশন টাইপও পাস করতে পারেন (উদাহরণস্বরূপ, "camera microphone" ) এবং এটি সামগ্রিক স্ট্রিংটি একটি বৈধ "type" মান কিনা তা ফেরত দেবে। উদাহরণস্বরূপ, নিম্নলিখিত প্যারামিটারগুলি সহ isTypeSupported() কল করলে এই ফলাফলগুলি ফেরত আসে:

• "camera" → true
• "geolocation" → true
• "camera geolocation" → false (যদিও প্রকারগুলি পৃথকভাবে সমর্থিত, সমন্বয়টি নয়।)

আপডেট করা ইভেন্টের নাম

Chrome 136-এ, আমরা আগের ইভেন্টগুলি প্রতিস্থাপনের জন্য দুটি নতুন ইভেন্ট চালু করেছি:

• onpromptdismiss ( ondismiss প্রতিস্থাপন করে)
• onpromptaction ( onresolve প্রতিস্থাপন করে)

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

আইকন সমর্থন

আমরা Chrome 138 এর জন্য লক্ষ্যযুক্ত <permission> এলিমেন্টের মধ্যে আইকন সাপোর্ট সক্ষম করার জন্য কাজ করছি। এই বৈশিষ্ট্যটি আপনাকে অনুমতির ধরণের সাথে সম্পর্কিত পূর্বনির্ধারিত আইকনগুলি প্রদর্শন করতে দেবে, রঙ এবং আকার সমন্বয়ের মতো সীমিত স্টাইলিং বিকল্পগুলির সাথে। সঠিক API বিবরণ এখনও চূড়ান্ত করা হচ্ছে। 

নিম্নলিখিত উদাহরণগুলি ডিফল্ট, একটি ভিন্ন ফিল রঙ এবং কোনও ফিল রঙ দেখায় না তবে একটি কালো রূপরেখা সহ।

ডিফল্ট স্টাইলিং

আইকনের ডিফল্ট রঙ অনুমতি উপাদানের টেক্সট রঙের মতোই।

পরিবর্তিত স্টাইলিং

নিম্নলিখিত উদাহরণগুলি ডিফল্ট স্টাইলিংয়ে অনুকরণীয় পরিবর্তনগুলি দেখায়।

আইকনের রঙ পরিবর্তন

::permission-icon {
  fill: black;
}

আইকনের রূপরেখার পরিবর্তন

::permission-icon {
  fill: white;
  stroke: black;
  stroke-width: 20px;
}

আইকনটি অক্ষম করুন

একবার এটি চালু হয়ে গেলে, আইকনটি ডিফল্টরূপে সক্রিয় থাকবে। আপনি যদি আইকনটি নিষ্ক্রিয় করতে চান, তাহলে নিম্নলিখিত CSS ব্যবহার করে এটি করা যেতে পারে।

::permission-icon {
  display: none;
}

স্টাইল নির্দেশিকা

<permission> উপাদানের স্টাইলিং সম্পর্কে বিস্তারিত নির্দেশনার জন্য, যার মধ্যে সর্বোত্তম অনুশীলন এবং বিধিনিষেধ অন্তর্ভুক্ত রয়েছে, <permission> স্টাইলিং নির্দেশিকা দেখুন। এই রিসোর্সে আপনার অ্যাপ্লিকেশনের মধ্যে উপাদানটিকে কার্যকরভাবে স্টাইল করতে সাহায্য করার জন্য বিস্তারিত নির্দেশাবলী প্রদান করা হয়েছে।

বর্ধিত প্ল্যাটফর্ম এবং সক্ষমতা সমর্থন

<permission> উপাদানটি এখন অতিরিক্ত প্ল্যাটফর্ম এবং ক্ষমতা সমর্থন করে:

• অ্যান্ড্রয়েড সাপোর্ট: এই এলিমেন্টটি এখন অ্যান্ড্রয়েড ডিভাইসেও কার্যকর, যা বিভিন্ন ব্যবহারকারী প্ল্যাটফর্মে এর প্রযোজ্যতা বৃদ্ধি করেছে।
• জিওলোকেশন সাপোর্ট: আপনি এখন <permission> এলিমেন্ট ব্যবহার করে একটি অতিরিক্ত preciselocation boolean অ্যাট্রিবিউট ব্যবহার করে type="geolocation" অনুমতির অনুরোধ করতে পারেন। যদিও preciselocation অ্যাট্রিবিউট শুধুমাত্র প্রম্পটের শব্দের উপর প্রভাব ফেলে, আমরা ভবিষ্যতের আপডেটগুলিতে মোটা এবং সুনির্দিষ্ট অবস্থানের অনুমতির মধ্যে পার্থক্য করার জন্য সক্রিয়ভাবে কাজ করছি।

উপসংহার

<permission> উপাদানের এই বর্ধিতকরণগুলি অনুমতি অনুরোধগুলিকে সহজতর করার এবং ওয়েবে ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য আমাদের চলমান প্রচেষ্টার অংশ। আমরা আপনাকে এই নতুন বৈশিষ্ট্যগুলি নিয়ে পরীক্ষা-নিরীক্ষা করতে এবং এই ক্ষমতাটি পরিমার্জন এবং বিকাশে আমাদের সহায়তা করার জন্য প্রতিক্রিয়া প্রদান করতে উৎসাহিত করছি।