جديد على النظام الأساسي للويب في آذار (مارس)

تعرَّف على بعض الميزات المثيرة للاهتمام التي تم طرحها في الإصدارات الثابتة والتجريبية لمتصفّحات الويب خلال شهر آذار (مارس) 2024.

Rachel Andrew

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

في آذار (مارس) 2024، أصبح Firefox 124 و Safari 17.4 و Chrome 123 إصدارات ثابتة. تتناول هذه المشاركة الميزات الجديدة التي تمت إضافتها إلى منصة الويب.

تعديل الألوان باستخدام light-dark()

تم طرح وظيفة الألوان light-dark() في الإصدار 123 من Chrome، وهي تسهّل تعديل أنظمة الألوان وفقًا لإعدادات المستخدم المفضّلة. في المثال التالي، تم ضبط color-scheme على light dark في root. تستخدِم السمات المخصّصة دالة اللون light-dark() لضبط الألوان التي سيتم التبديل بينها استنادًا إلى الإعداد المفضّل للمستخدم في الوضع الفاتح أو الداكن.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

يمكنك العثور على المزيد من الأمثلة والتفاصيل في مقالة الألوان المستندة إلى color-scheme في CSS باستخدام light-dark()

توافق المتصفّح

  • Chrome: 123.
  • الحافة: 123.
  • Firefox: 120
  • Safari: الإصدار 17.5

المصدر

التحكّم بشكل أفضل في الإدخالات باستخدام field-sizing

في الإصدار 123 من Chrome أيضًا، تتيح السمة field-sizing تكبير حقول إدخال النصوص تلقائيًا.

توافق المتصفّح

  • Chrome: 123.
  • Edge:‏ 123.
  • Firefox: غير متوافق
  • Safari: غير متاح.

المصدر

تضييق المسافة بين الأحرف لعلامات الترقيم باللغة الصينية واليابانية والكورية باستخدام text-spacing-trim

في الإصدار 123 من Chrome، تطبّق السمة text-spacing-trim ميزة "محوّر المسافة بين الأحرف" على أحرف الترقيم الصينية واليابانية والكورية (CJK) لتعديل المسافة الزائدة. يمكنك الاطّلاع على مزيد من المعلومات في مقالة تقديم أربع ميزات دولية جديدة لخدمة CSS.

توافق المتصفّح

  • Chrome: 123
  • Edge:‏ 123.
  • Firefox: غير مدعوم.
  • Safari: غير متوافق

المصدر

قاعدة @scope CSS

يتضمّن Safari 17.4 ميزة @scope التي تتيح لك اختيار عناصر في أشجار فرعية معيّنة من DOM، مع استهداف العناصر بدقة بدون كتابة أدوات اختيار محدّدة للغاية يصعب إلغاؤها، وبدون ربط أدوات الاختيار بشكلٍ وثيق جدًا ببنية DOM.

اطّلِع على مزيد من المعلومات في مقالة حصر نطاق وصول أدوات الاختيار باستخدام قاعدة @scope at-rule في CSS.

دعم المتصفح

  • Chrome: 118
  • Edge: 118
  • Firefox: خلف علامة
  • ‫Safari: 17.4

المصدر

تحسينات على ميزة "نافذة ضمن النافذة"

يتضمّن الإصدار 123 من Chrome ميزتَين لتحسين تجارب "نافذة ضمن النافذة". الأول هو picture-in-picture وضع العرض في CSS. يتيح لك ذلك كتابة قواعد CSS محدّدة لا يتم تطبيقها إلا عند عرض (جزء من) تطبيق الويب في وضع "نافذة ضمن نافذة".

تتيح لك الميزة الثانية استخدام رمز opener.focus من نافذة "نافذة ضمن النافذة" للمستند لجذب التركيز على مستوى النظام إلى علامة التبويب التي تملك نافذة "نافذة ضمن النافذة" للمستند.

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

إتاحة align-content في تنسيقات الكتل والجداول

يشمل الإصدار 123 من Chrome وSafari 17.4 إمكانية استخدام align-content في تنسيق الكتل والجدول. يمكنك الاطّلاع على مزيد من المعلومات حول التغييرات التي طرأت على خدمة دعم align-content .

واجهة برمجة تطبيقات التوجيه الثابت لمشغّل الخدمات

اعتبارًا من الإصدار 123 من Chrome، أصبحت واجهة برمجة التطبيقات Service Worker Static Routing API متاحة. تتيح لك واجهة برمجة التطبيقات هذه تحديد كيفية جلب مسارات موارد معيّنة بشكل صريح، ما يعني أنّ المتصفّح لا يحتاج إلى تشغيل مشغّل خدمة فقط لجلب الردود من ذاكرة التخزين المؤقت أو من الشبكة مباشرةً.

