شرح صفوف ومحتوى الفقرة
يؤدي استخدام المحدد الخام input:invalid إلى تجربة مربكة ومزعجة؛ لأن جميع الحقول الإلزامية الفارغة تشتعل باللون الأحمر فور فتح الصفحة قبل أن يلمس الزائر لوحة المفاتيح! وتعالج اللغة الحديثة هذه المشكلة بأناقة عبر :user-invalid و:user-valid اللذين لا ينشطان إلا بعد تفاعل المستخدم الفعلي مع الحقل أو محاولة الإرسال.
احرص دائماً على إرفاق ألوان الصحة الخضراء والخطأ الحمراء بنص إرشادي واضح أو رمز مساعد، ولا تعتمد على اللون وحده مراعاةً للمستخدمين المصابين بعمى الألوان.
CSS
.form-grid { display: grid; gap: 14px; }
@media (min-width: 640px) {
.form-grid { grid-template-columns: repeat(2, 1fr); }
}
.field:user-valid { border-color: #0f766e; }
.field:user-invalid { border-color: #dc2626; }| الميزة | الصياغة القياسية | وظيفتها في هندسة النماذج |
|---|---|---|
| توريث الخط | font: inherit | مطابقة خط وحجم الحقول والأزرار مع نص الصفحة |
| تقييد التمدد | resize: vertical | منع السحب الأفقي لمساحات النص من كسر الشبكة |
| تجريد المظهر | appearance: none | إزالة إطار النظام القديم لبناء قوائم ومفاتيح مخصصة |
| لون الاختيار | accent-color: #7750b2 | تلوين مربعات الاختيار وأزرار الانتقاء بسطر واحد |
| حلقة التركيز | :focus-visible | إبراز الحقل النشط بوضوح لمستخدمي لوحة المفاتيح |
| التحقق الهادئ | :user-valid و:user-invalid | إظهار ألوان الصحة والخطأ بعد تفاعل المستخدم فعلياً |