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

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

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

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

مواءمة أنظمة الألوان مع light-dark()

تم تضمين دالة الألوان في light-dark() في Chrome 123، وهي تسهِّل تعديل أنظمة الألوان حسب ما يفضّله المستخدم. في المثال التالي، تم ضبط 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().

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

في Chrome 123 أيضًا، تفعِّل السمة field-sizing حقول إدخال النص المتزايدة تلقائيًا.

الاهتمام بعلامات ترقيم CJK باستخدام text-spacing-trim

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

@scope CSS في القاعدة

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

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

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

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

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

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

دعم align-content في تنسيق الكتل والجدول

يتضمّن Chrome 123 وSafari 17.4 إمكانية استخدام align-content في تنسيق الكتل والجداول. يمكنك الاطّلاع على التغيير الذي تم إجراؤه على دعم align-content.

واجهة برمجة تطبيقات التوجيه الثابت لـ Service Worker

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

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

واجهة برمجة تطبيقات إطارات الصور المتحركة الطويلة

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

السمة content-visibility

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

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

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

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

يمكن الآن تشغيل هاتَين الميزتَين بشكل تفاعلي، وبالتالي يمكن الانضمام إلى "الميزات الأساسية المتاحة حديثًا".

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 أيضًا واجهة برمجة التطبيقات Popover API ستتم إتاحة السمة transition-behavior أيضًا. النافذة المنبثقة وtransition-behavior هي جزء من إمكانية التشغيل التفاعلي 2024.

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