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

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

في أيار (مايو) 2024، أصبح الإصدار 126 من Firefox و17.5 من Safari و125 من Chrome متوفّرًا بشكلٍ ثابت. تتناول هذه المشاركة الميزات الجديدة التي تمت إضافتها إلى منصة الويب.

موضع رابط CSS

يتضمّن الإصدار 125 من Chrome وضع علامات الربط في CSS. يتيح لك ذلك ربط عنصر بموقع مطلق بعنصر واحد أو أكثر من العناصر الأخرى في الصفحة (عناصر الربط) بطريقة تعريفية بدون استخدام JavaScript. يحقّق موضع العنصر الثابت أداءً جيدًا عندما يكون بالإمكان التمرير فيه. ومن حالات الاستخدام الشائعة وضع نافذة منبثقة، مثل تلميح توضيحي، بجانب العنصر الذي أدّى إلى ظهورها، أو قائمة اختيار وقائمة خيارات النافذة المنبثقة.

اطّلِع على مزيد من المعلومات في مقالة لمحة عن واجهة برمجة التطبيقات CSS anchor positioning API.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

وظائف القيمة المتدرجة في CSS: round() وmod() وrem()

يتضمّن الإصدار 125 من Chrome أيضًا دوال القيم المتزايدة، ما يعني أنّ هذه الدوال أصبحت الآن متوفّرة في الإصدار الأساسي. تعمل دوالّ القيم المتزايدة، round() وmod() وrem()، على تحويل قيمة معيّنة وفقًا لـ "قيمة خطوة" أخرى.

تعرَّف على مزيد من المعلومات في مقالة تتوفّر الآن الدوالّ الحسابية للقيم المتصاعدة في CSS ضمن Baseline 2024.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: 118.
  • Safari: 15.4.

Source

دالة light-dark()

تشمل الميزات الجديدة المتوفّرة في الإصدار الأساسي أيضًا دالة الألوان في CSS‏ light-dark()، التي تتوفّر في Safari 17.5.

light-dark() هي دالة تقبل وسيطتَين، ويجب أن تكونا <color>. يتم اختيار أحدهما استنادًا إلى نظام الألوان المستخدَم.

  • إذا كان مخطط الألوان المستخدَم هو light أو غير معروف، يتم عرض القيمة المحسوبة للقيمة الأولى.
  • إذا كان نظام الألوان المستخدَم هو dark، يتم عرض القيمة المحسوبة للّون الثاني.

يمكنك الاطّلاع على مزيد من المعلومات في مقالة الألوان المستندة إلى مخطط الألوان في CSS باستخدام light-dark()‎ .

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

واجهة برمجة التطبيقات Screen Wake Lock API

ستتوفّر واجهة برمجة التطبيقات Screen Wake Lock API في الإصدار 126 من Firefox، وهي ميزة أخرى أصبحت الآن جزءًا من Baseline Newly Available. توفّر واجهة برمجة التطبيقات هذه طريقة لمنع الجهاز من تعتيم الشاشة وقفلها.

تعرَّف على كيفية استخدام هذه الميزة في مقالة إبقاء الشاشة مُستيقظة باستخدام Screen Wake Lock API.

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

Compute Pressure API

توفّر Compute Pressure API حالات عالية المستوى تمثّل عبء وحدة المعالجة المركزية على النظام. ويسمح هذا الإجراء للتنفيذ باستخدام مقاييس الأجهزة الأساسية المناسبة لضمان تمكّن المستخدمين من الاستفادة من كل طاقة المعالجة المتاحة لهم ما دام النظام غير خاضع لضغط لا يمكن إدارته.

تتوفّر هذه الميزة في الإصدار 125 من Chrome. قادت شركة Intel أعمال التصميم والتنفيذ لهذه الواجهة، ما سيتيح لتطبيقات اجتماعات الفيديو تحقيق التوازن الديناميكي بين الميزات والأداء.

اطّلِع على مستندات Compute Pressure API.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

قاعدة @starting-style

يتضمّن الإصدار 17.5 من Safari قاعدة @starting-style. تتيح لك قاعدة at-rule في CSS تطبيق نمط يمكن للمتصفّح البحث عنه قبل فتح العنصر على الصفحة، حسب الحاجة للصور المتحركة للدخول.

قاعدة @starting-style هي إحدى الميزات التي تم تناولها في مقالة أربع ميزات جديدة في CSS لإنشاء صور متحركة سلسة عند الدخول والخروج.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

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

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

يتضمّن الإصدار 126 من Chrome عمليات انتقال بين طرق العرض في المستندات المختلفة لعمليات التنقّل في النطاق نفسه. في السابق، كان عليك إعادة تصميم موقعك الإلكتروني ليصبح تطبيقًا متعدّد الصفحات لاستخدام واجهة برمجة التطبيقات View Transitions API. لقد اختلف الوضع اليوم. تم تفعيل انتقالات العرض الآن تلقائيًا لعمليات التنقّل من المصدر نفسه. يمكنك إنشاء انتقال عرض بين مستندَين مختلفَين من المصدر نفسه.

يتضمّن الإصدار 127 من Firefox طرقًا إضافية لإعداد JavaScript، وهي intersection() وunion() وdifference() symmetricDifference() وisSubsetOf() وisSupersetOf() وisDisjointFrom().