হাই-কনট্রাস্ট পছন্দ অনুযায়ী স্ক্রলবার অ্যাডাপ্ট করুন

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

হাই-কনট্রাস্ট স্ক্রলবার স্টাইলিং এনফোর্স করতে কীভাবে @media (prefers-contrast: more) CSS মিডিয়া ফিচার ব্যবহার করতে হয় সেই বিষয়ে এই গাইড ঐচ্ছিক নির্দেশাবলী প্রদান করে।

পড়ার সুবিধা উন্নত করুন

scrollbar-color বা কাস্টম ভেরিয়েবল দিয়ে স্ক্রলবার কাস্টমাইজ করার সময়, আপনি হাই-কনট্রাস্ট মোডের জন্য একটি এক্সপ্লিসিট ওভাররাইড প্রদান করতে পারেন। আপনার প্রাথমিক অ্যাপ্লিকেশন থিম যদি নান্দনিক কারণে কম-কনট্রাস্ট স্ক্রলবার ব্যবহার করে, তাহলে এটি বিশেষভাবে সহায়ক।

ঐচ্ছিক: থাম্ব ও ট্র্যাকের জন্য গাঢ়, স্বতন্ত্র রঙ নির্ধারণ করতে @media (prefers-contrast: more) ব্লক ব্যবহার করুন।

/* Define default standard colors as variables */
.scroller {
  --scrollbar-thumb: #bbb;
  --scrollbar-track: #f1f1f1;

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

/* OPTIONAL: Provide clear, high-contrast overrides */
@media (prefers-contrast: more) {
  .scroller {
    /* Use extremely distinct colors like solid black against white */
    --scrollbar-thumb: #000000;
    --scrollbar-track: #ffffff;
  }
}

scrollbar-color ব্যবহার করার সময় যেসব সমস্যা সম্পর্কে সচেতন থাকতে হবে

• scrollbar-color অ্যানিমেট বা ট্রানজিশন করবেন না। WebKit বাগ-এর কারণে প্রতিবার scrollbar-color পরিবর্তন হওয়ার সময় স্ক্রলবার ফ্লিকার করে।
• macOS-এ, scrollbar-color (স্ট্যান্ডার্ড) এবং ::-webkit-scrollbar (লিগ্যাসি) প্রপার্টি ডিফল্ট হিসেবে উপেক্ষা করা হয় কারণ macOS নেটিভ "ওভারলে" স্ক্রলবার ব্যবহার করে। macOS-কে কাস্টম রঙ রেন্ডার করতে বাধ্য করার জন্য আপনাকে অবশ্যই scrollbar-width (যেমন, thin বা auto) এর সাথে কাস্টম রঙ পেয়ার করতে হবে।
• scrollbar-width প্রয়োগ করা থাকলেও, macOS ওভারলে স্ক্রলবার ডিফল্ট হিসেবে ট্র্যাক (গাটার) ট্রান্সপারেন্ট হিসেবে রেন্ডার করে। MacOS-এ ডিজাইনের জন্য যদি দৃশ্যমান ট্র্যাক ব্যাকগ্রাউন্ড কালারের প্রয়োজন হয়, তাহলে আপনাকে অবশ্যই স্ক্রোলযোগ্য কন্টেনারে scrollbar-gutter: stable; প্রয়োগ করতে হবে, তবে মনে রাখবেন যে ব্যবহারকারী স্ক্রলবারের উপর মাউস নিয়ে যাওয়ার পরেই এটি দেখা যাবে।
• এমনকি scrollbar-gutter: stable থাকলেও, MacOS-এ ট্র্যাকটি স্বচ্ছ হতে পারে। থাম্ব যাতে দেখা যায় তার জন্য ট্র্যাক কালারের উপর নির্ভর করা উচিত নয়।

ফলব্যাক ও ব্রাউজার সাপোর্ট

স্ক্রলবার-কালারের জন্য ফলব্যাক ও ব্রাউজার সহায়তা

এই ফিচারটি প্রোগ্রেসিভ এনহ্যান্সমেন্ট এবং এর জন্য সবসময় ফলব্যাকের প্রয়োজন হয় না।

স্টাইলিং গুরুত্বপূর্ণ হলে এবং ব্যবহারকারীর বেসলাইন টার্গেট "বেসলাইন ব্যাপকভাবে উপলভ্য" বা তার আগের হলে, আপনার ফলব্যাক হিসেবে নন-স্ট্যান্ডার্ড ::-webkit-scrollbar সিউডো-এলিমেন্ট অন্তর্ভুক্ত করা উচিত।

স্ট্যান্ডার্ড প্রপার্টি এবং লিগ্যাসি WebKit সিলেক্টরের মধ্যে দ্বন্দ্ব এড়াতে, লিগ্যাসি ফলব্যাকগুলিকে একটি @supports not (scrollbar-color: auto) ব্লকে মুড়ে দিন। এটি সেইসব ব্রাউজারের ক্ষেত্রে প্রযোজ্য যেগুলি নেটিভভাবে দুটিকেই সাপোর্ট করে।

আপনি রঙ নির্ধারণ করার জন্য কাস্টম প্রপার্টি ব্যবহার করলে, এগুলি অটোমেটিক পুরনো WebKit সিলেক্টরে ক্যাসকেড হয়ে যাবে। আপনাকে এগুলি ডুপ্লিকেট করতে হবে না।

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}