استكشِف بعض الميزات الرائعة التي تمت إضافتها إلى متصفّحات الويب الثابتة والتجريبية خلال آذار (مارس) 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
حقول إدخال النص المتزايدة تلقائيًا.
التوافق مع المتصفح
- 123
- x
- x
- x
الاهتمام بعلامات ترقيم CJK باستخدام text-spacing-trim
في Chrome 123، تطبّق السمة text-spacing-trim
استخدام العناوين على أحرف علامات الترقيم الصينية واليابانية والكورية (CJK) لضبط المسافات الزائدة.
يمكنك الاطّلاع على المزيد من المعلومات في المقالة
نقدّم أربع ميزات عالمية جديدة في خدمة مقارنة الأسعار (CSS).
التوافق مع المتصفح
- 123
- x
- x
- x
@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) الذي يقيس مدى الاستجابة، أو لتحديد البيانات غير المحتملة الأخرى التي تؤثر في واجهة المستخدم والتي تؤثر في سلاسة واجهة المستخدم.
التوافق مع المتصفح
- 123
- x
- x
- x
السمة 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
.