CSS গাইড: পাঠ্য নির্বাচন

Daniel Marino

বুধবার, ৫ জুন, ২০২৪ ৮:০৮:৪৩ PM

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

আদেশ বর্ণনা

-webkit-user-select ক্রোম, সাফারি এবং অপেরায় উপাদানটির পাঠ্য নির্বাচন করা যেতে পারে কিনা তা নির্দিষ্ট করে৷

-moz-user-select ফায়ারফক্সে উপাদানটির পাঠ্য নির্বাচন করা যায় কিনা তা নির্দিষ্ট করে।

-ms-user-select ইন্টারনেট এক্সপ্লোরার এবং এজ এ উপাদানটির পাঠ্য নির্বাচন করা যেতে পারে কিনা তা নির্দিষ্ট করে।

user-select আধুনিক ব্রাউজারগুলিতে উপাদানটির পাঠ্য নির্বাচন করা যেতে পারে কিনা তা নির্দিষ্ট করে৷

addEventListener ইভেন্ট টার্গেটে একটি নির্দিষ্ট শ্রোতাকে নিবন্ধন করে যা এটিকে বলা হয়েছে।

preventDefault ইভেন্টের অন্তর্গত ডিফল্ট ক্রিয়া প্রতিরোধ করে।

selectstart যখন একজন ব্যবহারকারী একটি পাঠ্য নির্বাচন করতে শুরু করে তখন আগুন লাগে।

আদেশ	বর্ণনা
-webkit-user-select	ক্রোম, সাফারি এবং অপেরায় উপাদানটির পাঠ্য নির্বাচন করা যেতে পারে কিনা তা নির্দিষ্ট করে৷
-moz-user-select	ফায়ারফক্সে উপাদানটির পাঠ্য নির্বাচন করা যায় কিনা তা নির্দিষ্ট করে।
-ms-user-select	ইন্টারনেট এক্সপ্লোরার এবং এজ এ উপাদানটির পাঠ্য নির্বাচন করা যেতে পারে কিনা তা নির্দিষ্ট করে।
user-select	আধুনিক ব্রাউজারগুলিতে উপাদানটির পাঠ্য নির্বাচন করা যেতে পারে কিনা তা নির্দিষ্ট করে৷
addEventListener	ইভেন্ট টার্গেটে একটি নির্দিষ্ট শ্রোতাকে নিবন্ধন করে যা এটিকে বলা হয়েছে।
preventDefault	ইভেন্টের অন্তর্গত ডিফল্ট ক্রিয়া প্রতিরোধ করে।
selectstart	যখন একজন ব্যবহারকারী একটি পাঠ্য নির্বাচন করতে শুরু করে তখন আগুন লাগে।

পাঠ্য নির্বাচন অক্ষম করার সমাধান বোঝা

সিএসএস স্ক্রিপ্ট পাঠ্য নির্বাচন অক্ষম করতে বিভিন্ন বৈশিষ্ট্য ব্যবহার করে। দ্য , , এবং বৈশিষ্ট্য হল ব্রাউজার-নির্দিষ্ট কমান্ড যা যথাক্রমে Chrome, Safari, Opera, Firefox, Internet Explorer এবং Edge-এ পাঠ্য নির্বাচনকে বাধা দেয়। দ্য user-select সম্পত্তি আধুনিক ব্রাউজার দ্বারা সমর্থিত একটি প্রমিত সংস্করণ। ব্যবহারকারীরা অনিচ্ছাকৃতভাবে টেক্সট হাইলাইট করতে না পারে তা নিশ্চিত করার জন্য বোতাম হিসেবে কাজ করা অ্যাঙ্কর ট্যাগগুলিতে এই কমান্ডগুলি প্রয়োগ করা হয়, এইভাবে ভিজ্যুয়াল ব্যাঘাত ছাড়াই বোতামের মতো কার্যকারিতা বজায় রাখা হয়।

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

CSS সহ অ্যাঙ্কর বোতামগুলিতে পাঠ্য নির্বাচন প্রতিরোধ করা

সিএসএস সমাধান

/* CSS to disable text selection */
a.button {
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Non-prefixed version, currently supported by Chrome, Edge, Opera, and Firefox */
}

/* Apply the class to anchor tags acting as buttons */
a.button {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
}

অ্যাঙ্কর বোতামগুলিতে ব্যবহারকারীর অভিজ্ঞতা বাড়াতে জাভাস্ক্রিপ্ট ব্যবহার করা

জাভাস্ক্রিপ্ট সমাধান

<script>
// JavaScript to disable text selection for specific elements
document.querySelectorAll('a.button').forEach(function(el) {
  el.addEventListener('mousedown', function(e) {
    e.preventDefault(); // Prevents text selection on mousedown
  });
  el.addEventListener('selectstart', function(e) {
    e.preventDefault(); // Prevents text selection on drag
  });
});
</script>

ব্রাউজার সামঞ্জস্য এবং সর্বোত্তম অনুশীলনগুলি অন্বেষণ করা

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

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

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

পাঠ্য নির্বাচন হাইলাইটিং অক্ষম করার বিষয়ে চূড়ান্ত চিন্তাভাবনা

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

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

CSS গাইড: পাঠ্য নির্বাচন হাইলাইটিং অক্ষম করুন

পাঠ্য নির্বাচন অক্ষম করার সমাধান বোঝা

CSS সহ অ্যাঙ্কর বোতামগুলিতে পাঠ্য নির্বাচন প্রতিরোধ করা

অ্যাঙ্কর বোতামগুলিতে ব্যবহারকারীর অভিজ্ঞতা বাড়াতে জাভাস্ক্রিপ্ট ব্যবহার করা

ব্রাউজার সামঞ্জস্য এবং সর্বোত্তম অনুশীলনগুলি অন্বেষণ করা

পাঠ্য নির্বাচন হাইলাইটিং অক্ষম করার বিষয়ে চূড়ান্ত চিন্তাভাবনা