جديد على منصة الويب في أيار (مايو)

تعرَّف على بعض الميزات المثيرة للاهتمام التي تم طرحها في إصدارات الويب الثابتة والتجريبية من المتصفحات خلال مايو 2026.

Rachel Andrew

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

إصدارات المتصفّح الثابتة

تم طرح Chrome 148 وFirefox 151 وSafari 26.5 في الإصدار الثابت خلال شهر أيار (مايو). تتناول هذه المشاركة العديد من الميزات الجديدة التي تم طرحها هذا الشهر.

ملاحظة: تتضمّن هذه المنشورات بيانات توافق المتصفّحات المستخرجة من MDN، وربما لم تخضع للتعديل بعد لتشمل أحدث إصدارات المتصفّحات. ستعرض المشاركة المعلومات الصحيحة فور ظهورها في إصدار بيانات التوافق مع المتصفح.

تصبح الفئة الصورية :open في CSS هي Baseline

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

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

Browser Support

• 133
• 133
• 136
• 26.5

Source

تصبح طلبات البحث عن الحاويات التي تستند إلى اسم CSS فقط هي Baseline

مع طرح الإصدار 148 من Chrome هذا الشهر، أصبحت طلبات البحث التي تتضمّن الحاوية فقط متاحة الآن في Baseline Newly.

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

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

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

Browser Support

• 148
• 148
• 149
• 26.4

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

يتيح الإصدار 151 من Firefox استخدام طلبات البحث style() على @container، ما يتيح استخدام طلبات البحث الخاصة بأنماط الحاويات للسمات المخصّصة Baseline Newly.

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

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

Browser Support

• 111
• 111
• 151
• 18

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

يتيح الإصدار 148 من Chrome التحميل الكسول الأصلي لعناصر <video> و<audio> التي تتضمّن السمة loading="lazy".

تمامًا مثل العنصرَين <img> و<iframe>، يمكنك الآن توجيه المتصفّح إلى تأخير تحميل موارد الوسائط إلى أن تصبح قريبة من إطار العرض. يساعد ذلك في تحسين أداء تحميل الصفحة وتوفير معدّل نقل البيانات وتقليل استخدام البيانات لدى المستخدمين. يمكنك الاطّلاع على مزيد من المعلومات من الفريق الذي نفّذ هذه الميزة في المقالة How To Use Standard HTML Video and Audio Lazy-Loading on the Web Today.

Browser Support

• 148
• 148
• x
• x

Source

واجهة برمجة التطبيقات Document Picture-in-Picture

يتيح الإصدار 151 من Firefox استخدام واجهة برمجة التطبيقات Document Picture-in-Picture على أجهزة الكمبيوتر.

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

Browser Support

• 116
• 116
• 151
• x

Source

توسيع نطاق توافق Web Serial API مع المنصات

يتيح الإصدار 151 من Firefox استخدام Web Serial API على أجهزة الكمبيوتر، ويتيح الإصدار 148 من Chrome استخدامه على أجهزة Android.

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

Browser Support

• 89
• 89
• 151
• x

Source

إصدارات المتصفّح التجريبية

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

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

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