আগ্রহের ইনভোকার এপিআই (হোভার-ট্রিগারযুক্ত পপওভারগুলির জন্য) প্রথম চেহারা

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

আপনি এটি এর মতো ব্যবহার করবেন:

<a interestfor="target-id">Interest trigger</a>
<div id="target-id" popover>Interest target</div>

এটি কোথাও বলা হয়নি যে তাদের অবশ্যই পপওভার হিসাবে ঘোষণা করা উচিত, তবে তারা কর সঠিক অ্যাক্সেসযোগ্যতা ইঙ্গিত করে।

আমি এই বৈশিষ্ট্যের টুকরোগুলি দেখার জন্য কিছুটা সময় ব্যয় করতে চাই, কীভাবে তারা বর্তমানে প্রস্তাবিত হিসাবে ব্যবহৃত হয় এবং তাদের সাথে আমার অভিজ্ঞতার ভিত্তিতে কয়েকটি চিন্তাভাবনা সরবরাহ করে।

ডুব দিতে প্রস্তুত?

আগ্রহ ট্রিগার

দ্য ট্রিগার ব্যবহারকারী কি ঘোরাফেরা করবে (বা টাচস্ক্রিন ডিভাইসে দীর্ঘ-চাপ) আগ্রহের লক্ষ্য প্রকাশ করা। আমি এটিকে একটি “ইনভোকার” বলব, তবে এটির সাথে বিভ্রান্ত হওয়া এড়াতে ইনভোকার কমান্ড এপিআই (যা একই ধরণের), আমি আপাতত “ট্রিগার” বা “সুদের ট্রিগার” দিয়ে আটকে থাকব।

সুদের ট্রিগার হতে পারে:

• একটি লিঙ্ক (<a>),
• একটি বোতাম (<button>), বা
• একটি চিত্র মানচিত্রের অঞ্চল (<area>)।

এবং এটি থাকা উচিত interestfor বৈশিষ্ট্য যার মান উল্লেখ করা উচিত id আগ্রহের লক্ষ্য। প্রতিটি সমর্থিত উপাদানগুলির জন্য এখানে উদাহরণ রয়েছে:

<!-- Link -->
<a interestfor="link">Interest trigger</a>
<div id="link" popover>Interest target</div>

<!-- Button -->
<button interestfor="button">Interest trigger</button>
<div id="button" popover>Interest target</div>

<!-- Image map -->
<img src="" alt="" usemap="#map">
<map name="map">
  <area interestfor="area" shape="" coords="" alt="">
</map>
<div id="area" popover>Interest target</div>

যদি আগ্রহের লক্ষ্য হয় একটি popover (যেমন এটি উপরের উদাহরণগুলিতে রয়েছে), তারপরে interestfor বৈশিষ্ট্য প্রতিস্থাপন popovertarget বৈশিষ্ট্য যা সাধারণত ঘোষণামূলক পপওভারগুলির জন্য প্রয়োজনীয়। সুতরাং, এর পরিবর্তে:

<!-- Button -->
<button popovertarget="button">Interest trigger</button>
<div id="button" popover>Interest target</div>

… আমরা এটি দেখছি:

<!-- Button -->
<button interestfor="button">Interest trigger</button>
<div id="button" popover>Interest target</div>

আগ্রহের লক্ষ্য

দ্য সুদের লক্ষ্য যখন ব্যবহারকারী সুদের ট্রিগারটি (বা দীর্ঘ-চাপ) ঘোরাফেরা করে তখন তা প্রকাশিত হয়। আবার, এটি একটি হওয়া উচিত popoverএবং সঠিক ধরণের পপওভার ব্যবহার করা গুরুত্বপূর্ণ কারণ তাদের বিভিন্ন কার্যকরী এবং অ্যাক্সেসযোগ্যতার আচরণ রয়েছে।

popover যে বৈশিষ্ট্যগুলি মূল্যহীন, খালি, বা ব্যবহার করুন auto কীওয়ার্ডটি হালকাভাবে বরখাস্ত করা যেতে পারে, অর্থাত্, ব্যবহার করে esc কী, বা পপওভারের বাইরে ক্লিক করে। যখন খোলা হয়, এই পপওভারগুলি সমস্ত বন্ধ করে দেয় hint এবং অন্যান্য auto পপওভারগুলি (কমপক্ষে, যেগুলি নেস্টেড নয়)।

<div id="target-id" popover>Interest target</div>

<!-- Equivalent to -->
<div id="target-id" popover="">Interest target</div>

<!-- Equivalent to -->
<div id="target-id" popover="auto">Interest target</div>

hint পপওভারগুলি (নতুন ধরণের পপওভারগুলি) হালকাভাবে বরখাস্ত করা যেতে পারে তবে কেবল অন্যটি বন্ধ করুন hint পপওভারগুলি খোলার সময়:

