تنسيق Branded Select

توفّر واجهة برمجة التطبيقات القابلة للتخصيص طريقة تعريفية مستندة إلى CSS لتصميم عناصر <select> لتتطابق تمامًا مع نظام تصميم علامتك التجارية. من خلال تفعيل appearance: base-select، يمكنك الوصول إلى نموذج DOM الداخلي للعنصر المحدّد، ما يتيح لك تصميم الزر وقائمة اختيار الخيارات ورمز السهم ومؤشر علامة الاختيار باستخدام سمات CSS العادية.

في السابق، كان تحقيق علامة اختيار تحمل علامة تجارية بالكامل يتطلّب إعادة إنشاء عنصر التحكّم من الصفر باستخدام JavaScript، ما يؤدي غالبًا إلى تعطُّل أدوات تسهيل الاستخدام والتنقّل باستخدام لوحة المفاتيح ودمج النماذج الأصلية. باستخدام appearance: base-select، يمكنك الحصول على مظهر مخصّص بينما يتعامل المتصفّح مع إدارة التركيز وعرض الطبقة العليا وعمليات ربط أدوات تسهيل الاستخدام.

كيفية الإعداد

لتطبيق نمط "اختيار العلامة التجارية":

1. الموافقة على التخصيص: طبِّق السمة appearance: base-select على كلّ من العنصر <select> والعنصر الزائف ::picker(select) (الذي يستهدف القائمة المنسدلة للخيارات).
2. بناء الزر المخصّص (اختياري): حدِّد عنصر <button> داخل <select> مباشرةً لاستبدال عامل التفعيل التلقائي. استخدِم العنصر <selectedcontent> داخل هذا الزر لتمثيل نص أو محتوى الخيار المحدَّد حاليًا.
3. تنسيق قائمة أداة الاختيار: استخدِم العنصر الزائف ::picker(select) لتطبيق أسلوب الخط وألوان الخلفية والحدود والظلال على القائمة المنسدلة. يعرض المتصفّح هذا في الطبقة العليا، ما يجعل تعارضات z-index شيئًا من الماضي.
4. تنسيق الرموز الداخلية:
   • استخدِم select::picker-icon لتنسيق رمز السهم أو استبداله.
   • استخدِم option::checkmark لتنسيق مؤشر علامة صح بجانب الخيار النشط.
5. خيارات الأنماط: يمكنك تطبيق الأنماط على عناصر <option> لحالات التمرير والحشو والتنسيق.

مثال على الرمز: Branded Courier Select

يوضّح المثال التالي قائمة اختيار مخصّصة تم تصميمها بخط أحادي المسافة وحدود متقطّعة لتتطابق مع جمالية علامة تجارية معيّنة لـ "الطرود".

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

التنفيذ الاستراتيجي وأفضل الممارسات

• يُرجى استخدام appearance: base-select عندما يتطلّب نظام التصميم اتساقًا مرئيًا عالي الدقة في جميع عناصر التحكّم في النماذج التي لا يمكن تحقيقها من خلال عمليات إلغاء الاختيار العادية في جميع المتصفّحات.
• لا تستخدِم هذا الخيار إذا كنت تعتمد على تجربة أداة الاختيار الأصلية لنظام التشغيل (مثل أداة اختيار عجلة التمرير العادية على أجهزة iOS). يؤدي تفعيل ميزة "base-select" إلى إيقاف عناصر التحكّم في واجهة المستخدم الأصلية للأجهزة الجوّالة واستخدام قوائم الطبقة العليا المعروضة على الويب بدلاً منها.
• يجب التحقّق من أنّ تباين الألوان يستوفي معايير WCAG. تتيح لك أداة الاختيار القابلة للتخصيص ضبط ألوان مخصّصة، ولكن تقع على عاتقك مسؤولية ضمان بقاء النص مقروءًا على الخلفيات المخصّصة.
• اختبار سلوك التنسيق يؤدي ضبط السمة appearance: base-select إلى إزالة السلوك التلقائي للمتصفّح المتمثّل في تحديد حجم القائمة المنسدلة استنادًا إلى عرض أطول خيار فيها. قد تحتاج إلى ضبط عرض ثابت أو استخدام قيود flex/grid لمنع متغيّرات التصميم.
• تأكَّد من أنّ <select> يتضمّن سمة name و<label> مرتبطة بها. يضمن ذلك أن يظلّ المكوّن متاحًا لبرامج قراءة الشاشة ويعمل بشكل صحيح مع عمليات إرسال النماذج العادية، حتى مع واجهة مستخدم مخصّصة.
• استخدِم سمات value العادية في الخيارات لضمان عمل عملية إرسال النموذج تمامًا كما في السابق.

استراتيجيات احتياطية

<select> القابل للتخصيص: البدائل والمتصفّحات المتوافقة

بالنسبة إلى المتصفّحات التي لا تتيح استخدام appearance: base-select بعد، يتم الرجوع إلى استخدام عنصر <select> كقائمة منسدلة عادية في نظام التشغيل.

• تجاهل المحتوى غير النصي: تزيل المتصفحات القديمة علامات HTML (مثل <svg> أو <div>) داخل علامات <option> وتعرض فقط عُقد النص. تأكَّد من أنّ المحتوى النصي لـ <option> واضح ومفهوم بحد ذاته.
• التعامل مع بنية HTML: قد تتجاهل المحللات اللغوية العادية علامتَي <button> و<selectedcontent> داخل <select> أو تعتبرهما غير صالحتَين. لا يلزم استخدام polyfills لـ JavaScript ثقيلة من أجل التحسين التدريجي إذا كنت تعرض نصًا عاديًا كبديل قابل للقراءة.

document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});