وفي ما يلي ما تحتاج إلى معرفته:
- استخدِم Document Image in Picture API لزيادة إنتاجية المستخدمين.
- أصبح من الأسهل الآن تصحيح أخطاء أوراق الأنماط غير المتوفّرة في "أدوات مطوري البرامج".
- بالإضافة إلى المزيد.
أنا "أدريانا جارا" لنطّلِع على التفاصيل ونتعرّف على الميزات الجديدة للمطوّرين في الإصدار 116 من Chrome.
واجهة برمجة التطبيقات لميزة "نافذة ضمن النافذة"
واجهة برمجة التطبيقات Document Picture-in-Picture API تتيح لك فتح نافذة تظهر دائمًا في الأعلى ويمكن تعبئتها بمحتوى 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);
});
يُرجى الانتقال إلى ميزة نافذة ضمن النافذة لأي عنصر للحصول على مزيد من التفاصيل والأمثلة.
لا تتوفّر في "أدوات مطوري البرامج" تحسينات على تصحيح الأخطاء في أوراق الأنماط.
تم إجراء عدد من التحسينات في "أدوات مطوري البرامج" لتحديد وتصحيح الأخطاء في أوراق الأنماط غير المتوفّرة.
أولاً: تعرض شجرة المصادر > الصفحة الآن فقط أوراق الأنماط التي تم نشرها وتحميلها بنجاح للحد من الالتباس.
بالإضافة إلى ذلك، يضع المصادر > المحرِّر الآن تسطيرًا ويعرض تلميحات مضمّنة للأخطاء بجانب عبارات تعذّر، و@import، وurl()، وhref.
- توفر الآن وحدة التحكم، بالإضافة إلى روابط الطلبات التي تعذّر تحميلها، روابط إلى السطر المحدد الذي يشير إلى ورقة أنماط تعذّر تحميلها.
تملأ لوحة الشبكة عمود المُنشئ باستمرار بروابط إلى السطر المحدد الذي يشير إلى ورقة أنماط تعذّر تحميلها.
تسرد لوحة "المشاكل" جميع مشاكل تحميل أوراق الأنماط، بما في ذلك عناوين URL المعطّلة والطلبات التي تعذّر تنفيذها وعبارات @import المفقودة.
يمكنك الاطّلاع على الميزات الجديدة في "أدوات مطوري البرامج" للتعرّف على جميع التفاصيل والمزيد من المعلومات حول "أدوات مطوري البرامج" في الإصدار 116 من Chrome.
ومقاييس أخرى
بالطبع هناك المزيد.
- يتيح مسار الحركة للمؤلفين وضع أي كائن رسومي وتحريكه على مسار يحدّده المطوِّر.
- يمكن الآن استخدام السمتَين
displayوcontent-visibilityفي الصور المتحركة للإطار الرئيسي، ما يتيح إضافة صور متحركة عند الخروج من CSS فقط. - يمكن الآن استخدام واجهة برمجة تطبيقات الجلب مع جلب برامج قراءة المخزن المؤقت الخاص بك، ما يقلّل من أعباء جمع البيانات غير المرغوب فيها ونُسخها، ويحسِّن سرعة الاستجابة للمستخدمين.
محتوى إضافي للقراءة
يتناول هذا الدليل بعض الميزات الرئيسية فقط. راجِع الروابط أدناه للاطّلاع على التغييرات الإضافية في الإصدار 116 من Chrome.
- الميزات الجديدة في "أدوات مطوري البرامج في Chrome" (116)
- عمليات إيقاف Chrome 116 نهائيًا وعمليات إزالته
- تحديثات ChromeStatus.com للإصدار 116 من Chrome
- قائمة تغييرات مستودع مصدر Chromium
- تقويم إصدارات Chrome
اشتراك
للاطّلاع على آخر الأخبار، اشترِك في قناة Chrome Developers على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.
مرحبًا أدريانا جارا، وبمجرد طرح Chrome 117، سأكون هنا لإخبارك بالجديد في Chrome!