CSS অ্যাকসেন্ট-রঙ

এক লাইন কোডের সাহায্যে আপনার ব্র্যান্ডের রঙকে বিল্ট-ইন HTML ফর্ম ইনপুটগুলিতে আনুন।

Adam Argyle

Joey Arhar

প্রকাশিত: ১১ আগস্ট, ২০২১

আজকের HTML ফর্ম এলিমেন্টগুলি কাস্টমাইজ করা কঠিন । মনে হচ্ছে এটি কয়েকটি অথবা কোনও কাস্টম স্টাইল নেই, অথবা ইনপুট স্টাইল রিসেট করে স্ক্র্যাচ থেকে তৈরি করার মধ্যে একটি পছন্দ। স্ক্র্যাচ থেকে তৈরি করা প্রত্যাশার চেয়ে অনেক বেশি কাজ করে। এটি এলিমেন্ট স্টেটগুলির জন্য ভুলে যাওয়া স্টাইল ( অনির্দিষ্ট , আমি আপনার দিকে তাকিয়ে আছি) এবং অন্তর্নির্মিত অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলি হারাতে পারে। ব্রাউজার যা সরবরাহ করে তা সম্পূর্ণরূপে পুনরায় তৈরি করা আপনার চেয়ে বেশি কাজ হতে পারে।

accent-color: hotpink;

CSS UI স্পেসিফিকেশন থেকে CSS accent-color এখানে একটি লাইন CSS দিয়ে উপাদানগুলিকে রঙ করার জন্য রয়েছে, যা আপনার ব্র্যান্ডকে উপাদানগুলিতে আনার একটি উপায় প্রদান করে কাস্টমাইজেশন প্রচেষ্টা থেকে আপনাকে বাঁচায়।

ডেমো

accent-color প্রোপার্টিটি color-scheme সাথেও কাজ করে, যা লেখকদের হালকা এবং গাঢ় উভয় উপাদানকেই রঙ করার সুযোগ দেয়। নিম্নলিখিত উদাহরণে ব্যবহারকারীর একটি গাঢ় থিম সক্রিয় রয়েছে, পৃষ্ঠাটি color-scheme: light dark ব্যবহার করে এবং গাঢ় থিমযুক্ত হটপিঙ্ক টিন্টেড কন্ট্রোলের জন্য একই accent-color: hotpink ব্যবহার করে।

ডেমো

সমর্থিত উপাদান

বর্তমানে, শুধুমাত্র চারটি উপাদান accent-color প্রোপার্টির মাধ্যমে রঙিন হবে: চেকবক্স , রেডিও , রেঞ্জ এবং প্রোগ্রেস । প্রতিটি উপাদান https://accent-color.glitch.me এখানে হালকা এবং গাঢ় রঙের স্কিমে প্রিভিউ করা যাবে।

সতর্কতা: যদি নিম্নলিখিত ডেমো উপাদানগুলি একই রঙের হয়, তাহলে আপনার ব্রাউজার এখনও accent-color সমর্থন করে না।

চেকবক্স

রেডিও

পরিসর

অগ্রগতি

বৈসাদৃশ্যের নিশ্চয়তা

অ্যাক্সেসযোগ্য উপাদানগুলি বিদ্যমান না থাকার জন্য, accent-color ব্রাউজারগুলিকে কাস্টম অ্যাকসেন্টের পাশাপাশি ব্যবহারের জন্য একটি উপযুক্ত কনট্রাস্ট রঙ নির্ধারণ করতে হবে। নীচে একটি স্ক্রিনশট দেওয়া হল যা দেখায় যে Chrome 94 (বামে) এবং Firefox 92 Nightly (ডানে) তাদের অ্যালগরিদমে কীভাবে পার্থক্য করে:

এর থেকে সবচেয়ে গুরুত্বপূর্ণ যে জিনিসটি বাদ দেওয়া উচিত তা হল ব্রাউজারকে বিশ্বাস করা । একটি ব্র্যান্ডের রঙ দিন, এবং বিশ্বাস করুন যে এটি আপনার জন্য বুদ্ধিদীপ্ত সিদ্ধান্ত নেবে।

দ্রষ্টব্য: গাঢ় থিমে ব্রাউজার আপনার রঙ পরিবর্তন করবে না।

অতিরিক্ত: আরও রঙিনকরণ

তুমি হয়তো ভাবছো কিভাবে এই চারটি ফর্ম এলিমেন্টের চেয়ে বেশি রঙ করা যায়? এখানে একটি ন্যূনতম স্যান্ডবক্স দেওয়া হল যা রঙ করে:

• ফোকাস রিং
• টেক্সট নির্বাচনের হাইলাইটস
• তালিকা চিহ্নিতকারী
• তীর নির্দেশক (শুধুমাত্র ওয়েবকিট)
• স্ক্রলবার থাম্ব (শুধুমাত্র ফায়ারফক্স)

html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

সম্ভাব্য ভবিষ্যৎ

এই স্পেকটি এই নিবন্ধে দেখানো চারটি উপাদানের মধ্যে accent-color প্রয়োগ সীমাবদ্ধ করে না, পরবর্তীতে আরও সমর্থন যোগ করা যেতে পারে। <select> এ নির্বাচিত <option> এর মতো উপাদানগুলিকে accent-color দিয়ে হাইলাইট করা যেতে পারে।

ওয়েবে আর কী রঙ করতে আপনার ভালো লাগে? আপনার নির্বাচক দিয়ে @argyleink টুইট করুন এবং এটি এই নিবন্ধে যোগ করা হতে পারে!