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

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

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

بنية الألوان النسبية في CSS

يتضمّن Firefox 128 بنية الألوان النسبية في CSS، يتيح لك ذلك إنشاء لون نسبي إلى لون أصلي. تعمل لغة CSS التالية على إزالة تشبع اللون indigo بمقدار النصف، باستخدام hsl().

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Browser Support

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 128.
  • Safari: 18.

يمكنك العثور على المزيد من الأمثلة في منشور المدوّنة بنية الألوان النسبية في CSS. بنية الألوان النسبية هي أحد مجالات التركيز في Interop 2024، لذلك يساعد هذا التعديل في تحسين النتيجة لإصدار Firefox الثابت.

نص بديل للموقع الإلكتروني content

يتيح Firefox 128 استخدام نص بديل لسمة CSS content، عندما تتضمّن صورة. يتم عرض النص البديل في شجرة تسهيل الاستخدام. يعني ذلك أنّ النص البديل متوافق الآن مع جميع المتصفّحات في content.

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 128.
  • Safari: 17.4.

يضمن تحديث في الإصدار 127 من Chrome قبول Chrome لعدد عشوائي من العناصر بدلاً من سلسلة واحدة فقط، ما يتيح استخدام الدالة attr() على سبيل المثال.

سمة font-size-adjust

يتضمّن الإصدار 127 من Chrome font-size-adjust، وهو أيضًا أحد مجالات التركيز في Interop 2024. تكون هذه السمة مفيدة في الحالات التي يمكن فيها استخدام خط احتياطي، لأنّها تساعدك في مطابقة حجم الخط الاحتياطي مع الخط الأول.

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

مع إصدار Chrome هذا، يصبح الموقع font-size-adjust جزءًا من البيانات الأساسية المتوفّرة حديثًا.

إتاحة استخدام واجهة برمجة التطبيقات View Transition API في إطارات iframe

اعتبارًا من الإصدار 127 من Chrome، ستتوفّر عمليات انتقال متزامنة لعرض المستند نفسه في إطار رئيسي وإطار iframe ذي مصدر مماثل.

في السابق، لم يكن من الممكن تنفيذ انتقال عرض باستخدام document.startViewTransition في إطار iframe من المصدر نفسه إذا كان الإطار الرئيسي ينفّذ انتقالًا في الوقت نفسه. سيتم تخطّي انتقال إطار iframe تلقائيًا. سيتم الآن تنفيذ كلتا المرحلتَين.

حاويات التمرير التي يمكن التركيز عليها باستخدام لوحة المفاتيح

اعتبارًا من الإصدار 127 من Chrome، يمكن تلقائيًا التركيز بالنقر أو بشكل آلي على عناصر التمرير. يمكن التركيز تلقائيًا باستخدام لوحة المفاتيح على عناصر التمرير التي لا تحتوي على عناصر فرعية يمكن التركيز عليها.

اطّلِع على مزيد من المعلومات عن هذا التغيير في المشاركة أداة التمرير التي يمكن التركيز عليها باستخدام لوحة المفاتيح.

قاعدة @property

يتضمّن Firefox 128 قاعدة @property وواجهات برمجة التطبيقات ذات الصلة من JavaScript. وهذا يعني أنّه يمكنك إنشاء سمات مخصّصة في CSS تحدّد بنية نحوية و طريقة اكتساب القيمة وقيمة أولية.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

في المثال التالي، تمّ تحديد السمة المخصّصة لقبول قيمة <color> فقط، وعدم اكتسابها، وتكون قيمتها الأولية هي hotpink.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

أصبحت قاعدة @property الآن جزءًا من الإصدار الأساسي الجديد، ويمكنك الاطّلاع على مزيد من المعلومات في مقالة @property: متغيّرات CSS من الجيل التالي متاحة الآن في جميع المتصفحات.

ArrayBuffer قابلة للتغيير وSharedArrayBuffer قابلة للتوسيع

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 128.
  • Safari: 16.4.

Source

الكلمة الرئيسية safe في خصائص flexbox

يتضمّن الإصدار Safari 17.6 في أغلبه إصلاحات للميزات الحالية، ومع ذلك، يتضمّن أيضًا الكلمة الرئيسية safe لخصائص محاذاة المربّعات المرنة. ويؤدي ذلك إلى إتاحة التوافق بين الكلمات الرئيسية safe على جميع المتصفّحات.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 63.
  • Safari: 17.6.

تمنع الكلمة الرئيسية safe المحاذاة المحدّدة من عرض المحتوى خارج المنطقة القابلة للعرض. يعرض الرابط التالي على CodePen كيفية عمل ذلك مع العناصر التي تمّت محاذاة وسطها. إذا أدّى محاذاة center إلى فقدان البيانات، يتم استخدام start بدلاً من ذلك.

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

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

يتضمّن الإصدار 128 من Chrome سمة CSS ruby-align، بالإضافة إلى تغييرات ل إتاحة فواصل الأسطر داخل العناصر التي تحتوي على display: ruby، وتم أيضًا تعديل سمة zoom لتتوافق مع المواصفات. تم تعديل AudioContext API لإضافة دالة استدعاء تم تعيينها إلى AudiContext.onerror، والتي تُبلغ عن أخطاء إنشاء AudioContext وعرضها.

يتضمّن الإصدار 129 من Firefox قاعدة @starting-style والخاصّية transition-behavior. ستصبح هذه المواقع جزءًا من "القاعدة الأساسية للميزات الجديدة" بعد طرح Firefox 129 في الإصدار الثابت.