Safari 27 يجعل عنصر select الأصلي قابلًا للتخصيص

صدر Safari 27.0 في 16 سبتمبر 2026. تُدرج ملاحظات الإصدار من Apple البنية 27.0 (20625.1.29) لأجل iOS 27 وiPadOS 27 وvisionOS 27 وmacOS 27 وmacOS 26 وmacOS Sequoia. ويحصي ملخّص Web Standards، المنشور في 17 سبتمبر، 83 ميزة جديدة.

الإصدار عريض لا عميق: محمّل وحدات ES مُعاد كتابته، وتخطيط سطري بدقة تحت البكسل، وتثبيت التمرير الذي لا يحتاج إلى تفعيل، وواجهة التوجيه الساكن لعامل الخدمة، وسلسلة طويلة من إصلاحات الوصول. ميزتان من الـ83 تحددان ما يمكن لنموذج مُضمَّن في صفحة يملكها غيره أن يفترضه: عنصر select أصلي يمكن تنسيقه، وطريقة لإعلان رسالة دون منطقة حيّة.

عنصر select الأصلي صار قابلًا للتنسيق

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

select,
select::picker(select) {
  appearance: base-select;
}

• يستهدف ::picker(select) النافذة المنبثقة نفسها، ويستهدف ::picker-icon سهمها.

• يستهدف ::checkmark العلامة في الصف المختار.

• يحدد selectedcontent ما يعرضه الحقل المغلق للخيار الحالي، فيمكن أن يكون الملخص ترميزًا لا نسخة من التسمية.

• يمكن للخيار option أن يحمل الآن HTML، فيمكن أن يحمل أيقونة أو تسمية من سطرين.

لا شيء من ذلك يستبدل الحقل. فهو ما زال حقل نموذج حقيقيًا، لذا يظل التنقل بلوحة المفاتيح ودلالات قارئ الشاشة وإرسال النموذج والتحقق من القيود وحدث change عاملة. القائمة المنسدلة المعاد بناؤها من عناصر div تتخلى عن كل ذلك ثم تعيد بناء نسخة أسوأ. أما اختيار base-select فلا.

ariaNotify() دون منطقة حيّة

تضيف ملاحظات إصدار Apple دعم واجهة ariaNotify، التي تضع نصًا في قائمة انتظار ليعلنه قارئ الشاشة دون منطقة ARIA حيّة. وفي النماذج يسدّ هذا ثغرة محددة. المنطقة الحيّة تتكلم حين يتغير محتواها، لذا ملخص خطأ يعيد الجملة نفسها لا ينتج تغييرًا ولا إعلانًا. أما ariaNotify() فتضع الرسالة نفسها في قائمة الانتظار.

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

ما يجب اختباره في نموذج مُضمَّن

• عنصر select المغلق على قائمة خيارات طويلة، في الوضعين الفاتح والداكن.

• عنصر select داخل تخطيط المكوّن المولَّد نفسه، عند 320px.

• ملخص خطأ يُعلَن مرة واحدة لا مرتين.

• وضع forced-colors، لأن base-select يأتي بأنماط افتراضية خاصة به.

يعرض المكوّن المولَّد من FormFlow حقول نماذج HTML أصلية، لذا يمكن لأنماط Safari الافتراضية الجديدة أن تصل إلى نموذج مُضمَّن دون أي تغيير من جهتنا. لم نتحقق من المكوّن المولَّد على Safari 27 لأجل هذا المقال، ولن نوحي بأننا فعلنا. إن كنت تضع نموذجًا مُضمَّنًا، فاعرضه في إصدارات Safari التي تدعمها قبل أن تعتمد على المظهر الافتراضي.

ما لا يحسمه هذا

إصدار Safari لعنصر select قابل للتخصيص لا يجعله قابلًا للتشغيل البيني. يقول ملخّص Web Standards إن التصميم الافتراضي الجديد ذهب إلى مجموعة عمل CSS لمزيد من الصقل، وإن نقطة انطلاق متطابقة تعتمد على تحديث المتصفحات الأخرى لتطبيقاتها. التنسيق الذي يبدو صحيحًا في Safari 27 قد يبدو خاطئًا في محرك آخر في اليوم نفسه.

ariaNotify() إضافة متصفح لا معيار نماذج. لا تحدد أي الإعلانات مناسب، ولا تستبدل تسمية أو fieldset مع legend أو خطأ مرئي بجانب الحقل.

لا شيء هنا بيان دعم من FormFlow لـ Safari 27، ولا شيء هنا يغيّر سلوك نموذج مُضمَّن في إصدار Safari لا يقدّم هذه الميزات. أما عقد POST الذي يرسل إليه النموذج المُضمَّن، فاقرأ مرجع API.