<div id="target-id" popover="hint">Interest target</div>

manual পপওভারগুলি তাদের নিজস্ব কাজ করে। এগুলি হালকাভাবে বরখাস্ত করা যায় না, অন্য পপওভারগুলি কী করতে হবে তা বলবেন না এবং আমরা একবারে তাদের মধ্যে একাধিক খোলা থাকতে পারি। তারা সুউপার শীতল

<div id="target-id" popover="manual">Interest target</div>

যাইহোক, ওপেন ইউআই এর ব্যাখ্যাকারী এবং ক্রোমের বর্তমান বাস্তবায়নের পরামর্শ দেয় যে আগ্রহের লক্ষ্যগুলি অদৃশ্য হয়ে যায় mouseleave আমরা যে ধরণের পপওভার নিয়ে কাজ করছি তা নির্বিশেষে। তবে এই প্রসঙ্গে (বা কোনও প্রসঙ্গে) পপওভার আচরণকে নতুন করে সংজ্ঞায়িত করা আমার কাছে ভুল মনে করে। যদি আগ্রহের লক্ষ্য popover অ্যাট্রিবিউট সেট করা হয় manualউদাহরণস্বরূপ, এটি পরে থাকা উচিত নয় mouseleave?

ওপেন ইউআই ব্রাউজারগুলিতে অ্যাক্সেসযোগ্যতা বেকিং আলোচনা করে পপওভারের ধরণের উপর নির্ভর করে, যা পপওভারগুলি বন্ধ করে দেওয়ার জন্য আগ্রহী আহ্বানকারীদের ন্যায়সঙ্গত করে তোলে, তবে আমি মনে করি অ্যাক্সেসযোগ্যতা পপওভারের ধরণের পরিবর্তে সামগ্রীর উপর নির্ভর করে (এআরআইএ বৈশিষ্ট্যগুলি ব্যবহার করে ওভাররাইট করা না করা) নির্ভর করা উচিত।

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

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

এটি বলেছিল, কিছু জাভাস্ক্রিপ্ট ইভেন্ট রয়েছে যা আমরাও ব্যবহার করতে পারি। আসুন তাদের একবার দেখে নেওয়া যাক।

সুদের ইনভোকার জাভাস্ক্রিপ্ট ইভেন্ট

যদিও আমি কল্পনা করি যে আপনাকে কেবল এটি শুনতে হবে interest এবং loseinterestevents নির্দিষ্ট প্রান্তের ক্ষেত্রে, এই নতুন ঘোষণামূলক এইচটিএমএল বৈশিষ্ট্যগুলির জন্য জাভাস্ক্রিপ্ট ইভেন্টগুলি মোটামুটি স্ট্যান্ডার্ড, এবং সেগুলি সেখানে আপনার প্রয়োজন হওয়া উচিত:

interestTrigger.addEventListener("interest", () => {
  /* User showed interest */
});

interestTrigger.addEventListener("loseinterest", () => {
  /* User lost interest */
});

তবে “আগ্রহ” এর অর্থ কী? এটি পরবর্তী খনন করার মতো।

সুদের বিলম্ব (এবং এর সমস্ত সিএসএস)

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

এখানে আবার ডেমো রয়েছে, যাতে আপনি এটি চেষ্টা করে দেখতে পারেন (ক্রোম 139 বা আপাতত ক্যানারিতে):

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

এই বলে যে, যদি আগ্রহের লক্ষ্যটি আপত্তিজনক হয় তবে শোতে বিলম্ব অপসারণ কোনও ক্ষতি করতে হবে না। আপনি কীবোর্ড এবং স্ক্রিন রিডার ব্যবহারকারীদের জন্য আড়াল বিলম্বও সরিয়ে ফেলতে পারেন, যারা দুর্ঘটনাক্রমে “আগ্রহ হারাতে” সম্ভাবনা নেই। আমরা দুটি নতুন সিএসএস বৈশিষ্ট্য সেট করে এটি করতে পারি, interest-show-delay এবং interest-hide-delayথেকে 0। ডিফল্ট হয় 0.5s এবং সুদের ট্রিগার উপর সেট করা আছে (তবে সুদের লক্ষ্য নয়):

/* If unobtrusive */
.unobtrusive(interestfor) {
  interest-show-delay: 0;
}

/* If keyboard-focused on a trigger */
(interestfor):focus-visible {
  interest-hide-delay: 0;
}

/*
  If keyboard-focused within a target of interest,
  or target of partial interest (these are always keyboard-triggered),
  the interest trigger that currently has interest
  or partial interest has the hide delay removed
*/
body:has(:target-of-interest :focus-visible, :target-of-partial-interest) (interestfor):where(:has-interest, :has-partial-interest) {
  interest-hide-delay: 0;
}

দ্রষ্টব্য: সুদের বিলম্ব বর্তমানে বগি, বিশেষত ইউনিটলেস মান সহ। কখনও কখনও তারা কাজ করে, কখনও তারা না।

