تخصيص مظهر واجهة المستخدم التي ينشئها المتصفّح

ميزات الويب: ::selection user-select accent-color color-scheme scrollbar-color scrollbar-width :user-valid و :user-invalid :placeholder-shown ::placeholder field-sizing resize (سمة CSS) <select> قابلة للتخصيص appearance :has() ::file-selector-button

يمكن تخصيص معظم واجهات المستخدم التي ينشئها المتصفّح إلى حدٍّ ما باستخدام CSS. وحتى إذا كان يتطلّب ميزات حديثة، فإنّه يتكيّف مع الإصدارات الأقدم من المتصفّحات، وبالتالي لا يتطلّب غالبًا استخدام polyfill أو إجراء احتياطي.

قبل إعادة إنشاء واجهة مستخدم المتصفّح (عناصر التحكّم في النماذج وأشرطة التمرير والاختيارات ورسائل الخطأ وما إلى ذلك)، تأكَّد أولاً مما يلي:

  1. لا يمكن تخصيص واجهة مستخدم المتصفّح بما يكفي لتلبية احتياجاتك، حتى مع استخدام CSS الحديثة
  2. التخصيص المطلوب مهم بما يكفي لتبرير المفاضلات لإعادة إنشاء واجهة المستخدم المضمنة - وأبرزها فقدان دلالات تسهيل الاستخدام، والتعامل مع لوحة المفاتيح، وأداة IME، وتكامل AT الذي توفره واجهة المستخدم الأصلية مجانًا.

في ما يلي أمثلة على عمليات التخصيص الممكنة:

  • استخدِم ::selection لتخصيص ألوان النص المميَّز.
  • لا تطبّق السمة user-select: none على نص المحتوى، لأنّ ذلك يؤدي إلى تعطيل ميزة النسخ واللصق وأدوات الترجمة وإيماءات "القراءة من هنا" في التكنولوجيا المساعدة. يجب أن يقتصر ذلك على Chrome (مقابض السحب وأشرطة الأدوات وتصنيفات الأزرار المكرّرة).
  • استخدِم accent-color لتطبيق لون التمييز الخاص بالصفحة على أي واجهة مستخدم ينشئها المتصفّح.
  • استخدِم color-scheme لتتكيّف واجهة مستخدم المتصفّح مع الوضع الفاتح أو الداكن.
  • استخدِم scrollbar-color لتخصيص ألوان شريط التمرير وscrollbar-width للتحكّم في سُمك شريط التمرير، مع الحفاظ على تمييز شريط التمرير بشكل واضح عن المسار (بنسبة ≥3:1)، ولا تضبط scrollbar-width: none على المناطق القابلة للتمرير (استخدِمها فقط عندما يتم استبدال التمرير بالكامل بإمكانية أخرى).
  • استخدِم :user-invalid / :user-valid لتنسيق الصلاحية، وليس :invalid / :valid، لأنّها لا تتطابق إلا بعد تفاعل المستخدم مع الحقل، ما يتجنّب الإعداد التلقائي غير المناسب الذي يضع علامة على الحقول الفارغة المطلوبة كأخطاء عند تحميل الصفحة. استبعِد أشرطة تمرير النطاق عند استهداف input بشكل عام (مثل input:not(input[type="range"]):user-valid) كي لا يؤدي تعديل شريط التمرير إلى تطبيق حدود أو خلفيات صلاحية الحقل عليه.
  • يمكن بشكل عام تصميم الأزرار وحقول النص (بما في ذلك <textarea>) كعناصر عادية.
  • استخدِم font-size لتغيير الحجم وسمات نصية أخرى للتحكّم في أسلوب الخطوط

تنسيق الحقول النصية (<input> و<textarea>)

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

  • استخدِم :placeholder-shown و::placeholder لتنسيق العناصر النائبة للإدخال.
  • استخدِم field-sizing: content لضبط حجم الحقول النصية بما يتناسب مع المحتوى.
  • بالنسبة إلى عناصر <textarea>، استخدِم resize: vertical لإيقاف تغيير الحجم أفقيًا أو resize: none لإيقاف تغيير الحجم بالكامل.

عناصر تحكّم الخيارات المتعدّدة (القوائم المنسدلة وأزرار الاختيار ومربّعات الاختيار)

  • لتحديد خيار واحد من بين خيارات متعددة في قائمة منسدلة: استخدِم <select> + appearance: base-select + ::picker(select). لمزيد من المعلومات، يُرجى الاطّلاع على Branded Select Styling.
  • تحديد خيار واحد أو أكثر من بين خيارات متعددة معروضة في الصفحة: استخدِم <input type=checkbox> أو <input type=radio> داخل <label> لكل خيار. يمكنك اختيار النمط من خلال "label:has(:checked)".
  • يمكنك تصميم مربّعات الاختيار وأزرار الاختيار ومفاتيح التبديل من خلال appearance: none والمحتوى الذي يتم إنشاؤه (::before/::after) أو صور الخلفية لرسم الحالة التي تم وضع علامة عليها.

<input> غير نصية (أزرار وأشرطة تمرير وإدخالات ملفات وما إلى ذلك)

  • إدخالات الملفات: استخدِم ::file-selector-button لتنسيق الزر.
  • لا تستخدِم السمة <input> مع السمة type التي تحمل القيمة button أو submit أو reset. استخدِم <button> بدلاً من ذلك وصمِّمه كعنصر عادي.
  • أشرطة التمرير: استخدِم appearance: none مع العناصر الزائفة الخاصة بمؤشر شريط التمرير (::-webkit-slider-thumb و::-moz-range-thumb وما إلى ذلك) والعناصر الزائفة الخاصة بمسار شريط التمرير (::-webkit-slider-runnable-track و::-moz-range-track وما إلى ذلك) لمزيد من التحكّم الدقيق.