ডার্ক মোড

color-scheme প্রপার্টি থেকে বোঝা যায় যে আপনার পৃষ্ঠা কোন রঙের স্কিম (যেমন, হালকা বা গাঢ়) সমর্থন করে। এটি ব্রাউজারকে জানায় যে এটি অটোমেটিক নেটিভ UI এলিমেন্ট—যেমন স্ক্রলবার, ফর্ম কন্ট্রোল এবং ডিফল্ট ক্যানভাস ব্যাকগ্রাউন্ড—আপনার সাইটের ডিজাইনের সাথে ম্যাচ করার জন্য থিম করতে পারে এবং প্রাথমিক লোডিংয়ের সময় সাদা ফ্ল্যাশ কমাতে সাহায্য করে।

প্রয়োগ

১. HTML-এ কাজ করে এমন স্কিম ঘোষণা করুন

বাধ্যতামূলক: "ফ্ল্যাশ অফ আন-থিমড কন্টেন্ট" (FOUC) প্রতিরোধ করতে, আপনার <head>-এ একটি <meta> ট্যাগ যোগ করুন যাতে ব্রাউজার রেন্ডার করা শুরু করার আগেই জানতে পারে যে আপনি কোন থিম সমর্থন করেন। এই <meta> ট্যাগটি ক্যানভাসের প্রাথমিক রঙ আগে থেকে সেট করে FOUC এড়াতে সাহায্য করলেও, এটি সব ব্রাউজার বা লোডিং পরিস্থিতিতে ফ্ল্যাশ পুরোপুরি দূর করতে পারে না।

<!-- MANDATORY: Declare support for both light and dark themes -->
<meta name="color-scheme" content="light dark">

২. CSS :root বা html-এ পৃষ্ঠা-ব্যাপী রঙের স্কিম প্রয়োগ করুন

বাধ্যতামূলক: html এলিমেন্ট বা :root ছদ্ম-শ্রেণীতে color-scheme প্রপার্টি প্রয়োগ করুন। ব্রাউজার বিশেষ করে রুট এলিমেন্ট দেখে সম্পূর্ণ ভিউপোর্টের থিম নির্ধারণ করে—এর মধ্যে রুট স্ক্রলবার ও প্রাথমিক "ক্যানভাস" ব্যাকগ্রাউন্ড অন্তর্ভুক্ত। শুধুমাত্র body-এ প্রয়োগ করা হলে, এইসব গ্লোবাল UI সারফেস লাইট মোডে থাকতে পারে কারণ body উইন্ডোর রেন্ডারিং কনটেক্সট কন্ট্রোল করে না।

/* MANDATORY: Apply color-scheme to :root or html for viewport-wide theming */
:root {
  /* MANDATORY: Automatically adapt native UI to user system preferences */
  color-scheme: light dark;
}

৩. হালকা ও গাঢ় রঙের টোকেন নির্ধারণ করুন

আপনি light-dark() ফাংশন ব্যবহার করে কালার টোকেন নির্ধারণ করতে পারবেন যা অটোমেটিক বিভিন্ন color-scheme ভ্যালুর সাথে মানিয়ে নেয়।

এটি সাজেস্ট করা হয় যে আপনি আলাদা কাস্টম প্রপার্টিতে র কালার ভ্যালুও রাখুন, যা বিভিন্ন উপায়ে এগুলি একত্রিত করা সহজ করে তোলে (এবং প্রয়োজন হলে, ফলব্যাক আচরণ সহজ করে তোলে)।

accent-color বা scrollbar-color-এর মতো বিল্ট-ইন UI-এর রঙের উপর আরও নিয়ন্ত্রণ পেতে, লেখক বিকল্প হিসেবে কাস্টম প্রপার্টি এবং/অথবা light-dark() ফাংশন ব্যবহার করে নিজস্ব ডায়নামিক রঙ যোগ করতে পারেন। এই ফাংশনটি এলিমেন্টের গণনা করা color-scheme-এর উপর ভিত্তি করে অটোমেটিক সঠিক রঙ বেছে নেয় এবং অপ্রয়োজনীয় মিডিয়া কোয়েরির প্রয়োজনীয়তা দূর করে, তবে প্রাথমিক প্রয়োগের জন্য এটি প্রয়োজন হয় না।