এই সিউডো-সিলেক্টর সম্পর্কে, যদিও…

মূলত, কীবোর্ড বা স্ক্রিন রিডার ব্যবহার করে কোনও আগ্রহের ট্রিগারে নেভিগেট করার সময় যার লক্ষ্যটিতে আরও ফোকাসযোগ্য উপাদান রয়েছে, এটিকে “আংশিক” আগ্রহ দেখানো হিসাবে উল্লেখ করা হয়। (আমি ব্যক্তিগতভাবে “সম্ভাব্য আগ্রহ” নিয়ে চলে যেতাম, তবে আমি খনন করি)) যখন এটি ঘটে তখন আগ্রহের লক্ষ্যটির ফোকাসযোগ্য উপাদানগুলি আসলে ফোকাসযোগ্য নয় (প্রয়োজনে তাদের এড়িয়ে যাওয়া সহজ করে তোলে) যদি না ব্যবহারকারী না হয় বিকল্প+আপ/Alt+আপ কীবোর্ড শর্টকাট বা সমতুল্য স্ক্রিন রিডার হটকি।

এমনকি এমন একটি বার্তা রয়েছে যা আমরা লক্ষ্য করে কাস্টমাইজ করতে পারি :target-of-partial-interest::after::

:target-of-partial-interest::after { 
  content: "Press ⌥↑ to activate.";
}

যদিও আপনি সম্ভবত বার্তার সামগ্রীটি পরিবর্তন করবেন না (যেহেতু এটি ডিফল্টরূপে ব্যবহারকারীর ডিভাইসের জন্য সঠিক কীবোর্ড শর্টকাট প্রদর্শন করে), আমরা এইভাবে নির্বাচন করে এটি স্টাইল করতে পারি।

ব্যবহারকারী এজেন্টও ছুড়ে দেয় এই মধ্যে:

:target-of-partial-interest {
  interactivity: not-keyboard-focusable;
}

দ্য not-keyboard-focusable মানটি নতুন, এবং কীবোর্ড ফোকাসকে বাধা দেয় (লাইক tabindex="-1" তবে সিএসএসের জন্য, যা এটি নিজস্বভাবে আকর্ষণীয়)।

একটি সম্পূর্ণ ভাঙ্গন কারণ, সত্যি বলতে, এটি ছিল অনেক::

• :has-interest:: “মাউস আগ্রহ” দিয়ে ট্রিগার
• :has-partial-interest:: “কীবোর্ড আগ্রহ” দিয়ে ট্রিগার
• :target-of-interest:: মাউস সুদের সাথে লক্ষ্য
• :target-of-partial-interest:: কীবোর্ডের সুদের সাথে লক্ষ্যগুলি
• :target-of-partial-interest::after:: লক্ষ্যগুলি যখন কীবোর্ডের আগ্রহ থাকে তখন প্রদর্শিত বার্তাটি
• interest-show-delay:: দ্য <time> যার আগে আগ্রহের লক্ষ্য উপস্থিত হয়
• interest-hide-delay:: দ্য <time> যার আগে আগ্রহের লক্ষ্য অদৃশ্য হয়ে যায়
• interest-delay:: শর্টহ্যান্ড জন্য interest-show-delay এবং interest-hide-delay

এটি নোঙ্গরগুলির সাথেও কাজ করে

আমরা ইতিমধ্যে যা আলোচনা করেছি তা এখানে সত্যিই নতুন কিছুই নয়, তবে আমি এটি শীতল মনে করি যা আমরা ব্যবহার করতে পারি অ্যাঙ্কর উপাদান সুদের আহ্বানকারীদের মতো ঘোষিতভাবে:

উপসংহার

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

তবে আরও কিছু বিবেচনা করার আছে। উদাহরণস্বরূপ, আমরা কীভাবে টাচস্ক্রিন ডিভাইসে আগ্রহের লক্ষ্যগুলি খুলব? প্রসঙ্গ মেনু থেকে লং-প্রেস + “আরও তথ্য দেখুন” এই মুহুর্তে সেরা পন্থা বলে মনে হচ্ছে তবে এটি একটি শক্ত!

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

সম্মানজনক উল্লেখ: আমরাও পাচ্ছি interactivity: not-keyboard-focusable এর মধ্যে, যা আমাদের সিএসএস সহ কীবোর্ড-বান্ধব উপাদানগুলি তৈরি করতে সহায়তা করতে পারে।

এখানে ভালবাসার মতো অনেক কিছুই রয়েছে এবং আমি কেবল জানি যে লোকেরা অবিশ্বাস্য সরঞ্জামপিপগুলি এবং হোভার কার্ড তৈরি করতে চলেছে এবং এর সাথে আরও অনেক কিছু তৈরি করতে চলেছে।