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>
            

              
                Copy
              
            
          

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

            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);
            

              
                Copy
              
            
          

সিএসএস:

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

              
                Copy
              
            
          

ব্যাখ্যা:

• জাভাস্ক্রিপ্ট কোডটি একটি Highlight অবজেক্ট তৈরি করে এবং একটি রেঞ্জ যোগ করে যা myText আইডি সহ পুরো প্যারাগ্রাফটি জুড়ে থাকে।
• CSS.highlights.set() মেথডটি 'myHighlight' নামে হাইলাইটটি রেজিস্টার করে।
• সিএসএস কোডটি ::highlight(myHighlight) সিউডো-এলিমেন্ট ব্যবহার করে সিলেক্টেড টেক্সটকে হলুদ ব্যাকগ্রাউন্ড এবং কালো টেক্সট রঙ দিয়ে স্টাইল করে।

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

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

এইচটিএমএল:

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

              
                Copy
              
            
          

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

            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);
            

              
                Copy
              
            
          

সিএসএস:

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

              
                Copy
              
            
          

ব্যাখ্যা:

• জাভাস্ক্রিপ্ট কোডটি প্যারাগ্রাফের শব্দগুলোর মধ্য দিয়ে পুনরাবৃত্তি করে এবং "highlight" শব্দের ইনডেক্সগুলো শনাক্ত করে।
• প্রতিটি ঘটনার জন্য, এটি একটি Range অবজেক্ট তৈরি করে এবং এটি Highlight অবজেক্টে যোগ করে।
• সিএসএস কোডটি হাইলাইট করা শব্দগুলোকে হালকা সবুজ ব্যাকগ্রাউন্ড এবং বোল্ড ফন্ট ওজন দিয়ে স্টাইল করে।

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

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

এইচটিএমএল:

            <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>
            

              
                Copy
              
            
          

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

            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);
});
            

              
                Copy
              
            
          

সিএসএস:

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

              
                Copy
              
            
          

ব্যাখ্যা:

• জাভাস্ক্রিপ্ট কোডটি সার্চ বক্সের ইনপুট পরিবর্তনের জন্য শোনে।
• এটি বিদ্যমান যেকোনো হাইলাইট মুছে ফেলে এবং তারপর প্যারাগ্রাফের মধ্যে প্রবেশ করা টেক্সট অনুসন্ধান করে।
• প্রতিটি ঘটনার জন্য, এটি একটি Range অবজেক্ট তৈরি করে এবং এটি Highlight অবজেক্টে যোগ করে।
• সিএসএস কোডটি ডাইনামিকভাবে হাইলাইট করা টেক্সটকে হলুদ ব্যাকগ্রাউন্ড এবং কালো টেক্সট রঙ দিয়ে স্টাইল করে।

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

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

এইচটিএমএল:

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

              
                Copy
              
            
          

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

            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);
            

              
                Copy
              
            
          

সিএসএস:

            ::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;
}
            

              
                Copy
              
            
          

ব্যাখ্যা:

• এই উদাহরণটি হাইলাইট করা টেক্সটে একটি লিনিয়ার গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড, সাদা টেক্সট, একটি টেক্সট শ্যাডো, গোলাকার কোণ এবং প্যাডিং প্রয়োগ করে।
• এটি দেখায় যে আপনি কীভাবে ::highlight() সিউডো-এলিমেন্টের মধ্যে স্ট্যান্ডার্ড CSS প্রপার্টি ব্যবহার করে দৃশ্যত আকর্ষণীয় এবং অনন্য সিলেকশন স্টাইল অর্জন করতে পারেন।

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

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

• রঙের কনট্রাস্ট: হাইলাইট করা টেক্সটের ব্যাকগ্রাউন্ড এবং টেক্সটের রঙের মধ্যে পর্যাপ্ত কনট্রাস্ট নিশ্চিত করুন। অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ড (WCAG) এর সাথে সম্মতি যাচাই করতে WebAIM Contrast Checker এর মতো টুল ব্যবহার করুন।
• ভিজ্যুয়াল সংকেত: সিলেক্টেড টেক্সটের জন্য স্পষ্ট ভিজ্যুয়াল সংকেত প্রদান করুন। সূক্ষ্ম রঙের পরিবর্তন এড়িয়ে চলুন যা দৃষ্টি প্রতিবন্ধী ব্যবহারকারীদের জন্য বুঝতে অসুবিধা হতে পারে।
• কীবোর্ড নেভিগেশন: নিশ্চিত করুন যে কাস্টম হাইলাইট স্টাইলগুলো কীবোর্ড নেভিগেশনে হস্তক্ষেপ করে না। ব্যবহারকারীদের কীবোর্ড ব্যবহার করে সহজে টেক্সট সিলেক্ট এবং নেভিগেট করতে সক্ষম হওয়া উচিত।
• স্ক্রিন রিডার সামঞ্জস্যতা: আপনার কাস্টম হাইলাইট স্টাইলগুলো স্ক্রিন রিডারের সাথে পরীক্ষা করুন যাতে সিলেক্টেড টেক্সট সঠিকভাবে ঘোষণা করা হয়।

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

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

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

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

              
                Copy
              
            
          

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

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

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

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

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

উন্নত কৌশল

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

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

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

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

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

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

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

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

উপসংহার

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

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