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

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

Rachel Andrew

تاريخ النشر: 30 يونيو 2026

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

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

تصبح أداة تغيير حجم عناصر التحكّم في النماذج باستخدام field-sizing هي Baseline

يتيح الإصدار 152 من Firefox استخدام السمة field-sizing في CSS، ما يتيح إمكانية تغيير حجم عناصر التحكّم في النماذج تلقائيًا، وهي ميزة جديدة متاحة في جميع محركات المتصفحات الرئيسية.

تتيح السمة field-sizing لعناصر التحكّم في النماذج، مثل <textarea> و<input> و<select>، أن تصغر أو تكبر بشكل ديناميكي لتناسب محتواها (field-sizing: content) بدلاً من أن تظل ثابتة بحجم تلقائي (field-sizing: fixed). ويؤدي ذلك إلى إلغاء الحاجة إلى حلول بديلة باستخدام JavaScript عند إنشاء حقول إدخال نص أو مساحات نصية يتم تغيير حجمها أثناء الكتابة.

textarea {
  field-sizing: content;
}

تصبح الأشكال الأساسية rect() وxywh() في shape-outside هي Baseline

بما أنّ الإصدار 149 من Chrome يتيح استخدام الدالتَين rect() و xywh() في السمة shape-outside، أصبحت هذه الأشكال الأساسية متاحة الآن في جميع المتصفّحات الرئيسية ضمن Baseline.

تتيح لك الدالتان rect() وxywh() تحديد مساحات استبعاد مستطيلة عائمة باستخدام إحداثيات دقيقة للداخل أو بنية الأصل والأبعاد. يوفّر ذلك بنية أبسط وأسهل للقراءة من استخدام polygon() لأشكال التفاف مستطيلة.

تغيير حجم الخط تلقائيًا باستخدام CSS text-fit

يقدّم الإصدار 150 من Chrome text-fitخاصية CSS، ما يتيح للمطوّرين تغيير حجم الخط تلقائيًا ليتناسب مع عرض المربّع الحاوي.

.headline {
  text-fit: grow;
}

زخارف الفجوات في CSS

يتيح الإصدار 149 من Chrome استخدام زخارف الفجوات في CSS في تنسيقات الشبكة وFlexbox. تتيح لك عناصر تزيين الفجوات إضافة خطوط وأنماط مباشرةً إلى المسافة بين عناصر الشبكة وعناصر flex، على غرار column-rule في التصاميم المتعدّدة الأعمدة.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

يمكنك الاطّلاع على مزيد من المعلومات في زخارف الفجوات: متاحة الآن في Chromium.

CSS background-clip: border-area

يضيف الإصدار Chrome 150 دعمًا لـ background-clip: border-area من المستوى 4 من "خلفيات CSS".

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

وعود التمرير الآلي

يعدّل الإصدار 150 من Chrome طرق التمرير الآلية (scrollTo() وscrollBy() وscrollIntoView()) لعرض عملية غير مكتملة.

يتم حلّ Promise الذي تم عرضه عند انتهاء الحركة السلسة للتمرير، ما يوفّر إشارة موثوقة لتنفيذ إجراءات المتابعة بعد انتهاء التمرير.

التنقّل باستخدام لوحة المفاتيح بشكل تعريفي باستخدام focusgroup

يتيح الإصدار 150 من Chrome استخدام السمة focusgroup.

تتيح السمة focusgroup للمطوّرين إدارة التنقّل باستخدام مفاتيح الأسهم بشكل تصريحي في عناصر التحكّم المركّبة في واجهة المستخدم (مثل أشرطة الأدوات وقوائم علامات التبويب والقوائم) بدون كتابة أدوات معالجة أحداث لوحة المفاتيح يدويًا.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

يمكنك الاطّلاع على مزيد من المعلومات من شرح Focusgroup.

توفُّر WebSockets في ميزة "التخزين المؤقت للصفحات"

في الإصدار 149 من Chrome، يمكن الآن تخزين الصفحات التي تتضمّن اتصالات WebSocket نشطة باستخدام ميزة "التخزين المؤقت للصفحات".

في السابق، كان اتصال WebSocket مفتوحًا يجعل الصفحة غير مؤهَّلة للاستفادة من ميزة "التخزين المؤقت للصفحات". أصبح المتصفح الآن يغلق تلقائيًا اتصالات WebSocket النشطة عند تفعيل ميزة "التخزين المؤقت للصفحات"، ما يتيح تخزين الصفحة مؤقتًا واستعادتها فورًا عند الرجوع إليها.

توقيت الاستجابة المؤقتة والاستجابة في العنوان في Resource Timing

يتيح الإصدار 152 من Firefox استخدام firstInterimResponseStart و finalResponseHeadersStart على واجهة PerformanceResourceTiming.

يمكن استخدام هذه المقاييس لمعرفة المدة التي يستغرقها المتصفّح لتلقّي استجابات HTTP المؤقتة واستجابة HTTP النهائية بعد إرسال طلب، على التوالي.

أزرار الإجراءات للإشعارات

يضيف الإصدار 152 من Firefox إمكانية استخدام أزرار الإجراءات في الإشعارات باستخدام السمة actions على Notification والخيارات في ServiceWorkerRegistration.showNotification().

يمكنك الآن تضمين أزرار إجراءات في إشعارات نظام التشغيل والاستماع إلى تفاعلات المستخدمين عند النقر على الأزرار.

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

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

يتيح الإصدار التجريبي 153 من Firefox استخدام Error.stackTraceLimit لضبط الحد الأقصى لعمق تتبُّع تسلسل استدعاء الدوال البرمجية الذي تم تسجيله، وIDBObjectStore.getAllRecords() وIDBIndex.getAllRecords() لاسترداد السجلات المفهرسة، وRTCDtlsTransport.getRemoteCertificates() لفحص أمان WebRTC. يحصل مطوّرو الإضافات أيضًا على واجهة برمجة تطبيقات publicSuffix جديدة وطريقة userScripts.execute() لإدخال النصوص البرمجية عند الطلب.

تتضمّن الإصدار التجريبي من Safari 27 ميزة تحديد موضع العناصر الثابتة مع مراعاة التحويل، والفئة الزائفة :heading لمطابقة عناصر العناوين، والكلمة الرئيسية revert-rule للتراجع عن طبقات التتالي، وإمكانية استخدام الكلمة الرئيسية stretch في تحديد حجم المربّع، والمحدّدات المركّبة :host:has().