جديد على منصة الويب في مايو | مدونة | web.dev

اكتشف بعض الميزات المثيرة للاهتمام التي وصلت إلى متصفحات الويب الثابتة والتجريبية خلال شهر مايو 2026.

تاريخ النشر: 29 مايو 2026

إصدارات متصفح مستقرة

تم إصدار Chrome 148 وFirefox 151 وSafari 26.5 بشكل مستقر خلال شهر مايو. يلقي هذا المنشور نظرة على العديد من الميزات الجديدة هذا الشهر.

ال :open تصبح فئة CSS الزائفة خط الأساس

يعد Safari 26.5 في الغالب إصدارًا لإصلاحات الميزات الموجودة. ومع ذلك، فهو يتضمن أيضًا دعمًا لـ :open
فئة زائفة، مما يجعل هذه الميزة Baseline متاحة حديثًا.

ال :open تتيح لك الفئة الزائفة تصميم العناصر التي لها حالات “مفتوحة” و”مغلقة” عندما تكون مفتوحة. وهذا ينطبق على عناصر مثل
<details> و <dialog> عندما تكون مفتوحة، كذلك <select> و
<input> العناصر (مثل منتقيات اللون أو التاريخ) عندما تظهر واجهات المنتقي الخاصة بها. يوفر هذا بديلاً دلاليًا أنظف للتصميم باستخدام سمات مثل details[open].

تصبح استعلامات حاوية الاسم فقط في CSS بمثابة خط الأساس

مع شحن Chrome 148 هذا الشهر، أصبحت استعلامات الحاويات ذات الأسماء فقط متوفرة الآن بشكل أساسي وحديث.

في السابق، عند كتابة استعلام حاوية، كان مطلوبًا منك تحديد شرط استعلام الحجم أو النمط بجانب اسم الحاوية، وتحديد نوع الحاوية باستخدام الأمر container-type ملكية. الآن يمكنك الاستعلام عن وجود حاوية مسماة من خلال اسمها فقط، دون أي شرط إضافي. علاوة على ذلك، لم تعد بحاجة إلى تعيين container-type على السلف إذا كنت تستفسر بالاسم فقط:

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

تصبح استعلامات نمط الحاوية للخصائص المخصصة هي الأساس

يقدم Firefox 151 الدعم لـ style() الاستفسارات على @container، مما يجعل استعلامات نمط الحاوية للخصائص المخصصة Baseline متاحة حديثًا.

تسمح لك استعلامات نمط الحاوية بتطبيق الأنماط على العناصر بناءً على خصائص CSS للحاوية الأصلية. على الرغم من أن استعلامات الحجم فعالة للغاية، إلا أن استعلامات النمط تمكنك من الاستعلام عن ميزات غير متعلقة بالحجم. وعلى وجه الخصوص، يوفر هذا الإصدار دعمًا كاملاً عبر المستعرضات للاستعلام عن الخصائص المخصصة. على سبيل المثال، يمكنك التحقق مما إذا كانت خاصية مخصصة --theme تم ضبطه على dark على الحاوية الأم:

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

تحميل كسول لعناصر الفيديو والصوت

يقدم Chrome 148 التحميل البطيء الأصلي لـ <video> و <audio> العناصر مع loading="lazy" يصف.

تماما مثل <img> و <iframe> العناصر، يمكنك الآن توجيه المتصفح لتأخير تحميل موارد الوسائط حتى تكون قريبة من إطار العرض. ويساعد ذلك في تحسين أداء تحميل الصفحة وتوفير النطاق الترددي وتقليل استخدام البيانات للمستخدمين. تعرف على المزيد من الفريق الذي قام بتطبيق هذه الميزة في كيفية استخدام التحميل البطيء لفيديو وصوت HTML القياسي على الويب اليوم.

واجهة برمجة تطبيقات صورة داخل صورة للمستند

يقدم Firefox 151 دعمًا لـ Document Picture-in-Picture API على الأنظمة الأساسية لسطح المكتب.

على عكس واجهة برمجة التطبيقات Picture-in-Picture القياسية التي تتيح لك عرض ملف <video>
عنصر في نافذة دائمًا في الأعلى، تتيح لك واجهة برمجة تطبيقات Document Picture-in-Picture فتح نافذة دائمًا في الأعلى تحتوي على محتوى HTML عشوائي. يؤدي ذلك إلى تمكين التراكبات التفاعلية الغنية مثل شبكات المشاركين في مؤتمرات الفيديو أو مؤشرات الأسهم التفاعلية أو الموقتات التي تستمر حتى عند التنقل بعيدًا عن الصفحة.

تعمل Web Serial API على توسيع دعم النظام الأساسي

يضيف Firefox 151 دعمًا لـ Web Serial API على الأنظمة الأساسية لسطح المكتب، ويضيف Chrome 148 دعمًا لها على Android.

توفر Web Serial API طريقة لمواقع الويب للقراءة من الأجهزة التسلسلية والكتابة إليها، على سبيل المثال، وحدات التحكم الدقيقة والطابعات ثلاثية الأبعاد ولوحات التطوير والأجهزة الطرفية. في Firefox، يتطلب استخدام Web Serial API من المستخدمين تثبيت وظيفة إضافية لأذونات الموقع تم إنشاؤها صناعيًا، مما يضمن وجود آلية آمنة ومراقبة لإدارة الوصول.

إصدارات متصفح بيتا

تمنحك إصدارات المتصفح التجريبية معاينة للميزات الموجودة في الإصدار الثابت التالي من المتصفح. إنه الوقت المناسب لاختبار الميزات الجديدة، أو عمليات الإزالة، التي قد تؤثر على موقعك قبل أن يحصل العالم على هذا الإصدار. الإصدارات التجريبية الجديدة هذا الشهر هي Chrome 149 وFirefox 152. ولا يوجد إصدار تجريبي من Safari هذا الشهر.

يتضمن الإصدار التجريبي من Chrome 149 تحديثات CSS مثيرة مثل زخارف فجوات CSS، مما يتيح لك تصميم المسافة البيضاء (الفجوات) بين العناصر المرنة والشبكة. كما أنه يدعم path() و shape() إلى جانب rect() و xywh() وظائف الشكل الأساسية في shape-outside الممتلكات، و path-length كخاصية CSS. من ناحية واجهة برمجة التطبيقات، فإن طرق التمرير الآلية مثل scrollTo(),
scrollBy()، و scrollIntoView() يتم الآن إرجاع الوعود التي يتم حلها عند اكتمال التمرير السلس، ويمكن الآن للصفحات ذات اتصالات WebSocket النشطة التأهل للتخزين المؤقت للخلف/للأمام (BFCache).

يقدم الإصدار التجريبي من Firefox 152 الدعم الكامل لـ field-sizing الخاصية، والتي تتيح لعناصر التحكم في النموذج ضبط حجمها تلقائيًا لتناسب محتوياتها. ويضيف أيضا actions و maxActions خصائص إلى Notification
واجهة، و options.pseudoElement دعم في Element.getAnimations().