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

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

Adam Argyle

Joey Arhar

আজকের 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 সমর্থন করে না।

চেকবক্স

রেডিও

পরিসর

অগ্রগতি

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

বিদ্যমান থেকে অ্যাক্সেসযোগ্য উপাদানগুলিকে প্রতিরোধ করতে, 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 টুইট করুন এবং এটি এই নিবন্ধে যুক্ত হতে পারে!