M

MLOG

বাংলা

CSS কাস্টম হাইলাইট API-এর মাধ্যমে উন্নত টেক্সট সিলেকশন স্টাইলিং উন্মোচন করুন। উন্নত ব্যবহারকারী অভিজ্ঞতার জন্য সিলেকশন অভিজ্ঞতা কাস্টমাইজ করতে শিখুন।

CSS কাস্টম হাইলাইট API: টেক্সট সিলেকশন স্টাইলিং-এ দক্ষতা অর্জন

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

CSS কাস্টম হাইলাইট API কী?

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

কেন CSS কাস্টম হাইলাইট API ব্যবহার করবেন?

কাস্টম হাইলাইট API টেক্সট সিলেকশন স্টাইল করার প্রচলিত পদ্ধতির চেয়ে বেশ কিছু সুবিধা প্রদান করে:

মূল ধারণাগুলো বোঝা

কোডের উদাহরণে যাওয়ার আগে, CSS কাস্টম হাইলাইট API-এর মূল ধারণাগুলো বোঝা অপরিহার্য:

১. হাইলাইট রেজিস্ট্রেশন

প্রক্রিয়াটি জাভাস্ক্রিপ্ট ব্যবহার করে একটি কাস্টম হাইলাইট নাম রেজিস্টার করার মাধ্যমে শুরু হয়। এই নামটি পরে CSS-এ নির্দিষ্ট টেক্সট সিলেকশন টার্গেট করার জন্য ব্যবহৃত হবে।

২. হাইলাইট রেঞ্জ

হাইলাইট রেঞ্জগুলো স্টাইল করার জন্য নির্দিষ্ট টেক্সট স্প্যানকে সংজ্ঞায়িত করে। এই রেঞ্জগুলো প্রোগ্রাম্যাটিকভাবে Highlight এবং StaticRange বা Range API ব্যবহার করে তৈরি করা হয়। এগুলো হাইলাইট করার জন্য টেক্সটের শুরু এবং শেষ পয়েন্ট নির্দিষ্ট করে।

৩. ::highlight() সিউডো-এলিমেন্ট

এই সিউডো-এলিমেন্টটি CSS-এ রেজিস্টার্ড হাইলাইট নামগুলোতে স্টাইল প্রয়োগ করতে ব্যবহৃত হয়। এটি একটি সিলেক্টর হিসেবে কাজ করে, যা হাইলাইট রেঞ্জ দ্বারা সংজ্ঞায়িত টেক্সট স্প্যানগুলোকে টার্গেট করে।

বাস্তব উদাহরণ: CSS কাস্টম হাইলাইট API প্রয়োগ

আসুন CSS কাস্টম হাইলাইট API কীভাবে ব্যবহার করতে হয় তা দেখানোর জন্য কয়েকটি বাস্তব উদাহরণ দেখি।

উদাহরণ ১: বেসিক টেক্সট সিলেকশন স্টাইলিং

এই উদাহরণটি দেখায় কীভাবে সিলেক্টেড টেক্সটের ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ পরিবর্তন করতে হয়।

এইচটিএমএল:

<p id="myText">This is some text that can be selected.</p>

জাভাস্ক্রিপ্ট:

const myText = document.getElementById('myText');
const highlight = new Highlight();

// Select the entire paragraph.
highlight.add(new Range(myText.firstChild, 0, myText.firstChild, myText.firstChild.length));

CSS.highlights.set('myHighlight', highlight);

সিএসএস:

::highlight(myHighlight) {
  background-color: #ff0;
  color: #000;
}

ব্যাখ্যা:

উদাহরণ ২: নির্দিষ্ট শব্দ হাইলাইট করা

এই উদাহরণটি দেখায় কীভাবে একটি প্যারাগ্রাফের মধ্যে নির্দিষ্ট শব্দ হাইলাইট করতে হয়।

এইচটিএমএল:

<p id="myText">This is a paragraph with the word highlight that we want to highlight.</p>

জাভাস্ক্রিপ্ট:

const myText = document.getElementById('myText');
const highlight = new Highlight();
const textContent = myText.textContent;
const wordsToHighlight = ['highlight'];

wordsToHighlight.forEach(word => {
  let index = textContent.indexOf(word);
  while (index !== -1) {
    highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + word.length));
    index = textContent.indexOf(word, index + 1);
  }
});

CSS.highlights.set('keywordHighlight', highlight);

সিএসএস:

