لون تمييز CSS

يمكنك استخدام لون علامتك التجارية في مدخلات نموذج HTML المضمّنة باستخدام سطر واحد من الرمز.

Adam Argyle

Joey Arhar

من الصعب تضمين عناصر HTML في الوقت الحالي وتخصيصها. يبدو الأمر كما لو كانت الاختيار ما بين عدد قليل من الأنماط المخصصة أو عدم استخدامها، أو إعادة تعيين أنماط الإدخال إنشائها من نقطة الصفر. يصبح إنشاء المحتوى من نقطة الصفر أكثر عملاً مما كان متوقعًا. يمكن أن يؤدي أيضًا إلى أنماط منسية لحالات العناصر (غير محدد، أنا أنظر إليك)، بالإضافة إلى فقدان ميزات إمكانية الوصول المضمنة. قد تتطلب إعادة إنشاء ما يوفره المتصفح بشكل كامل عملاً أكثر مما تتطلع إلى القيام به.

accent-color: hotpink;

CSS accent-color من واجهة مستخدم CSS المواصفات هنا للتلوين باستخدام سطر واحد من CSS، ما يوفّر عليك جهود التخصيص من خلال توفير طريقة لإدخال علامتك التجارية في العناصر.

تعمل السمة accent-color أيضًا مع color-scheme، ما يسمح للمؤلفين بتلوين كليهما العناصر الفاتحة والداكنة. في المثال التالي، عندما يكون مظهر المستخدم داكنًا نشطًا، تستخدم الصفحة color-scheme: light dark، ويستخدم accent-color: hotpink نفسه للوضع الداكن عناصر التحكّم الملوَّنة بألوان زهرية ساخنة.

العناصر المتوافقة

في الوقت الحالي، ستتم إعادة تلوين أربعة عناصر فقط باستخدام السمة accent-color: مربع اختيار وراديو ونطاق التقدّم: يمكن معاينة كل منها هنا https://accent-color.glitch.me الألوان الداكنة.

مربّع اختيار

راديو

النطاق

مدى التقدُّم

ضمان التباين

لمنع ظهور العناصر التي يتعذّر الوصول إليها في المتصفّحات الحالية من خلال accent-color يحتاجون إلى تحديد تباين مؤهل color (اللون) إلى جانب السمة المخصّصة نبرة. في ما يلي لقطة شاشة توضّح طريقة استخدام الإصدارَين Chrome 94 (على اليمين) وFirefox 92 تختلف إعدادات الليل في الليل في الخوارزميات:

والأمر الأهم هو الوثوق في المتصفّح. قدِّم لونًا للعلامة التجارية، واثق بأنّ ذلك سيتّخذ قرارات ذكية بالنيابة عنك.

ميزة إضافية: مزيد من التلوين الخفيف

قد تتساءل عن كيفية تلوين أكثر من عناصر النموذج الأربعة هذه؟ إليك الحد الأدنى من وضع الحماية الذي يخفف:

• حلقة التركيز
• تمييزات النص المحدّد
• سرد العلامات
• مؤشرات الأسهم (Webkit فقط)
• إبهام شريط التمرير (Firefox فقط)

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 مع أداة الاختيار، وقد يتم تمت الإضافة إلى هذه المقالة!