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

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

Rachel Andrew

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

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

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

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

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

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

  • Chrome: 119.
  • ‫Edge: 119
  • ‫Firefox: 128
  • ‫Safari: 16.4

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

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

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

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

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

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

السمة font-size-adjust

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

دعم المتصفح

  • Chrome: 127.
  • الحافة: 127.
  • Firefox: 3.
  • ‫Safari: 16.4

المصدر

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

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

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

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

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

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

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

قاعدة @property

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

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

  • Chrome: 85
  • الحافة: 85
  • ‫Firefox: 128
  • ‫Safari: 16.4

المصدر

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

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

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

ArrayBuffer قابلة للتغيير وSharedArrayBuffer قابلة للزيادة

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

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

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

المصدر

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

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

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

  • Chrome: 115
  • الحافة: 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 في الإصدار الثابت.