CSS لهجه رنگ

رنگ نام تجاری خود را با یک خط کد به ورودی های فرم HTML داخلی بیاورید.

آدام آرگیل
جوی آرهر

سفارشی کردن عناصر فرم HTML امروزی دشوار است. به نظر می رسد انتخابی بین چند سبک سفارشی یا عدم وجود سبک های سفارشی یا بازنشانی سبک های ورودی و ایجاد آن از ابتدا است. ساختن آن از ابتدا بسیار بیشتر از آنچه پیش بینی می شد کار می کند. همچنین می‌تواند به سبک‌های فراموش‌شده برای حالت‌های عنصر ( نامشخص ، من به شما نگاه می‌کنم) و از بین رفتن ویژگی‌های دسترسی داخلی منجر شود. بازآفرینی کامل آنچه که مرورگر ارائه می دهد، ممکن است کار بیشتری نسبت به آنچه می خواهید انجام دهید، باشد.

accent-color: hotpink;

accent-color CSS از مشخصات CSS UI اینجاست تا عناصر را با یک خط 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 باید یک رنگ کنتراست واجد شرایط را برای استفاده در کنار لهجه سفارشی تعیین کنند. در زیر تصویری از تفاوت کروم 94 (سمت چپ) و فایرفاکس 92 شبانه (راست) در الگوریتم هایشان نشان داده شده است:

تصویری از فایرفاکس و کرومیوم در کنار هم که طیف کاملی از چک باکس ها را در رنگ ها و تاریکی های مختلف ارائه می دهد.

مهمترین چیزی که باید از این موضوع حذف کرد، اعتماد به مرورگر است. یک رنگ برند ارائه دهید و اعتماد کنید که تصمیمات هوشمندانه ای برای شما خواهد گرفت.

اضافی: رنگ آمیزی بیشتر

شاید از خود بپرسید که چگونه می توان بیشتر از این چهار عنصر فرم را رنگ آمیزی کرد؟ در اینجا یک جعبه شنی مینیمال است که رنگ می گیرد:

  • حلقه فوکوس
  • نکات برجسته انتخاب متن
  • نشانگرهای لیست
  • نشانگرهای پیکان (فقط وب کیت)
  • انگشت شست نوار اسکرول (فقط فایرفاکس)
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 به چهار عنصر نشان داده شده در این مقاله محدود نمی کند، پشتیبانی بیشتری می تواند بعدا اضافه شود. عناصری مانند <option> انتخاب شده در <select> را می توان با accent-color برجسته کرد.

چه چیز دیگری را دوست دارید در وب رنگ آمیزی کنید؟ @argyleink را با انتخابگر خود توییت کنید و ممکن است به این مقاله اضافه شود!