কখন পাঠ্য নির্বাচন অক্ষম করা ঠিক হবে?

CSS ব্যবহার করে, ব্যবহারকারীদের ব্যবহার করে একটি উপাদানের মধ্যে পাঠ্য নির্বাচন করা থেকে আটকানো সম্ভব user-select: none. এখন, এটা বোধগম্য যে কেন এটি করাকে "বিতর্কিত" হিসাবে বিবেচনা করা যেতে পারে। আমি বলতে চাইতেছি, উচিত আমরা স্ট্যান্ডার্ড ব্যবহারকারী আচরণ নিষ্ক্রিয় করা হবে? সাধারণভাবে বলতে গেলে, না, আমাদের এটা করা উচিত নয়. কিন্তু পাঠ্য নির্বাচন অক্ষম করার কিছু বৈধ (যদিও বিরল) ব্যবহার-ক্ষেত্র আছে? আমি তাই মনে করি.

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

সম্ভব user-select মূল্যবোধ

এর বিভিন্ন মাধ্যমে চলমান দ্বারা জিনিষ বন্ধ কিক করা যাক user-select মান এবং তারা কি করে।

প্রয়োগ করা হচ্ছে user-select: none; একটি উপাদানের অর্থ হল এর পাঠ্য সামগ্রী এবং নেস্টেড পাঠ্য সামগ্রী কার্যকরীভাবে নির্বাচনযোগ্য বা দৃশ্যত নির্বাচনযোগ্য হবে না (যেমন ::selection কাজ করবে না)। আপনি যদি এমন একটি নির্বাচন করতে চান যাতে কিছু অ-নির্বাচনযোগ্য বিষয়বস্তু থাকে, তাহলে অ-নির্বাচনযোগ্য বিষয়বস্তু নির্বাচন থেকে বাদ দেওয়া হবে, তাই এটি মোটামুটিভাবে প্রয়োগ করা হয়েছে। এবং সমর্থন মহান.

বিরূপভাবে, user-select: text বিষয়বস্তু নির্বাচনযোগ্য করে তোলে। আপনি এই মানটি ওভাররাইট করতে ব্যবহার করবেন user-select: none.

user-select: contain একটি আকর্ষণীয় এক. এটি প্রয়োগ করার অর্থ হল যে যদি একটি নির্বাচন উপাদানের মধ্যে শুরু হয় তবে এটি অবশ্যই এটির মধ্যে শেষ হবে, এটি ধারণ করে। নির্বাচন শুরু হলে এটি অদ্ভুতভাবে প্রযোজ্য নয় আগে উপাদান, যাইহোক, সম্ভবত এই কারণেই কোন ব্রাউজার বর্তমানে এটি সমর্থন করে না। (ইন্টারনেট এক্সপ্লোরার এবং মাইক্রোসফ্ট এজ এর পূর্ববর্তী সংস্করণগুলি এর ছদ্মবেশে এটিকে সমর্থন করেছিল user-select: element.)

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

সতর্কতা অবলম্বন করুন, যেহেতু এটি সর্বদা আপনার মনে হয় এমন বৈশিষ্ট্য নয়। ব্যবহারকারীরা শুধুমাত্র নির্বাচন করতে চান তাহলে কি অংশ বিষয়বস্তুর (যেমন শুধুমাত্র একটি Google ফন্ট স্নিপেটের ফন্ট নামের অংশ বা একটি কোড স্নিপেটের একটি অংশ)? এটা এখনও হ্যান্ডেল করা ভাল”ক্লিপবোর্ডে অনুলিপি করুন” অনেক পরিস্থিতিতে জাভাস্ক্রিপ্ট ব্যবহার করে।

একটি ভাল আবেদন user-select: all উদ্ধৃতি সম্পূর্ণরূপে এবং নির্ভুলভাবে অনুলিপি করা হয়েছে তা নিশ্চিত করা।

এর আচরণ user-select: auto (এর প্রাথমিক মান user-select) উপাদান এবং এটি কিভাবে ব্যবহার করা হয় তার উপর নির্ভর করে। আপনি এই সম্পর্কে আরও জানতে পারেন আমাদের পঞ্জিকা.

এখন এর ব্যবহারের ক্ষেত্রে অন্বেষণ করা যাক user-select: none...

নির্বাচন থেকে নন-টেক্সট স্ট্রাইপিং

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

