تعرَّف على بعض الميزات المثيرة للاهتمام التي تم طرحها في الإصدارات الثابتة والتجريبية لمتصفّحات الويب خلال شهر تموز (يوليو) 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
يمكنك العثور على المزيد من الأمثلة في منشور المدوّنة بنية الألوان النسبية في CSS. بنية الألوان النسبية هي أحد مجالات التركيز في Interop 2024، لذلك يساعد هذا التعديل في تحسين النتيجة لإصدار Firefox الثابت.
نص بديل للموقع الإلكتروني content
يتيح Firefox 128 استخدام نص بديل لسمة CSS content
،
عندما تتضمّن صورة. يتم عرض النص البديل في شجرة تسهيل الاستخدام.
يعني ذلك أنّ النص البديل متوافق الآن مع جميع المتصفّحات في content
.
Browser Support
يضمن تحديث في الإصدار 127 من Chrome قبول Chrome لعدد عشوائي من
العناصر بدلاً من سلسلة واحدة فقط، ما يتيح استخدام الدالة attr()
على سبيل المثال.
سمة font-size-adjust
يتضمّن الإصدار 127 من Chrome font-size-adjust
، وهو أيضًا أحد مجالات التركيز في Interop 2024.
تكون هذه السمة مفيدة في الحالات التي يمكن فيها استخدام خط احتياطي،
لأنّها تساعدك في مطابقة حجم الخط الاحتياطي مع الخط الأول.
مع إصدار Chrome هذا، يصبح الموقع font-size-adjust
جزءًا من
البيانات الأساسية المتوفّرة حديثًا.
إتاحة استخدام واجهة برمجة التطبيقات View Transition API في إطارات iframe
اعتبارًا من الإصدار 127 من Chrome، ستتوفّر عمليات انتقال متزامنة لعرض المستند نفسه في إطار رئيسي وإطار iframe ذي مصدر مماثل.
في السابق، لم يكن من الممكن تنفيذ انتقال عرض باستخدام document.startViewTransition في إطار iframe من المصدر نفسه إذا كان الإطار الرئيسي ينفّذ انتقالًا في الوقت نفسه. سيتم تخطّي انتقال إطار iframe تلقائيًا. سيتم الآن تنفيذ كلتا المرحلتَين.
حاويات التمرير التي يمكن التركيز عليها باستخدام لوحة المفاتيح
اعتبارًا من الإصدار 127 من Chrome، يمكن تلقائيًا التركيز بالنقر أو بشكل آلي على عناصر التمرير. يمكن التركيز تلقائيًا باستخدام لوحة المفاتيح على عناصر التمرير التي لا تحتوي على عناصر فرعية يمكن التركيز عليها.
اطّلِع على مزيد من المعلومات عن هذا التغيير في المشاركة أداة التمرير التي يمكن التركيز عليها باستخدام لوحة المفاتيح.
قاعدة @property
يتضمّن Firefox 128 قاعدة @property
وواجهات برمجة التطبيقات ذات الصلة من JavaScript. وهذا يعني أنّه يمكنك إنشاء سمات مخصّصة في CSS تحدّد بنية نحوية و
طريقة اكتساب القيمة وقيمة أولية.
في المثال التالي، تمّ تحديد السمة المخصّصة لقبول قيمة <color>
فقط، وعدم اكتسابها، وتكون قيمتها الأولية هي hotpink
.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
أصبحت قاعدة @property
الآن جزءًا من الإصدار الأساسي الجديد، ويمكنك الاطّلاع على مزيد من المعلومات في مقالة
@property: متغيّرات CSS من الجيل التالي متاحة الآن في جميع المتصفحات.
ArrayBuffer
قابلة للتغيير وSharedArrayBuffer
قابلة للتوسيع
أصبح الآن بإمكانك استخدام ArrayBuffer القابل للتغيير حجمه وSharedArrayBuffer القابل للزيادة حجمه في الإصدار 128 من Firefox، ما يتيح تغيير حجم وحدات التخزين المؤقت بدون الحاجة إلى تخصيص ملف تخزين مؤقت جديد ونسخ البيانات إليه. وتنضمّ هذه المواقع أيضًا إلى "البيانات الأساسية المتوفّرة حديثًا".
الكلمة الرئيسية safe
في خصائص flexbox
يتضمّن الإصدار Safari 17.6 في أغلبه إصلاحات للميزات الحالية،
ومع ذلك، يتضمّن أيضًا الكلمة الرئيسية safe
لخصائص محاذاة المربّعات المرنة.
ويؤدي ذلك إلى إتاحة التوافق بين الكلمات الرئيسية safe
على جميع المتصفّحات.
Browser Support
تمنع الكلمة الرئيسية 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 في الإصدار الثابت.