:root {
  --color-brand-light: oklch(45% 0.23 270);
  --color-brand-dark: oklch(85% 0.15 210);
  --color-brand-text-light: white;
  --color-brand-text-dark: oklch(40% 0.23 270);

  --color-brand: light-dark(var(--color-brand-light), var(--color-brand-dark));
  --color-brand-text: light-dark(var(--color-brand-text-light), var(--color-brand-text-dark));

  /* MANDATORY: Automatically adapt native UI to user system preferences */
  color-scheme: light dark;
}

button.primary {
  /* These automatically adapt to color scheme */
  background-color: var(--color-brand);
  color: var(--color-brand-text);
}

ঐচ্ছিক: বেশ কিছু সিস্টেম কালার উপলভ্য, যা ব্যবহৃত কালার স্কিম (এবং অন্যান্য কালার মোড, যেমন, ফোর্সড কালার) অনুযায়ী অটোমেটিক মানিয়ে নেয়, যেমন canvas, canvastext, accentcolor (সাপোর্ট চেক করুন) , buttonborder ইত্যাদি। এগুলি সাধারণত খুব সীমিত ক্ষেত্রে উপযোগী, বিশেষ করে যখন আপনাকে নির্দিষ্ট ডিফল্ট ব্রাউজার UI বা ফলব্যাক/ডিফল্ট হিসেবে হুবহু ম্যাচ করতে হয়।

ঐচ্ছিক: প্রসঙ্গ অনুযায়ী রঙের জোড়া কাস্টমাইজ করুন

সিস্টেম ডিফল্ট ওভাররাইড করার সময়ও, prefers-color-scheme মিডিয়া কোয়েরি ব্যবহার করে বিভিন্ন কালার পেয়ার নির্ধারণ করা উপযোগী হতে পারে, যা পৃষ্ঠার চারপাশে ব্রাউজার এবং OS Chrome-এর কালার (অথবা আশেপাশের পৃষ্ঠার কালার, যখন পৃষ্ঠাটি iframe হিসেবে ব্যবহার করা হয়) বিবেচনা করে।

যেমন, সিস্টেম সেটিং dark হলে একটু আবছা লাইট থিম ব্যবহার করুন অথবা সিস্টেম সেটিং light হলে আরও বেশি কনট্রাস্ট সহ ডার্ক থিম ব্যবহার করুন, যাতে আশেপাশের UI-এর কারণে পৃষ্ঠাটি দেখতে অসুবিধা না হয়।

ব্রাউজার UI-এর সূক্ষ্ম কাস্টমাইজেশন

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

অ্যাকসেন্ট কালার সেট করা হচ্ছে

কিছু ব্রাউজার UI (যেমন, টিকচিহ্ন দেওয়া চেকবক্স বা স্লাইডার) অ্যাকসেন্ট কালার ব্যবহার করে। এটি ডিফল্ট হিসেবে OS সেটিংয়ে সমাধান করে, তবে আপনি accent-color প্রপার্টি ব্যবহার করে এমন রঙ সেট করতে পারেন যা পৃষ্ঠার সাথে আরও ভালোভাবে মানানসই হয়, যেমন পৃষ্ঠার ব্র্যান্ডের রঙ।

html {
  accent-color: light-dark(var(--color-accent-light), var(--color-accent-dark));
}

অ্যাকসেন্ট কালার ব্যবহার করার সময় যেসব সমস্যা সম্পর্কে সচেতন থাকতে হবে

accent-color-এর ব্রাউজার রেন্ডারিং আলাদা আলাদা হয়। সাধারণত অ্যাকসেন্ট কালার ব্যাকগ্রাউন্ডের উপর আঁকা ইন্ডিকেটরের জন্য, যেমন চেকবক্স চিহ্ন এবং রেডিও-বোতাম ডট, ব্রাউজার বিভিন্ন ট্রিটমেন্ট প্রয়োগ করতে পারে:

• Chromium এবং Firefox সাধারণত একটি কনট্রাস্ট ইন্ডিকেটর রঙ বেছে নেয়।
• পরিবর্তে, Safari লাইট মোডে সাদা ইন্ডিকেটর বা ডার্ক মোডে কালো ইন্ডিকেটর বজায় রাখতে পারে, এর পিছনে অ্যাকসেন্ট রঙ পরিবর্তন করার সময়। এই অ্যাডজাস্টমেন্ট সবসময় প্রতিটি সাপ্লাই করা রঙের জন্য পর্যাপ্ত কনট্রাস্ট প্রদান করে না, তাই Safari-তে গুরুত্বপূর্ণ কম্বিনেশন পরীক্ষা করুন, যার মধ্যে লাইট ও ডার্ক রঙের স্কিম অন্তর্ভুক্ত। এমনটা ভাববেন না যে Safari অটোমেটিক এমন কোনও ইন্ডিকেটর রঙ বেছে নেবে যা সেরা কনট্রাস্ট প্রদান করে।