নির্বাচনগুলিতে অন্তর্ভুক্ত হওয়া থেকে কিছু প্রতিরোধ করতে, নিশ্চিত করুন যে এটি একটি HTML উপাদানে মোড়ানো হয়েছে এবং তারপরে প্রয়োগ করুন user-select: none এটিতে:

<p>lorem <span style="user-select: none">🤔</span> ipsum</p>

<aside style="user-select: none">
  <h1>Heading</h1>
  <p>Paragraph</p>
  <a>Call to action</a>
</aside>

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

দুর্ঘটনাজনিত নির্বাচন প্রতিরোধ

প্রয়োগ করা user-select: none বোতামের মতো দেখতে লিঙ্কগুলিতে (যেমন <a href="/bn/whatever" class="button">Click Me!</a>).

একটি এর পাঠ্য বিষয়বস্তু নির্বাচন করা সম্ভব নয় <button> or <input type="submit"> কারণ, আচ্ছা, আপনি কেন করবেন? যাইহোক, এই আচরণ লিঙ্কগুলিতে প্রযোজ্য নয় কারণ ঐতিহ্যগতভাবে তারা একটি অনুচ্ছেদের অংশ গঠন করে যা নির্বাচনযোগ্য হওয়া উচিত।

যথেষ্ট ন্যায্য।

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

আমি অবশ্যই ভুলবশত জিনিসগুলি নির্বাচন করার প্রবণতা করছি কারণ আমি স্বীকার করার চেয়ে বিছানায় আমার ল্যাপটপ ব্যবহার করি। এছাড়াও, বেশ কয়েকটি চিকিৎসা শর্ত রয়েছে যা নিয়ন্ত্রণ এবং সমন্বয়কে প্রভাবিত করতে পারে, একটি উদ্দেশ্যযুক্ত ক্লিককে একটি অনিচ্ছাকৃত টেনে/নির্বাচনে পরিণত করতে পারে, তাই অ্যাক্সেসযোগ্যতার উদ্বেগ রয়েছে যা দিয়ে সমাধান করা যেতে পারে। user-select খুব.

যে ইন্টারঅ্যাকশনগুলির জন্য টেনে আনার প্রয়োজন হয় (ইচ্ছাকৃতভাবে) সেগুলি অবশ্যই বিদ্যমান থাকে (যেমন ব্রাউজার গেমগুলিতে), তবে এগুলি অস্বাভাবিক। এখনও, এটা শুধু যে দেখায় user-select আসলে বেশ কয়েকটি ব্যবহার-কেস আছে.

পেওয়ালড কন্টেন্ট চুরি এড়ানো

পেওয়ালড কন্টেন্ট অনেক ঘৃণা পায়, কিন্তু আপনি যদি মনে করেন যে আপনার কন্টেন্ট রক্ষা করা দরকার, তাহলে এটা আপনার কন্টেন্ট — কারোরই এটা চুরি করার অধিকার নেই কারণ তারা বিশ্বাস করে না যে তারা এর জন্য অর্থ প্রদান করবে।

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

CSS দিয়ে বিষয়বস্তু ঝাপসা করা:

article { filter: blur(<radius>); }

DevTools-এর জন্য কীবোর্ড শর্টকাট অক্ষম করা হচ্ছে:

document.addEventListener("keydown", function (e) {
  if (e.keyCode == 123) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});

প্রসঙ্গ মেনু নিজেই অক্ষম করে প্রসঙ্গ মেনুর মাধ্যমে DevTools-এ অ্যাক্সেস অক্ষম করা:

document.addEventListener("contextmenu", e => e.preventDefault())

এবং অবশ্যই, ব্যবহারকারীদের কপি করা থেকে আটকাতে যখন তাদের উৎসে এটি পড়ার অনুমতি দেওয়া হয় না, আবেদন করে user-select: none:

<article style="user-select: none">

অন্য কোন ব্যবহারের ক্ষেত্রে?

পাঠ্য নির্বাচন রোধ করার জন্য আমি এই তিনটি ব্যবহারের ক্ষেত্রে ভাবতে পারি। আরো বেশ কিছু আমার মন অতিক্রম, কিন্তু তারা সব একটি প্রসারিত মত লাগছিল. কিন্তু তোমার খবর কি? আপনি কি কিছুতে পাঠ্য নির্বাচন অক্ষম করতে হয়েছে? আমি জানতে চাই!