يمكنك الاطّلاع على مزيد من المعلومات في مقالة استخدام واجهة برمجة التطبيقات Service Worker Static Routing API لتجاوز مشغّل الخدمة في مسارات معيّنة.

Long Animation Frames API

يتضمّن الإصدار 123 من Chrome أيضًا Long Animation Frames API، وهو تعديل على Long Tasks API لتوفير فهم أفضل ل تعديلات واجهة المستخدم (UI) البطيئة. ويمكن أن يكون ذلك مفيدًا في تحديد إطارات الصور المتحركة البطيئة التي من المرجَّح أن تؤثر في مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) الأساسي الذي يقيس مدى الاستجابة، أو لتحديد البيانات غير المرغوب فيها لواجهة المستخدم الأخرى التي تؤثر في سلاسة التفاعل.

توافق المتصفّح

  • Chrome: 123
  • الحافة: 123.
  • Firefox: غير متوافق
  • Safari: غير متوافق

المصدر

سمة content-visibility

يتيح Firefox 124 استخدام سمة CSS content-visibility. تتحكّم هذه السمة في ما إذا كان العنصر سيعرض محتواه على الإطلاق، مما يسمح للمتصفحات بتخطّي عرض المحتوى إلى أن يصبح مطلوبًا.

توافق المتصفّح

  • Chrome: 85.
  • الحافة: 85
  • ‫Firefox: 125
  • Safari: 18

المصدر

عمليات الإضافة إلى ArrayBuffer وتجميع المصفوفات

في Safari 17.4، تحصل JavaScript على بعض الميزات الجديدة مع دعم السمة detached والطريقة transfer() وtransferToFixedLength() في ArrayBuffer.

توافق المتصفّح

  • Chrome: 114
  • الحافة: 114.
  • ‫Firefox: 122
  • ‫Safari: 17.4

المصدر

يتضمّن Safari 17.4 أيضًا طريقتَي تجميع الصفيفَين Object.groupBy وMap.groupBy. للاطّلاع على مزيد من المعلومات عن تجميع الصفائف، يمكنك قراءة مقالة JavaScript تحصل على طرق تجميع الصفائف.

توافق المتصفّح

  • Chrome: 117
  • Edge:‏ 117
  • Firefox: 119.
  • ‫Safari: 17.4

المصدر

يمكن الآن تشغيل هاتَين الميزتَين بشكل تفاعلي، وبالتالي الانضمام إلى برنامج Baseline متوفّر حديثًا.

setHTMLUnsafe وparseHTMLUnsafe

تسمح الطريقتان setHTMLUnsafe وparseHTMLUnsafe اللتان يتم إرسالهما في Safari 17.4 باستخدام Declarative Shadow DOM من JavaScript. وتوفّر هذه الطرق أيضًا طريقة أسهل لتحليل HTML بشكل إلزامي إلى DOM، مقارنةً بـ innerHTML أو DOMParser.

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

تمنحك إصدارات المتصفح التجريبية إمكانية معاينة الأشياء التي ستكون في الإصدار الثابت التالي من المتصفح. وهذا الوقت مناسب لاختبار الميزات أو عمليات الإزالة الجديدة التي قد تؤثر في موقعك الإلكتروني قبل أن يحصل العالم على هذا الإصدار. إصدارا الإصدارات التجريبية الجديدة هما Firefox 125 و Chrome 124. توفّر هذه الإصدارات العديد من الميزات الرائعة للمنصة. يمكنك الاطّلاع على ملاحظات الإصدار لمعرفة كل التفاصيل. إليك بعض الإشعارات المهمة.

سيصبح إصدار Firefox 125 مشوّقًا على الإطلاق. ويتضمن align-content على الكتل، ما يجعل هذه الميزة قابلة للتشغيل التفاعلي. وأصبحت واجهة برمجة التطبيقات Popover API مضمَّنة أيضًا، وبالتالي أصبحت جزءًا من حزمة Baseline المتاحة حديثًا. ستكون السمة transition-behavior متاحة أيضًا. يندرج كلا العنصرَين Popover وtransition-behavior ضمن مبادرة Interop 2024.

يتضمّن Chrome 124 الطريقتين setHTMLUnsafe وparseHTMLUnsafe للسماح باستخدام نموذج وحدات عرض Shadow DOM التعريفي من JavaScript، ما يجعل هذه الميزات قابلة للتشغيل التفاعلي. تتضمّن هذه الإصدارات أيضًا واجهة برمجة تطبيقات WebSocketStream، وسمة writingsuggestions.