يمكنك إضافة لون علامتك التجارية إلى إدخالات نموذج HTML المضمّنة باستخدام سطر واحد من الرمز.
يصعب تخصيص عناصر نموذج 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 إلى تحديد لون تباين مؤهّل لاستخدامه مع اللكنة المخصّصة. في ما يلي لقطة شاشة توضّح أوجه الاختلاف بين الإصدار 94 من متصفّح Chrome (على اليسار) والإصدار 92 من 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.
ما الذي تريد التلوين أيضًا فيه على الويب؟ يمكنك نشر تغريدة على Twitter @argyleink مع أداة الاختيار التي تستخدمها، وقد تتم إضافتها إلى هذه المقالة.