تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

الميزات الجديدة في Chrome 116

Adriana Jara

في ما يلي ما تحتاج إلى معرفته:

استخدِم واجهة برمجة التطبيقات Document Picture in Picture API لزيادة إنتاجية المستخدم.
أصبح من الأسهل الآن تصحيح أخطاء ملفات الأنماط المفقودة في "أدوات مطوّري البرامج".
وهناك الكثير من الميزات الأخرى.

اسمي أدريانا جارا. لنلقِ نظرة على الميزات الجديدة للمطوّرين في الإصدار 116 من Chrome.

واجهة برمجة التطبيقات لميزة "صورة في صورة" للمستندات

تتيح واجهة برمجة التطبيقات Document Picture-in-Picture API فتح نافذة دائمًا في المقدّمة يمكن ملؤها بمحتوى HTML عشوائي.

نافذة "صورة ضمن صورة" تعرض فيديو إعلانًا موجزًا لفيلم Sintel — نافذة "صورة في صورة" تم إنشاؤها باستخدام واجهة برمجة التطبيقات Document Picture-in-Picture API (الإصدار التجريبي).

تشبه نافذة "نافذة ضمن النافذة" في Document Picture-in-Picture API نافذة فارغة من المصدر نفسه يتم فتحها باستخدام window.open()، مع بعض الاختلافات:

تظهر نافذة "نافذة ضمن النافذة" فوق النوافذ الأخرى.
لا تبقى نافذة "نافذة ضمن النافذة" مفتوحة لفترة أطول من النافذة الافتتاحية.
لا يمكن التنقّل في نافذة "صورة في صورة".
لا يمكن للموقع الإلكتروني ضبط موضع نافذة "نافذة ضمن النافذة".

يُنشئ رمز HTML التالي مشغّل فيديو مخصّصًا وعنصر زر لفتح مشغّل الفيديو في نافذة "نافذة ضمن النافذة".

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

يستدعي رمز JavaScript التالي documentPictureInPicture.requestWindow() عندما ينقر المستخدم على الزر لفتح نافذة فارغة للعرض في صورة داخل صورة. يتم حلّ الوعد الذي تم إرجاعه باستخدام كائن JavaScript لميزة "نافذة ضمن النافذة". يتم نقل مشغّل الفيديو إلى هذه النافذة باستخدام append().

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

اطّلِع على عرض "صورة في صورة" لأي عنصر للحصول على مزيد من التفاصيل والأمثلة.

لا تتوفّر في "أدوات مطوّري البرامج" تحسينات لتصحيح أخطاء أوراق الأنماط.

تم إجراء عدد من التحسينات على "أدوات مطوّري البرامج" لتحديد المشاكل المتعلّقة بأوراق الأنماط غير المتوفّرة وتصحيحها.

أولاً: لا تعرض الآن شجرة المصادر > الصفحة سوى جداول الأنماط التي تم نشرها وتحميلها بنجاح لتقليل الالتباس.

في المصادر > المحرِّر، يتم الآن وضع خطوط تحت نصائح الأخطاء المضمّنة وعرضها بجانب عبارات failed و@import وurl() وhref.

عبارات مميّزة بخط سفلي مع نصائح في لوحة "المصادر"

بالإضافة إلى الروابط إلى الطلبات التي تعذّر إكمالها، يوفّر Console الآن روابط إلى السطر المحدّد الذي يشير إلى جدول أسلوب تعذّر تحميله.

توفّر وحدة التحكّم روابط إلى السطور المحدّدة التي تتضمّن عبارات مشكلة.

تملأ لوحة الشبكة عمود المشغِّل باستمرار بروابط تؤدي إلى السطر المحدّد الذي يشير إلى جدول أسلوب تعذّر تحميله.

تعرض لوحة المشاكل جميع مشاكل تحميل ملفات الأنماط، بما في ذلك عناوين URL غير الصالحة والطلبات التي تعذّر إجراؤها وبيانات @import غير المُدرَجة في المكان الصحيح.

لوحة "المشاكل" تتضمّن روابط إلى المصادر والطلبات

اطّلِع على الميزات الجديدة في "أدوات مطوّري البرامج" للاطّلاع على كل التفاصيل ومزيد من المعلومات حول "أدوات مطوّري البرامج" في الإصدار 116 من Chrome.

وغير ذلك

بالطبع، هناك الكثير من الميزات الأخرى.

يتيح مسار الحركة للمؤلفين تحديد موضع أي عنصر رسومي وإضافة حركة إليه على طول مسار يحدّده المطوّر.
أصبحت السمتَان display وcontent-visibility متاحة الآن في الصور المتحركة للإطارات الرئيسية، ما يتيح إضافة صور متحركة للخروج باستخدام CSS فقط.
يمكن الآن استخدام واجهة برمجة التطبيقات fetch API مع قارئَي ذاكرة التخزين المؤقت Bring Your Own Buffer، ما يقلل من النفقات العامة لجمع الملفات غير الصالحة ونسخه ويحسن استجابة المستخدمين.

مراجع إضافية

لا يشمل ذلك سوى بعض النقاط الرئيسية. يمكنك الاطّلاع على الروابط أدناه للاطّلاع على التغييرات الإضافية في الإصدار 116 من Chrome.

للاطّلاع على آخر الأخبار، يمكنك الاشتراك في قناة YouTube الخاصة بمطوّري Chrome، وستتلقّى إشعارًا عبر البريد الإلكتروني عند نشر فيديو جديد.

اسمي "أدريانا جارا"، وسأكون هنا لإطلاعك على ميزات الإصدار 117 من Chrome فور طرحه.