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

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

Adriana Jara

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

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

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

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

تتيح واجهة برمجة تطبيقات Document Picture-in-Picture فتح نافذة تظهر في أعلى الشاشة ويمكن تعبئتها بمحتوى 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.

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

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