جديد على منصة الويب في أغسطس | مدونة | web.dev

اكتشف بعض الميزات المثيرة للاهتمام التي وصلت إلى متصفحات الويب الثابتة والتجريبية خلال شهر أغسطس 2024.

إصدارات متصفح مستقرة

في أغسطس 2024، أصبح Firefox 129 وChrome 128 مستقرين. تتناول هذه المقالة الميزات الجديدة المضافة إلى منصة الويب.

تحديثات لتنسيق روبي

HTML <ruby> يعد العنصر أداة قوية لتحسين عرض النص، خاصة للغات شرق آسيا. يتيح لك هذا العنصر عرض التعليقات التوضيحية الصوتية أو المعلومات التكميلية الأخرى أعلى النص الأساسي أو بجواره. من Chrome 128، أصبحت التعليقات التوضيحية روبي قابلة للفصل بين الأسطر، ويمكنك تصميم نص روبي باستخدام الأمر ruby-align خاصية CSS.

اكتشف المزيد في Line-breakable <ruby> و CSS ruby-align ملكية.

PointerEvent.deviceProperties للتحبير متعدد الأقلام

يوفر هذا التغيير، المتوفر في Chrome 128، طريقة آمنة وموثوقة لتحديد القلم (المؤشرات) الفردي الذي يتفاعل مع الشاشة لتعيين ألوان أو أشكال قلم محددة لكل جهاز يتفاعل مع جهاز التحويل الرقمي. ويمتد PointerEvent واجهة لتشمل سمة جديدة، deviceProperties. هذا يحتوي على السمة uniqueId، يمثل معرفًا فريدًا ومستمرًا للجلسة ومعزولًا للمستند يمكنك استخدامه بشكل موثوق لتحديد الأقلام الفردية التي تتفاعل مع الصفحة.

Promise.try

وأيضا في كروم 128، Promise.try يجعل من السهل التعامل مع الأخطاء مع الوعود. هناك نمط حيث لديك وظيفة، f. قد تكون هذه الوظيفة غير متزامنة، وترجع وعدًا، وقد لا تكون كذلك. لاستخدام دلالات Promise لمعالجة الأخطاء في كلتا الحالتين، عليك تغليف الدالة في Promise. يتم تحقيق ذلك عادةً باستخدام new Promise(resolve => resolve(f())).

Promise.try هي طريقة أكثر وضوحًا لتحقيق نفس الشيء. يتيح لك بدء سلسلة الوعد التي تكتشف جميع الأخطاء فيها .catch المعالجات بدلاً من الاضطرار إلى التعامل مع تدفقات الاستثناءات المتزامنة وغير المتزامنة.

تحريك تأثيرات الدخول

يتضمن Firefox 129 ميزتين من ميزات CSS المستخدمة لتحريك تأثيرات الإدخال، وهذه الميزات أصبحت الآن متوفرة حديثًا.

ال @starting-style تحدد القاعدة الأنماط الأولية للعنصر قبل عرضه على الصفحة. هذا مطلوب للعناصر التي يتم تحريكها من العرض: لا شيء، لأنها تحتاج إلى حالة يمكن من خلالها تحريكها.

تتطلب تأثيرات الإدخال أيضًا تحريك الخصائص المنفصلة، ​​تلك التي لا يمكنها الاستيفاء بين القيم. ويمكن الآن تحقيق ذلك باستخدام transition-behavior: allow-discrete أو allow-discrete القيمة في اختصار الانتقال الخاص بك. وهذا أيضًا مدعوم الآن في Firefox 129.

تعرف على المزيد في Now in Baseline: تحريك تأثيرات الإدخال.

اضافات الى PerformanceResourceTiming

يضيف Firefox 129 contentType و responseStatus خصائص PerformanceResourceTiming واجهة. تشير هذه إلى نوع محتوى المورد الذي تم جلبه ورمز حالة استجابة HTTP الذي تم إرجاعه عند جلب المورد، على التوالي.

contentType

responseStatus

تحديد الموقع الجغرافي toJSON() طُرق

يوجد أيضًا في Firefox 129 GeolocationCoordinates.toJSON() و GeolocationPosition.toJSON().

برنامج WebDriver ثنائي الاتجاه

يتمتع Firefox 129 الآن بدعم WebDriver BiDi. هذا يعني أنه يمكنك استخدام Puppeteer مع Chrome أو Firefox للتشغيل الآلي. تعرف على المزيد في WebDriver BiDi الجاهز للإنتاج في Firefox وChrome وPuppeteer والإعلان عن دعم Puppeteer الرسمي لمتصفح Firefox.

إصدارات متصفح بيتا

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

يدعم Firefox 130 سمة الاسم لملف <details> تجميع العناصر <details> العناصر، حيث يمكن فتح عنصر واحد فقط داخل المجموعة في المرة الواحدة. يتيح لك هذا إنشاء أكورديون حصري دون استخدام JavaScript.

يضيف Chrome 129 CSS interpolate-size الملكية و calc-size() وظيفة.

سي اس اس interpolate-size تتيح الخاصية للصفحة الاشتراك في الرسوم المتحركة والانتقالات للكلمات الرئيسية ذات الحجم الجوهري في CSS مثل auto, min-content، و fit-content، في الحالات التي يمكن فيها تحريك هذه الكلمات الرئيسية.

سي اس اس calc-size() الدالة هي دالة CSS مشابهة لـ calc()ومع ذلك، فهو يدعم أيضًا العمليات التي تتم على كلمة رئيسية واحدة فقط مدعومة للتحجيم. الكلمات الرئيسية للتحجيم المدعومة حاليًا هي auto, min-content, max-content، و fit-content.

يوجد أيضًا في Chrome 129 Intl.DurationFormat، مما يوفر طريقة لتنسيق المدد، على سبيل المثال “1 ساعة و40 دقيقة و30 ثانية” تدعم لغات متعددة.