স্ক্রলবারের রঙ

আপনি light-dark()-এর সাথে scrollbar-color ব্যবহার করে কাস্টম স্ক্রলবার রঙ সেট করতে পারেন যা ব্যবহৃত রঙের স্কিমের সাথে মানানসই।

:root {
  --color-scrollbar-track: light-dark(#eee, #222);
  --color-scrollbar-thumb: light-dark(#999, #666);
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

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-এ ট্র্যাকটি স্বচ্ছ হতে পারে। থাম্ব যাতে দেখা যায় তার জন্য ট্র্যাক কালারের উপর নির্ভর করা উচিত নয়।

আরও কাস্টমাইজেশন

বেশিরভাগ ব্রাউজার UI, এর চেহারা সম্পূর্ণরূপে কাস্টমাইজ করার জন্য ছদ্ম-এলিমেন্ট প্রকাশ করে, যেমন:

• ::placeholder
• ::spelling-error
• ::grammar-error
• ::selection
• ::search-text
• ::target-text
• ::file-selector-button

আপনি এগুলির যেকোনও একটিতে light-dark() রঙ ব্যবহার করতে পারেন যাতে ব্যবহৃত রঙের স্কিমের সাথে মানানসই রঙ প্রয়োগ করা যায়।

৪. লাইট ও ডার্ক মোডের জন্য আলাদা আলাদা ছবি

CSS ছবির জন্য, বিভিন্ন ছবির ভ্যালু প্রদান করতে light-dark() ব্যবহার করা যেতে পারে।

গুরুত্বপূর্ণ: light-dark()-এর দুটি মানই একই ধরনের হতে হবে। আপনি কোনও ছবির সাথে রঙ যোগ করতে পারবেন না। দুটির মধ্যে একটি যদি ছবি হয়, তাহলে কালার ভ্যালু র‍্যাপ করতে image(<color>) ব্যবহার করুন।

JS-ভিত্তিক থিম শনাক্তকরণ

বেশিরভাগ রঙের স্কিম ব্রাঞ্চিং CSS-এ করা উচিত, যা অটোমেটিক পরিবর্তনের সাথে মানিয়ে নেয়।

যেকোনও JS রিডিং matchMedia("(prefers-color-scheme: dark)").matches-কে অবশ্যই তার change ইভেন্ট ম্যানেজ করতে হবে, কারণ সিস্টেম প্রেফারেন্স যেকোনও সময় পরিবর্তন হতে পারে।

ঐচ্ছিক: কালার-স্কিম টগল প্রয়োগ করা

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

ঐচ্ছিক: কম্পোনেন্ট-নির্দিষ্ট ওভাররাইড

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

আরও তথ্য ও সমস্যার জন্য, কম্পোনেন্ট-নির্দিষ্ট লাইট/ডার্ক থিম দেখুন।

পরিচিত সমস্যা সম্পর্কে সচেতন থাকুন

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

• Chrome ও Firefox, iframe-এর জন্য color-scheme মেনে চলে: এগুলি সঠিক কালার স্কিমে এম্বেড করা পৃষ্ঠা রেন্ডার করে এবং এম্বেড করা পৃষ্ঠার prefers-color-scheme মিডিয়া কোয়েরি অ্যাডজাস্ট করে যাতে এম্বেডিং কনটেক্সটের color-scheme প্রতিফলিত হয়। Safari তা করে না এবং iframe-এর মধ্যেও সিস্টেম সেটিংসে prefers-color-scheme সমাধান করে।
  • আপনি যদি পেরেন্ট ও iframe, দুটিই কন্ট্রোল করেন: পেরেন্টের রঙের স্কিম iframe-এ স্পষ্টভাবে পাস করুন — iframe তৈরি করার সময় URL প্যারামিটার (?theme=dark) বা postMessage()-এর মাধ্যমে (যা আপনাকে রানটাইম পরিবর্তনগুলিতে প্রতিক্রিয়া জানাতে দেয়)। iframe-এ, prefers-color-scheme-এর উপর নির্ভর না করে সেই সিগন্যাল থেকে <html>-এ (এবং/অথবা :root-এ color-scheme) একটি ক্লাস সেট করুন।
  • আপনি যদি শুধুমাত্র এম্বেড করা পৃষ্ঠাটি নিয়ন্ত্রণ করেন: Safari-তে iframe-এর ভিতর থেকে এম্বেডিং কন্টেক্সটের color-scheme শনাক্ত করার কোনও নির্ভরযোগ্য উপায় নেই। আপনার এম্বেড API-তে (যেমন, কোয়েরি স্ট্রিং বা postMessage প্রোটোকল) একটি এক্সপ্লিসিট থিম প্যারামিটার দেখান এবং এম্বেডারদের জন্য এটি ডকুমেন্ট করুন।

ফলব্যাক স্ট্র্যাটেজি

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

color-scheme প্রপার্টি হল প্রোগ্রেসিভ এনহ্যান্সমেন্ট। যেসব ব্রাউজারে এটি কাজ করে না, সেগুলি এই প্রপার্টি উপেক্ষা করবে এবং তাদের ডিফল্ট লাইট-মোড UI ব্যবহার করবে।

পুরনো ব্রাউজারে ব্যবহারকারীর পছন্দ অনুযায়ী অ্যাডাপ্ট করতে, ডার্ক মোড পছন্দ করা হলে বিভিন্ন রঙ প্রদান করতে prefers-color-scheme মিডিয়া কোয়েরি ব্যবহার করুন।

• :root বা html-এ কাস্টম প্রপার্টি চালু করতে মিডিয়া কোয়েরি ব্যবহার করুন
• কোনও কম্পোনেন্টে রঙ ছাড়া অন্য কোনও নির্দিষ্ট ধরনের ডার্ক মোড কাস্টমাইজেশনের প্রয়োজন না হলে, আলাদা আলাদা কম্পোনেন্টে মিডিয়া কোয়েরি ব্যবহার করা এড়িয়ে চলুন।

:root {
  /* Define brand colors for each mode */
  --color-brand-light: #0056b3;
  --color-brand-dark: #00e5ff;
  --color-brand: var(--color-brand-light);

  /* MANDATORY: Fallback for browsers without light-dark support */
  @media (prefers-color-scheme: dark) {
    --color-brand: var(--color-brand-dark);
  }

  /* Ignored in older browsers */
  color-scheme: light dark;
}

button.primary {
    background-color: var(--color-brand);
}

light-dark()-এর জন্য ফলব্যাক ও ব্রাউজার সাপোর্ট

যেসব ব্রাউজার color-scheme সাপোর্ট করে কিন্তু এখনও light-dark() সাপোর্ট করে না, সেগুলির ক্ষেত্রে রঙের লাইট ও ডার্ক ভার্সন প্রথমে কাস্টম প্রপার্টি হিসেবে সংজ্ঞায়িত করতে হবে এবং নিচের উদাহরণের মতো সংশ্লিষ্ট মোডের জন্য রঙ সেট করতে prefers-color-scheme মিডিয়া কোয়েরি ব্যবহার করতে হবে:

:root {
  /* Define browser UI accent color for each mode */
  --brand-accent-light: #0056b3;
  --brand-accent-dark: #00e5ff;
  --accent-color: var(--brand-accent-light);

  /* MANDATORY: Fallback for browsers without light-dark support */
  @media (prefers-color-scheme: dark) {
    --accent-color: var(--brand-accent-dark);
  }

  /* OPTIONAL: use light-dark() for more control of built-in UI colors */
  @supports (color: light-dark(white, black)) {
    --accent-color: light-dark(var(--brand-accent-light), var(--brand-accent-dark));
  }

  /* MANDATORY: Automatically adapt native UI to user system preferences */
  color-scheme: light dark;

  /* Example inherited color property */
  accent-color: var(--accent-color);
}

pre, code {
  color-scheme: dark;

  /* **Mandatory**: any inherited color properties must be set again, even if to the same design tokens */
  accent-color: var(--accent-color);
}

লাইট-ডার্ক() ইমেজ ভ্যালুর জন্য ফলব্যাক ও ব্রাউজার সাপোর্ট

যেসব ব্রাউজার ছবির জন্য light-dark() সাপোর্ট করে না, সেগুলির ক্ষেত্রে সুইচ হিসেবে image-set() ব্যবহার করুন: কাস্টম প্রপার্টি থেকে প্রতিটি বিকল্পকে একটি type() দিন এবং যেটি অ্যাক্টিভ নেই সেটিকে একটি কাজ করে না এমন MIME-এর প্রকার হিসেবে সেট করুন যাতে ব্রাউজার সেই বিকল্পটি বাতিল করে দেয়। অ্যাক্টিভ বিকল্পে কোনও ভ্যালু নেই, তাই এটি type() ছাড়া একটি সাধারণ image-set() বিকল্প।

:root-এ একবার সুইচটি ডিফাইন করুন। প্রতিটি ব্যবহারকারী সাইটে তখন শুধুমাত্র দুটি ছবি ইনলাইন প্রয়োজন, যেমন light-dark()।

:root {
  --light-type: ;
  --dark-type: type("image/do-not-use");

  /* MANDATORY: Fallback for browsers without light-dark() image support */
  @media (prefers-color-scheme: dark) {
    --light-type: type("image/do-not-use");
    --dark-type: ;
  }
}

.hero {
  background-image: image-set(url(hero-light.png) var(--light-type), url(hero-dark.png) var(--dark-type));

  @supports (background-image: light-dark(url("a"), url("b"))) {
    background-image: light-dark(url(hero-light.png), url(hero-dark.png));
  }
}

• শুধু বেছে নেওয়া ছবিটি ডাউনলোড করা হয়েছে।
• রেজোলিউশন এখনও কাজ করে: image-set(url(a-1x.png) 1x var(--light-type), url(a-2x.png) 2x var(--light-type), url(b-1x.png) 1x var(--dark-type), url(b-2x.png) 2x var(--dark-type)).
• অ্যাক্টিভ বিকল্পের জন্য type("") ব্যবহার করবেন না। ব্রাউজার খালি স্ট্রিংকে কাজ করে না হিসেবে বিবেচনা করে এবং প্রতিটি বিকল্প বাদ দেয়।
• light-dark()-এর মতো নয়, সাবট্রি-তে সেট করা color-scheme-কে সুইচ ফলো করে না। ম্যানুয়াল টগল বা color-scheme সেট করে এমন যেকোনও সাবট্রিকে অবশ্যই --light-type ও --dark-type ফ্লিপ করতে হবে।

বিকল্প: প্রতিটি ছবির জন্য একটি কাস্টম প্রপার্টি

এটি সহজ হয় যখন মাত্র কয়েকটি ছবি আলাদা হয়, কিন্তু প্রতিটি ছবির জন্য নিজস্ব মিডিয়া কোয়েরি ব্রাঞ্চ প্রয়োজন হয় এবং ম্যানুয়াল টগল প্রতিটি ছবিকে ফ্লিপ করে।

:root {
  --hero-image: url(hero-light.png);

  @media (prefers-color-scheme: dark) {
    --hero-image: url(hero-dark.png);
  }

  @supports (background-image: light-dark(url("a"), url("b"))) {
    --hero-image: light-dark(url(hero-light.png), url(hero-dark.png));
  }
}

.hero {
  background-image: var(--hero-image);
}

image() ফাংশনের জন্য ফলব্যাক ও ব্রাউজার সাপোর্ট

একটি রঙ স্টপ এবং কোনও পজিশন নেই এমন গ্রেডিয়েন্ট ব্যবহার করুন, যেমন linear-gradient(blue)।

আরও বেশি ব্রাউজার সাপোর্ট করার জন্য, আপনি স্পষ্টভাবে সিঙ্গেল কালার স্টপের জন্য 0 100% পজিশন দিতে পারেন, যেমন linear-gradient(blue 0 100%)।

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

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

স্টাইলিং গুরুত্বপূর্ণ হলে এবং ব্যবহারকারীর বেসলাইন টার্গেট "বেসলাইন ব্যাপকভাবে উপলভ্য" বা তার আগের হলে, আপনার ফলব্যাক হিসেবে নন-স্ট্যান্ডার্ড ::-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);
  }
}

অ্যাকসেন্ট-কালারের জন্য ফলব্যাক ও ব্রাউজার সাপোর্ট

accent-color প্রপার্টি হল প্রোগ্রেসিভ এনহ্যান্সমেন্ট। যেসব ব্রাউজারে এই প্রপার্টি কাজ করে না, সেগুলি এটি উপেক্ষা করবে এবং ডিফল্ট UI কালার ব্যবহার করবে।