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

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

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

accent-color: hotpink;

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

ব্রাউজার সমর্থন

  • ক্রোম: 93।
  • প্রান্ত: 93।
  • ফায়ারফক্স: 92।
  • সাফারি: 15.4.

উৎস

একটি অ্যাকসেন্ট-রঙের ডেমোর একটি হালকা থিম স্ক্রিনশট যেখানে চেকবক্স, রেডিও বোতাম, একটি রেঞ্জ স্লাইডার এবং অগ্রগতি উপাদান সবই হটপিঙ্ক রঙের।
ডেমো

accent-color বৈশিষ্ট্যটি color-scheme সাথেও কাজ করে, যা লেখকদের হালকা এবং অন্ধকার উভয় উপাদানকে আভা দিতে দেয়। নিম্নলিখিত উদাহরণে ব্যবহারকারীর একটি অন্ধকার থিম সক্রিয় রয়েছে, পৃষ্ঠাটি color-scheme: light dark , এবং একই accent-color: hotpink

একটি অ্যাকসেন্ট-কালার ডেমোর একটি গাঢ় থিমের স্ক্রিনশট যেখানে চেকবক্স, রেডিও বোতাম, একটি রেঞ্জ স্লাইডার এবং অগ্রগতি উপাদান সবই হটপিঙ্ক রঙের।
ডেমো

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

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

চেকবক্স

রেডিও

পরিসর

অগ্রগতি

গ্যারান্টি বৈসাদৃশ্য

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

ফায়ারফক্স এবং ক্রোমিয়ামের একটি স্ক্রিনশট পাশাপাশি, বিভিন্ন রঙ এবং অন্ধকারে চেকবক্সের একটি সম্পূর্ণ বর্ণালী রেন্ডার করছে।

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

অতিরিক্ত: আরো tinting

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

  • ফোকাস রিং
  • পাঠ্য নির্বাচন হাইলাইট
  • তালিকা চিহ্নিতকারী
  • তীর সূচক (শুধুমাত্র ওয়েবকিট)
  • স্ক্রলবার থাম্ব (শুধু ফায়ারফক্স)
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 টুইট করুন এবং এটি এই নিবন্ধে যুক্ত হতে পারে!