সিএসএস ব্যবহার করে টেক্সট সিলেকশন হাইলাইট কাস্টমাইজ করুন। এটি ব্যবহারকারীর অভিজ্ঞতা এবং ব্র্যান্ডের সামঞ্জস্যতা উন্নত করে বিভিন্ন ব্রাউজার এবং প্ল্যাটফর্মে।
সিএসএস কাস্টম হাইলাইট: টেক্সট সিলেকশন স্টাইলিং-এ দক্ষতা অর্জন
টেক্সট সিলেকশন, অর্থাৎ ওয়েবপেজের শব্দগুলোর উপর কার্সার টেনে নিয়ে যাওয়ার এই সহজ কাজটি, ডিজাইন এবং ব্র্যান্ডিংয়ের ক্ষেত্রে প্রায়ই উপেক্ষিত হয়। তবে, ব্রাউজারের ডিফল্ট হাইলাইট রঙটি কাস্টমাইজ করলে ব্যবহারকারীর অভিজ্ঞতা উল্লেখযোগ্যভাবে উন্নত হতে পারে এবং আপনার ব্র্যান্ড আইডেন্টিটিকে আরও শক্তিশালী করতে পারে। এই বিস্তারিত গাইডটি আপনাকে সিএসএস কাস্টম হাইলাইট সম্পর্কে যা যা জানা দরকার, যেমন ::selection সিউডো-এলিমেন্ট, ব্রাউজার কম্প্যাটিবিলিটি, অ্যাক্সেসিবিলিটি বিবেচনাসমূহ এবং আপনার ওয়েবসাইটের ডিজাইন উন্নত করার জন্য বাস্তব উদাহরণসহ সবকিছু জানাবে।
কেন টেক্সট সিলেকশন হাইলাইট কাস্টমাইজ করবেন?
যদিও ব্রাউজারের ডিফল্ট হাইলাইট রঙ (সাধারণত নীল) কার্যকরী, তবে এটি আপনার ওয়েবসাইটের রঙের স্কিম বা ব্র্যান্ডের নান্দনিকতার সাথে নাও মিলতে পারে। হাইলাইট রঙ কাস্টমাইজ করার বেশ কিছু সুবিধা রয়েছে:
- ব্র্যান্ডের সামঞ্জস্যতা: নিশ্চিত করুন যে সিলেকশন হাইলাইটটি আপনার ব্র্যান্ডের রঙের পরিপূরক, যা একটি সুসংহত ভিজ্যুয়াল অভিজ্ঞতা তৈরি করে।
- উন্নত ব্যবহারকারী অভিজ্ঞতা: একটি সঠিকভাবে নির্বাচিত হাইলাইট রঙ পঠনযোগ্যতা বাড়াতে এবং চোখের উপর চাপ কমাতে পারে, বিশেষ করে দৃষ্টি প্রতিবন্ধী ব্যবহারকারীদের জন্য।
- বর্ধিত ভিজ্যুয়াল আবেদন: একটি কাস্টম হাইলাইট আপনার ওয়েবসাইটের ডিজাইনে একটি সূক্ষ্ম পরিশীলিত এবং পেশাদারিত্বের ছোঁয়া যোগ করতে পারে।
- বর্ধিত সম্পৃক্ততা: যদিও এটিকে ছোটখাটো বিষয় মনে হতে পারে, ভিজ্যুয়াল বিবরণ সামগ্রিক ব্যবহারকারীর সম্পৃক্ততা এবং সন্তুষ্টিতে অবদান রাখে।
::selection সিউডো-এলিমেন্ট
সিএসএস দিয়ে টেক্সট সিলেকশন হাইলাইট কাস্টমাইজ করার মূল চাবিকাঠি হলো ::selection সিউডো-এলিমেন্ট। এটি আপনাকে নির্বাচিত টেক্সটের ব্যাকগ্রাউন্ড রঙ এবং টেক্সটের রঙ স্টাইল করার সুযোগ দেয়। মনে রাখবেন, এই সিউডো-এলিমেন্ট ব্যবহার করে আপনি font-size, font-weight, বা text-decoration-এর মতো অন্যান্য প্রপার্টি স্টাইল করতে পারবেন না।
বেসিক সিনট্যাক্স
এর বেসিক সিনট্যাক্স খুবই সহজ:
::selection {
background-color: color;
color: color;
}
color-কে আপনার পছন্দের রঙের মান (যেমন, হেক্সাডেসিমাল, আরজিবি, এইচএসএল, বা নির্দিষ্ট নামযুক্ত রঙ) দিয়ে প্রতিস্থাপন করুন।
উদাহরণ
এখানে একটি সহজ উদাহরণ দেওয়া হলো যা টেক্সট সিলেক্ট করা হলে ব্যাকগ্রাউন্ডের রঙ হালকা নীল এবং টেক্সটের রঙ সাদা সেট করে:
::selection {
background-color: #ADD8E6; /* হালকা নীল */
color: white;
}
এই সিএসএস রুলটি আপনার স্টাইলশিট বা <style> ট্যাগে যোগ করে কাস্টম হাইলাইট প্রয়োগ করুন।
ব্রাউজার কম্প্যাটিবিলিটি: প্রিফিক্স নিয়ে আলোচনা
যদিও ::selection আধুনিক ব্রাউজারগুলিতে ব্যাপকভাবে সমর্থিত, পুরানো সংস্করণগুলিতে ভেন্ডর প্রিফিক্স প্রয়োজন হতে পারে। সর্বোচ্চ কম্প্যাটিবিলিটি নিশ্চিত করার জন্য, -moz-selection এবং -webkit-selection প্রিফিক্সগুলো অন্তর্ভুক্ত করা একটি ভালো অভ্যাস।
প্রিফিক্সসহ আপডেট করা সিনট্যাক্স
ভেন্ডর প্রিফিক্স অন্তর্ভুক্ত করার জন্য আপডেট করা সিনট্যাক্সটি এখানে দেওয়া হলো:
::-moz-selection {
background-color: #ADD8E6;
color: white;
}
::selection {
background-color: #ADD8E6;
color: white;
}
::-webkit-selection {
background-color: #ADD8E6;
color: white;
}
এটি নিশ্চিত করে যে আপনার কাস্টম হাইলাইটটি বিস্তৃত পরিসরের ব্রাউজারগুলিতে কাজ করবে, যার মধ্যে ফায়ারফক্সের পুরানো সংস্করণ (-moz-selection) এবং সাফারি/ক্রোম (-webkit-selection) অন্তর্ভুক্ত।
অ্যাক্সেসিবিলিটি বিবেচনাসমূহ
টেক্সট সিলেকশন হাইলাইট কাস্টমাইজ করার সময়, অ্যাক্সেসিবিলিটিকে অগ্রাধিকার দেওয়া অত্যন্ত গুরুত্বপূর্ণ। ভুল রঙ নির্বাচন করলে দৃষ্টি প্রতিবন্ধী ব্যবহারকারীদের জন্য নির্বাচিত টেক্সট পড়া কঠিন হতে পারে। এখানে কিছু মূল বিবেচ্য বিষয় উল্লেখ করা হলো:
- কনট্রাস্ট রেশিও: সিলেকশন হাইলাইটের ব্যাকগ্রাউন্ড রঙ এবং টেক্সটের রঙের মধ্যে পর্যাপ্ত কনট্রাস্ট নিশ্চিত করুন। WCAG (ওয়েব কন্টেন্ট অ্যাক্সেসিবিলিটি গাইডলাইনস) সাধারণ টেক্সটের জন্য কমপক্ষে 4.5:1 এবং বড় টেক্সটের জন্য 3:1 কনট্রাস্ট রেশিও সুপারিশ করে।
- বর্ণান্ধতা: হাইলাইট রঙ নির্বাচন করার সময় বর্ণান্ধতার কথা মাথায় রাখুন। এমন রঙের সংমিশ্রণ এড়িয়ে চলুন যা বিভিন্ন ধরণের বর্ণান্ধতায় ভোগা মানুষদের জন্য পার্থক্য করা কঠিন। WebAIM-এর কালার কনট্রাস্ট চেকারের (https://webaim.org/resources/contrastchecker/) মতো টুলগুলো আপনাকে রঙের সংমিশ্রণ মূল্যায়ন করতে সাহায্য করতে পারে।
- ব্যবহারকারীর পছন্দ: ব্যবহারকারীদের তাদের ব্যক্তিগত চাহিদা এবং পছন্দ অনুযায়ী হাইলাইট রঙ কাস্টমাইজ করার সুযোগ দেওয়ার কথা বিবেচনা করুন। এটি ইউজার সেটিংস বা ব্রাউজার এক্সটেনশনের মাধ্যমে অর্জন করা যেতে পারে।
উদাহরণ: অ্যাক্সেসিবল রঙের সংমিশ্রণ
এখানে একটি উচ্চ কনট্রাস্ট রেশিও সহ অ্যাক্সেসিবল রঙের সংমিশ্রণের একটি উদাহরণ দেওয়া হলো:
::selection {
background-color: #2E8B57; /* সি গ্রিন */
color: #FFFFFF; /* সাদা */
}
এই সংমিশ্রণটি একটি শক্তিশালী কনট্রাস্ট প্রদান করে, যা ব্যবহারকারীদের জন্য নির্বাচিত টেক্সট পড়া সহজ করে তোলে।
অ্যাডভান্সড কাস্টমাইজেশন কৌশল
সাধারণ রঙ পরিবর্তনের বাইরে, আপনি আরও পরিশীলিত এবং ডাইনামিক টেক্সট সিলেকশন হাইলাইট তৈরি করতে সিএসএস ভেরিয়েবল এবং অন্যান্য কৌশল ব্যবহার করতে পারেন।
সিএসএস ভেরিয়েবল ব্যবহার
সিএসএস ভেরিয়েবল (কাস্টম প্রপার্টি নামেও পরিচিত) আপনাকে পুনঃব্যবহারযোগ্য মান নির্ধারণ করতে দেয় যা সহজেই আপডেট করা যায়। এটি আপনার ওয়েবসাইটের ডিজাইনে সামঞ্জস্য বজায় রাখার জন্য বিশেষভাবে উপকারী।
সিএসএস ভেরিয়েবল ডিফাইন করা
আপনার সিএসএস ভেরিয়েবলগুলো :root সিউডো-ক্লাসে ডিফাইন করুন:
:root {
--highlight-background: #FFD700; /* গোল্ড */
--highlight-text: #000000; /* কালো */
}
::selection-এ সিএসএস ভেরিয়েবল ব্যবহার
আপনার ::selection রুলে সিএসএস ভেরিয়েবল রেফারেন্স করতে var() ফাংশনটি ব্যবহার করুন:
::selection {
background-color: var(--highlight-background);
color: var(--highlight-text);
}
এখন, আপনি :root সিউডো-ক্লাসে সিএসএস ভেরিয়েবল আপডেট করে সহজেই হাইলাইটের রঙ পরিবর্তন করতে পারবেন।
কনটেক্সটের উপর ভিত্তি করে ডাইনামিক হাইলাইট রঙ
আপনি নির্বাচিত টেক্সটের কনটেক্সটের উপর ভিত্তি করে ডাইনামিক হাইলাইট রঙ তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি হয়তো হেডিং-এর জন্য বডি টেক্সট থেকে ভিন্ন হাইলাইট রঙ ব্যবহার করতে চাইতে পারেন। এটি জাভাস্ক্রিপ্ট এবং সিএসএস ভেরিয়েবল ব্যবহার করে করা যেতে পারে।
উদাহরণ: ভিন্ন ভিন্ন হাইলাইট
প্রথমে, বিভিন্ন হাইলাইট রঙের জন্য সিএসএস ভেরিয়েবল ডিফাইন করুন:
:root {
--heading-highlight-background: #87CEEB; /* স্কাই ব্লু */
--heading-highlight-text: #FFFFFF; /* সাদা */
--body-highlight-background: #FFFFE0; /* হালকা হলুদ */
--body-highlight-text: #000000; /* কালো */
}
তারপর, নির্বাচিত টেক্সটের প্যারেন্ট এলিমেন্টে একটি ক্লাস যোগ করতে জাভাস্ক্রিপ্ট ব্যবহার করুন:
// এটি একটি সরলীকৃত উদাহরণ এবং বিভিন্ন সিলেকশন পরিস্থিতি সঠিকভাবে পরিচালনা করার জন্য
// আরও শক্তিশালী বাস্তবায়ন প্রয়োজন।
document.addEventListener('mouseup', function(event) {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const parentElement = range.commonAncestorContainer.parentNode;
if (parentElement.tagName === 'H1' || parentElement.tagName === 'H2' || parentElement.tagName === 'H3') {
parentElement.classList.add('heading-selected');
} else {
parentElement.classList.remove('heading-selected');
}
}
});
অবশেষে, বিভিন্ন ক্লাসের জন্য সিএসএস রুল ডিফাইন করুন:
.heading-selected::selection {
background-color: var(--heading-highlight-background);
color: var(--heading-highlight-text);
}
::selection {
background-color: var(--body-highlight-background);
color: var(--body-highlight-text);
}
এই উদাহরণটি দেখায় কিভাবে আপনি নির্বাচিত কনটেক্সটের উপর ভিত্তি করে হেডিং এবং বডি টেক্সটের জন্য ভিন্ন ভিন্ন হাইলাইট রঙ তৈরি করতে পারেন। একটি আরও ব্যাপক বাস্তবায়নের জন্য জাভাস্ক্রিপ্ট দিয়ে বিভিন্ন সিলেকশন পরিস্থিতি এবং এজ কেসগুলো পরিচালনা করতে হবে।
বাস্তব উদাহরণ এবং ব্যবহারের ক্ষেত্র
আপনার নিজস্ব কাস্টম হাইলাইট ডিজাইনকে অনুপ্রাণিত করার জন্য এখানে কিছু বাস্তব উদাহরণ এবং ব্যবহারের ক্ষেত্র দেওয়া হলো:
- মিনিমালিস্ট ডিজাইন: একটি পরিষ্কার এবং আধুনিক লুক বজায় রাখতে হাইলাইটের জন্য একটি সূক্ষ্ম, ডিস্যাচুরেটেড রঙ ব্যবহার করুন। উদাহরণস্বরূপ, হালকা ধূসর বা বেইজ।
- ডার্ক থিম: একটি ডার্ক থিমের জন্য ডিফল্ট রঙগুলো উল্টে দিন, হাইলাইটের জন্য একটি ডার্ক ব্যাকগ্রাউন্ড এবং হালকা টেক্সট ব্যবহার করুন। এটি কম আলোর পরিবেশে পঠনযোগ্যতা উন্নত করে।
- ব্র্যান্ডিং শক্তিশালীকরণ: ব্র্যান্ডের স্বীকৃতিকে শক্তিশালী করতে হাইলাইটের জন্য আপনার ব্র্যান্ডের প্রাথমিক বা গৌণ রঙ ব্যবহার করুন।
- ইন্টারেক্টিভ টিউটোরিয়াল: ইন্টারেক্টিভ টিউটোরিয়ালে ব্যবহারকারীদের ধাপগুলোর মাধ্যমে গাইড করতে হাইলাইটের জন্য একটি উজ্জ্বল, দৃষ্টি আকর্ষণকারী রঙ ব্যবহার করুন। উদাহরণস্বরূপ, একটি প্রাণবন্ত হলুদ বা কমলা।
- কোড হাইলাইটিং: কোড স্নিপেটগুলির জন্য হাইলাইট রঙ কাস্টমাইজ করে পঠনযোগ্যতা উন্নত করুন এবং কোডের বিভিন্ন উপাদানকে আলাদা করুন।
উদাহরণ: কাস্টম হাইলাইট সহ কোড হাইলাইটিং
কোড হাইলাইটিংয়ের জন্য, একটি সূক্ষ্ম কিন্তু স্বতন্ত্র রঙ পঠনযোগ্যতা উন্নত করতে পারে:
pre ::selection {
background-color: rgba(255, 255, 0, 0.2); /* স্বচ্ছতাসহ হালকা হলুদ */
color: #000000; /* কালো */
}
এই উদাহরণটি নির্বাচিত কোড হাইলাইট করার জন্য একটি আধা-স্বচ্ছ হালকা হলুদ রঙ ব্যবহার করে, যা অতিরিক্ত বিভ্রান্তিকর না হয়েও এটিকে সহজে আলাদা করতে সাহায্য করে।
সাধারণ ভুল যা এড়িয়ে চলবেন
টেক্সট সিলেকশন হাইলাইট কাস্টমাইজ করার সময় এড়িয়ে চলার মতো কিছু সাধারণ ভুল এখানে দেওয়া হলো:
- অ্যাক্সেসিবিলিটি উপেক্ষা করা: ব্যাকগ্রাউন্ড এবং টেক্সটের রঙের মধ্যে পর্যাপ্ত কনট্রাস্ট নিশ্চিত করতে ব্যর্থ হওয়া।
- অতিরিক্ত উজ্জ্বল বা বিভ্রান্তিকর রঙ: এমন রঙ ব্যবহার করা যা খুব বেশি উজ্জ্বল বা বিভ্রান্তিকর, যা চোখের উপর চাপ সৃষ্টি করতে এবং পঠনযোগ্যতা কমাতে পারে।
- অসামঞ্জস্যপূর্ণ স্টাইলিং: আপনার ওয়েবসাইটের বিভিন্ন অংশে ভিন্ন ভিন্ন হাইলাইট স্টাইল প্রয়োগ করা, যা একটি বিচ্ছিন্ন ব্যবহারকারী অভিজ্ঞতা তৈরি করে।
- ভেন্ডর প্রিফিক্স ভুলে যাওয়া: পুরানো ব্রাউজারগুলির জন্য ভেন্ডর প্রিফিক্স অন্তর্ভুক্ত করতে অবহেলা করা।
- কাস্টম হাইলাইটের অতিরিক্ত ব্যবহার: কেবল সেখানেই কাস্টম হাইলাইট ব্যবহার করুন যেখানে এটি ব্যবহারকারীর অভিজ্ঞতা বাড়ায়। অতিরিক্ত ব্যবহার করলে সাইটটি অগোছালো বা বিভ্রান্তিকর মনে হতে পারে।
উপসংহার
সিএসএস দিয়ে টেক্সট সিলেকশন হাইলাইট কাস্টমাইজ করা ব্যবহারকারীর অভিজ্ঞতা বাড়ানো এবং আপনার ব্র্যান্ড আইডেন্টিটি শক্তিশালী করার একটি সহজ কিন্তু কার্যকর উপায়। ::selection সিউডো-এলিমেন্ট বোঝা, ব্রাউজার কম্প্যাটিবিলিটি সমাধান করা এবং অ্যাক্সেসিবিলিটিকে অগ্রাধিকার দিয়ে আপনি দৃশ্যত আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব ওয়েবসাইট তৈরি করতে পারেন। আপনার ব্র্যান্ডের জন্য নিখুঁত হাইলাইট স্টাইল খুঁজে পেতে বিভিন্ন রঙের সংমিশ্রণ এবং কৌশল নিয়ে পরীক্ষা করুন।
ধারাবাহিক ফলাফল নিশ্চিত করতে সর্বদা বিভিন্ন ব্রাউজার এবং ডিভাইসে আপনার কাস্টম হাইলাইট পরীক্ষা করতে ভুলবেন না। এই প্রায়শই উপেক্ষিত বিবরণের প্রতি মনোযোগ দিয়ে, আপনি আপনার ওয়েবসাইটের ডিজাইনকে উন্নত করতে এবং আপনার ব্যবহারকারীদের জন্য আরও আকর্ষক অভিজ্ঞতা তৈরি করতে পারেন।