في ما يلي ما تحتاج إلى معرفته:
- استخدِم واجهة برمجة التطبيقات Document Picture in Picture API لزيادة إنتاجية المستخدم.
- أصبح من السهل الآن تصحيح أخطاء أوراق الأنماط غير المتوفّرة في "أدوات مطوري البرامج"
- وهناك المزيد.
اسمي أدريانا جارا. لنطّلع على الميزات الجديدة للمطوّرين في الإصدار 116 من Chrome.
واجهة برمجة التطبيقات لميزة "صورة في صورة" للمستندات
تتيح واجهة برمجة تطبيقات Document Picture-in-Picture فتح نافذة تظهر في أعلى الشاشة ويمكن تعبئتها بمحتوى HTML عشوائي.
تشبه نافذة "نافذة ضمن النافذة" في 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.
- الميزات الجديدة في الإصدار 116 من "أدوات مطوّري البرامج في Chrome"
- الميزات التي سيتم إيقافها نهائيًا وإزالتها في الإصدار 116 من Chrome
- تعديلات ChromeStatus.com على الإصدار 116 من Chrome
- قائمة تغيير مستودع مصدر Chromium
- تقويم إصدارات Chrome
اشتراك
للبقاء على اطّلاع على آخر الأخبار، اشترك في قناة مطوّري برامج Chrome على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عند إطلاق فيديو جديد.
اسمي "أدريانا جارا"، وسأكون هنا لإطلاعك على ميزات الإصدار 117 من Chrome فور طرحه.