تاريخ النشر: 27 مايو 2026
مرحبًا بك في الملخّص الشهري لمجموعة ميزات Baseline. في أبريل 2026، أصبحت بعض إمكانات CSS وأدوات الرياضيات الدقيقة متاحة حديثًا، بينما أصبحت العناصر الدلالية الهيكلية والإضافات الأخرى إلى Web API متاحة على نطاق واسع، بالإضافة إلى الأحداث في منتدى المطوّرين.
مجموعة ميزات Baseline وإمكانية الوصول في عام 2026
يعني التصميم للويب إنشاء تجربة يمكن للجميع استخدامها، وتوضّح مقالة حديثة من A11y Up أنّ مراعاة احتياجات تسهيل الاستخدام يكون أكثر فعالية عندما يعتمد المطوّرون على معايير الويب. لفترة من الوقت، قدّم المهندسون حلول JavaScript مخصّصة وثقيلة في كثير من الأحيان لإعادة إنشاء الأنماط التي يمكن الوصول إليها والتي أصبحت الآن جزءًا من منصة الويب. تكون هذه الحلول المخصّصة ضعيفة في بعض الأحيان، وعُرضة للتعطّل في ظلّ التكنولوجيا المساعدة، ويصعب صيانتها.
توضّح المقالة أنّه عندما تحقق ميزات منصة الويب إمكانية التشغيل التفاعلي بين المتصفّحات، فإنّها تجعل عملية التطوير مع مراعاة تسهيل الاستخدام مهمة أكثر فعالية. يؤدي استخدام ميزات الويب لتحقيق الأهداف الشائعة وأنماط واجهة المستخدم إلى معالجة الكثير من المهام الصعبة، ما يؤدي إلى عرض الدلالات المناسبة مباشرةً لقارئات الشاشة وأدوات التنقّل باستخدام لوحة المفاتيح بسلاسة. تعمل مجموعة ميزات Baseline كدليل هنا، ما يشير إلى اللحظة التي تصبح فيها ميزة الويب ناضجة بما يكفي لتقييمها واستخدامها في مشاريعك.
الميزات المتاحة حديثًا في مجموعة ميزات Baseline
تتوفّر الميزات الواردة في هذا القسم اعتبارًا من أبريل 2026 في مجموعة المتصفّحات الأساسية، وهي متاحة حديثًا الآن في مجموعة ميزات Baseline.
دالة CSS contrast-color()
أجبرت محرّكات النماذج الديناميكية والمكوّنات القابلة للتخصيص المطوّرين على صيانة أنظمة ألوان متعدّدة لاستيعاب تفضيل المستخدم للتباين العالي. تنقل دالة CSS contrast-color() عبء الصيانة هذا بالكامل إلى المتصفّح. من خلال تمرير لون إدخال أساسي إلى الدالة، يقيّم المحرّك لونًا مصاحبًا عالي التباين ويعرضه، وعادةً ما يتم ربطه باللون الأسود أو الأبيض استنادًا إلى اللون الذي يحقّق أعلى درجة من إمكانية القراءة.
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
يتيح لك ذلك استيفاء المعايير التي يمكن الوصول إليها لإمكانية القراءة، بدون حلّ مخصّص أو CSS يصعب صيانته. على الرغم من أنّه يجب أن تظل تراقب خيارات الألوان ذات الدرجات المتوسطة، فإنّ هذه الدالة تقلّل من CSS النمطي المطلوب للتعامل مع هذا التفضيل لدى المستخدم. يمكنك الاطّلاع على مزيد من المعلومات في صفحة مرجع MDN للدالة contrast-color().
Math.sumPrecise()
يمكن أن يؤدي جمع تسلسلات الأرقام باستخدام الحلقات أو الطرق العادية، مثل Array.prototype.reduce()، إلى فقدان الدقة في الأرقام العشرية. ويمكن أن يؤثر ذلك في العمليات الحسابية المالية المهمة أو إجماليات بيانات القياس عن بُعد.
تعالج طريقة Math.sumPrecise() هذه المشكلة. تقبل هذه الطريقة عددًا قابلاً للتكرار من الأرقام وتنفّذ روتينًا آمنًا للدقة لتقديم مجموع دقيق. يمكنك الاطّلاع على الآليات في مستندات MDN لطريقة Math.sumPrecise().
الميزات المتاحة على نطاق واسع في مجموعة ميزات Baseline
أصبحت الميزات التالية متاحة على نطاق واسع في مجموعة ميزات Baseline، ما يعني أنّها متوافقة الآن على نطاق واسع ويمكن استخدامها في مشاريعك.
<search> عنصر
يعمل عنصر HTML <search> كغلاف صريح لعناصر التحكّم في النماذج وآليات الفلترة وأدوات الإرسال التي تمثّل مجتمعةً تجربة بحث على تطبيق ويب.
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
من خلال تبديل عنصر حاوٍ إلى العلامة <search>، يمكنك توفير ميزة تسهيل الاستخدام للمستخدمين. يُعيِّن المتصفّح تلقائيًا دورًا ضمن مَعلم ARIA الضمني هو search للعنصر، ما يزيل الحاجة إلى تحديد role="search" في العنصر <form>. يتيح ذلك لقارئات الشاشة تحديد واجهات البحث ومساعدة المستخدمين في التنقّل إليها. يمكنك قراءة تفاصيل التنفيذ في صفحة MDN للعنصر <search>.
الوصول إلى المفتاح العام لمصادقة الويب
أصبح استخدام Web Authentication (WebAuthn) API بدون كلمة مرور أقل تعقيدًا بفضل الدعم الواسع لأدوات استخراج السمات المباشرة على واجهة AuthenticatorAttestationResponse. باستخدام طرق، مثل getPublicKey() وgetPublicKeyAlgorithm()، يستخرج المتصفّح تفاصيل المفتاح العام لك بدون الحاجة إلى التعامل مع البيانات الثنائية الأولية. يمكنك التعرّف على مزيد من المعلومات حول هذه السمات وكيفية استخدامها في صفحة MDN لواجهة AuthenticatorAttestationResponse.
String.prototype.isWellFormed() وString.prototype.toWellFormed()
يتم ترميز سلاسل JavaScript باستخدام UTF-16، ما يؤدي إلى ربط الأحرف المعقّدة والرموز التعبيرية في أزواج Unicode. إذا تم تقسيم سلسلة بدون مراعاة ذلك، فستبقى أنصاف معزولة من زوج بديل، تُعرف باسم البدائل الفردية، ما يؤدي إلى ظهور نص غير صالح.
تتيح الدالة isWellFormed() للمطوّرين التحقّق مما إذا كانت السلسلة تحتوي على بدائل فردية وتعرض قيمة منطقية. إذا لم تجتز السلسلة عملية التحقّق من الصحة، يمكنك استدعاء toWellFormed() لاستبدال البدائل غير الصالحة بحرف الاستبدال العادي في يونيكود (U+FFFD). يكون ذلك مفيدًا قبل استدعاء دوال، مثل encodeURI()، التي ستطرح URIError عند مواجهة إدخالات غير صالحة. يمكنك التعرّف على طريقة عمل هذه الطرق في مستندات MDN للدالة String.prototype.isWellFormed().
عرض سمات ARIA
كان يتطلب تعديل حالات تسهيل الاستخدام على العناصر التفاعلية عمليات تبادل البيانات من خلال طرق سمات DOM العادية، مثل element.setAttribute('aria-expanded', 'true'). يُبسّط عرض سمات ARIA ذلك من خلال عكس خصائص تسهيل الاستخدام كخصائص كائن.
تعكس واجهة Element سمات ARIA مباشرةً إلى خصائص المثال، مثل element.ariaExpanded وelement.ariaChecked وelement.ariaHidden. يتيح لك ذلك تعديل حالات تسهيل الاستخدام باستخدام بنية التدوين النقطي:
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
إنّ التعامل مع أهداف ARIA كخصائص JavaScript يتيح لأُطر واجهة المستخدم وأدوات إدارة الحالة تنسيق السياقات المساعدة بشكل أكثر موثوقية، ويساعد في إبقاء سياقات قارئ الشاشة متوافقة مع حالة تطبيقك الفعلية. للحصول على قائمة كاملة بالخصائص المعروضة، يمكنك الاطّلاع على دليل MDN حول خصائص مثال Element.
في الختام
يُرجى إعلامنا إذا فاتنا أي شيء ذي صلة بمجموعة ميزات Baseline، وسنتأكّد من تضمينه في إصدار مستقبلي. إذا كانت لديك أي أسئلة أو أردت تقديم ملاحظات حول مجموعة ميزات Baseline، يمكنك تسجيل مشكلة في أداة تتبُّع المشاكل.