::highlight(keywordHighlight) {
  background-color: lightgreen;
  font-weight: bold;
}

ব্যাখ্যা:

উদাহরণ ৩: ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে ডাইনামিক হাইলাইটিং

এই উদাহরণটি দেখায় কীভাবে একটি সার্চ বক্সে ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে ডাইনামিকভাবে টেক্সট হাইলাইট করতে হয়।

এইচটিএমএল:

<input type="text" id="searchInput" placeholder="Enter text to highlight">
<p id="myText">This is some text that will be dynamically highlighted based on user input.</p>

জাভাস্ক্রিপ্ট:

const searchInput = document.getElementById('searchInput');
const myText = document.getElementById('myText');
const highlight = new Highlight();

searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value;
  highlight.clear(); // Clear previous highlights

  if (searchTerm) {
    const textContent = myText.textContent;
    let index = textContent.indexOf(searchTerm);
    while (index !== -1) {
      highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + searchTerm.length));
      index = textContent.indexOf(searchTerm, index + 1);
    }
  }

  CSS.highlights.set('searchHighlight', highlight);
});

সিএসএস:

::highlight(searchHighlight) {
  background-color: yellow;
  color: black;
}

ব্যাখ্যা:

উদাহরণ ৪: ::highlight() দিয়ে হাইলাইটের চেহারা কাস্টমাইজ করা

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

এইচটিএমএল:

<p id="customText">Select this text to see a custom highlight effect.</p>

জাভাস্ক্রিপ্ট:

const customText = document.getElementById('customText');
const highlight = new Highlight();
highlight.add(new Range(customText.firstChild, 0, customText.firstChild, customText.firstChild.length));
CSS.highlights.set('fancyHighlight', highlight);

সিএসএস:

::highlight(fancyHighlight) {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 2px 5px;
}

ব্যাখ্যা:

অ্যাক্সেসিবিলিটি বিবেচ্য বিষয়

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

ব্রাউজার সামঞ্জস্যতা

CSS কাস্টম হাইলাইট API একটি তুলনামূলকভাবে নতুন ওয়েব স্ট্যান্ডার্ড, এবং ব্রাউজার সামঞ্জস্যতা ভিন্ন হতে পারে। ২০২৩ সালের শেষ/২০২৪ সালের শুরুতে, সমর্থন বাড়ছে কিন্তু সর্বজনীনভাবে বাস্তবায়িত হয়নি। সামঞ্জস্যতার আপডেট সম্পর্কে অবগত থাকতে আপনি "Can I use..." এর মতো ওয়েবসাইটে বর্তমান ব্রাউজার সমর্থন স্থিতি পরীক্ষা করতে পারেন।

যে ব্রাউজারগুলো এখনও API সমর্থন করে না তাদের জন্য ফলব্যাক স্টাইল সরবরাহ করতে ফিচার ডিটেকশন ব্যবহার করার কথা বিবেচনা করুন।

if ('CSS' in window && 'highlights' in CSS) {
  // Use the Custom Highlight API
} else {
  // Provide fallback styles using ::selection
}

বাস্তব-জগতের ব্যবহারের ক্ষেত্র

CSS কাস্টম হাইলাইট API-এর অসংখ্য বাস্তব-জগতের অ্যাপ্লিকেশন রয়েছে, যার মধ্যে রয়েছে:

সেরা অনুশীলন এবং টিপস

উন্নত কৌশল

১. একাধিক হাইলাইট একত্রিত করা

আপনি আরও জটিল স্টাইলিং এফেক্ট তৈরি করতে একাধিক হাইলাইট একত্রিত করতে পারেন। উদাহরণস্বরূপ, আপনি হয়তো কীওয়ার্ড এবং ব্যবহারকারী-সিলেক্টেড টেক্সট উভয়ই ভিন্ন স্টাইল দিয়ে হাইলাইট করতে চাইতে পারেন।

২. হাইলাইট আপডেট করতে ইভেন্ট ব্যবহার করা

আপনি জাভাস্ক্রিপ্ট ইভেন্ট, যেমন মাউসওভার বা ক্লিক, ব্যবহার করে ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে ডাইনামিকভাবে হাইলাইট রেঞ্জ আপডেট করতে পারেন।

৩. থার্ড-পার্টি লাইব্রেরির সাথে একীভূতকরণ

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

টেক্সট সিলেকশন স্টাইলিংয়ের ভবিষ্যৎ

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

উপসংহার

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

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