تعرَّف على بعض الميزات المثيرة للاهتمام التي تم طرحها في الإصدارات الثابتة والتجريبية لمتصفّحات الويب خلال شهر آب (أغسطس) 2024.
إصدارات المتصفّحات الثابتة
في آب (أغسطس) 2024، أصبح Firefox 129 و Chrome 128 متوفّرَين بإصدار ثابت. تتناول هذه المشاركة الميزات الجديدة التي تمت إضافتها إلى منصة الويب.
تعديلات على تنسيق نص Ruby
يُعدّ عنصر HTML <ruby>
أداة فعّالة لتحسين عرض النص، خاصةً للغات شرق آسيا. يتيح لك هذا العنصر عرض تعليقات توضيحية صوتية أو معلومات تكميلية أخرى فوق النص الأساسي أو بجانبه. اعتبارًا من الإصدار 128 من Chrome، يمكن كسر السطر في التعليق التوضيحي بلغة Ruby، ويمكنك تصميم نص Ruby باستخدام السمة ruby-align
في CSS.
اطّلِع على مزيد من المعلومات في مقالة
السمة <ruby>
التي يمكن كسرها على السطر والسمة ruby-align
في CSS.
PointerEvent.deviceProperties
لميزة "الرسم باستخدام عدّة أقلام"
يقدّم هذا التغيير، الذي سيتم طرحه في الإصدار 128 من Chrome، طريقة آمنة وموثوقة لتحديد الأقلام الفردية (المؤشرات) التي تتفاعل مع الشاشة لضبط ألوان أو أشكال أقلام محدّدة لكل جهاز يتفاعل مع أداة التحويل الرقمي. وتُوسّع واجهة PointerEvent
لتشمل سمة جديدة، وهي deviceProperties
. يحتوي هذا الحقل على السمة uniqueId
التي تمثّل معرّفًا فريدًا ومستمرًا على مستوى الجلسة ومُفصَلًا عن المستند، ويمكنك استخدامه بشكل موثوق لتحديد الأقلام الفردية التي تتفاعل مع الصفحة.
Promise.try
في الإصدار 128 من Chrome، يسهّل Promise.try
التعامل مع الأخطاء باستخدام Promises. هناك نمط يتضمّن دالة f
. قد تكون هذه الدالة غير متزامنة، وقد تُرجع قيمة Promise أو لا تُرجعها. لاستخدام دلالات Promise لمعالجة الأخطاء في كلتا الحالتَين، عليك لف الدالة في Promise. ويتم عادةً إجراء ذلك باستخدام new Promise(resolve => resolve(f()))
.
Promise.try
هي طريقة أكثر بساطة لتحقيق النتيجة نفسها. يتيح لك ذلك بدء سلسلة Promise ترصد جميع الأخطاء في معالجات .catch
بدلاً من الحاجة إلى معالجة كل من مسارات استثناءات المهام المتزامنة وغير المتزامنة.
تحريك تأثيرات الدخول
يتضمّن الإصدار 129 من Firefox ميزتَين من ميزات CSS المستخدَمتَين لإضافة تأثيرات متحركة إلى عناصر الصفحة، وأصبحت هذه الميزات الآن متوفّرة في الإصدار الأساسي.
تحدِّد القاعدة @starting-style
الأنماط الأولية لعنصر معيّن قبل عرضه على الصفحة. هذا مطلوب للعناصر التي تظهر من حالة display: none، لأنّها تحتاج إلى حالة تبدأ منها.
تتطلّب تأثيرات الدخول أيضًا إضافة صور متحركة إلى الخصائص المنفصلة، وهي الخصائص التي لا يمكن interpolate بين قيمها.
يمكن تحقيق ذلك الآن باستخدام transition-behavior: allow-discrete
أو قيمة allow-discrete
في الاختصار الخاص بالانتقال.
تتوفّر هذه الميزة أيضًا في الإصدار 129 من Firefox.
اطّلِع على مزيد من المعلومات في المقالة الميزات المتوفّرة الآن في "الإصدار الأساسي": إضافة تأثيرات متحركة إلى عناصر الإدخال.
الإضافات إلى PerformanceResourceTiming
يضيف الإصدار 129 من Firefox السمتَين contentType
وresponseStatus
لواجهة PerformanceResourceTiming
.
تشير هذه السمتَين إلى نوع محتوى المورد الذي تم استرجاعه ورمز حالة استجابة HTTP الذي تم إرجاعه عند استرجاع المورد، على التوالي.
contentType
responseStatus
طرق toJSON()
لتحديد الموقع الجغرافي
يتوفّر أيضًا في الإصدار 129 من Firefox GeolocationCoordinates.toJSON()
وGeolocationPosition.toJSON()
.
WebDriver BiDi
يتيح الآن الإصدار 129 من Firefox استخدام WebDriver BiDi. وهذا يعني أنّه يمكنك استخدام Puppeteer مع Chrome أو Firefox لتنفيذ عمليات التشغيل الآلي. اطّلِع على مزيد من المعلومات في المقالتَين WebDriver BiDi جاهز للاستخدام في Firefox وChrome وPuppeteer وإعلان رسمي عن توفّر Puppeteer في Firefox.
إصدارات المتصفّح التجريبية
تمنحك إصدارات المتصفّح التجريبية معاينة للميزات التي ستتوفر في الإصدار الثابت التالي من المتصفّح. هذا هو الوقت المناسب لاختبار الميزات الجديدة أو عمليات الإزالة التي قد تؤثر في موقعك الإلكتروني قبل أن يحصل العالم على هذا الإصدار. الإصداران الجديدان من الإصدارات التجريبية هما Firefox 130 و Chrome 129. لا يزال الإصدار العلني لإصدار Safari 18قيد التقدّم. توفّر هذه الإصدارات العديد من الميزات الرائعة للمنصة. يمكنك الاطّلاع على ملاحظات الإصدار لمعرفة كل التفاصيل. في ما يلي بعض الميزات البارزة.
يتيح Firefox 130 سمة الاسم لعنصر <details>
الذي يجمع عناصر <details>
، حيث يمكن فتح عنصر واحد فقط ضمن مجموعة في المرة الواحدة. يتيح لك ذلك إنشاء نموذج أكورديون حصري بدون استخدام JavaScript.
يضيف الإصدار 129 من Chrome سمة CSS interpolate-size
ووظيفة calc-size()
.
تسمح خاصية CSS interpolate-size
للصفحة بتفعيل الرسوم المتحرّكة والانتقالات للكلمات الرئيسية لتحديد الحجم في CSS، مثل auto
وmin-content
وfit-content
، في الحالات التي يمكن فيها إضافة رسوم متحركة إلى هذه الكلمات الرئيسية.
دالة CSS calc-size()
هي دالة CSS مشابهة لدالة calc()
، إلا أنّها تتيح أيضًا إجراء عمليات على كلمة رئيسية واحدة متوافقة للحجم. الكلمات الرئيسية المتوافقة حاليًا لتحديد الحجم هي auto
وmin-content
وmax-content
وfit-content
.
يتضمّن الإصدار 129 من Chrome أيضًا Intl.DurationFormat
، وهو يقدّم طريقة لتنسيق المدّات، على سبيل المثال "ساعة واحدة و40 دقيقة و30 ثانية"، وهو متوافق مع لغات متعددة.