في ما يلي المعلومات التي يجب معرفتها:
- تمنحك ميزة نافذة المستند ضمن النافذة المزيد من التحكّم في نوافذ ميزة "نافذة ضمن النافذة".
- تعمل تصريحات CSS المتداخلة على إصلاح بعض حالات الاستخدام المعقّدة.
- يمكنك تحديد سلوك الزخارف على العناصر التي يتم تقسيمها على عدة أسطر.
- وهناك الكثير غير ذلك.
اسمي "بيت ليباج". لنتعرّف على الميزات الجديدة المتاحة للمطوّرين في الإصدار 130 من Chrome.
ميزة "نافذة ضمن النافذة" للمستندات
تُعدّ واجهة برمجة التطبيقات "نافذة ضمن النافذة" رائعة عندما تريد إخراج فيديو من علامة تبويب متصفّح لتتمكّن من مواصلة مشاهدته أثناء التفاعل مع مواقع إلكترونية أو تطبيقات أخرى. ولكنّه يتيح فقط إجراء مكالمات فيديو.
تزيل واجهة برمجة التطبيقات Document Picture-in-Picture API هذا القيد، ما يتيح لك إنشاء نافذة ضمن النافذة يمكنك التحكّم في محتواها. وهو مناسب تمامًا لأشياء مثل مشغّلات الفيديو المخصّصة واجتماعات الفيديو وتطبيقات الإنتاجية. أعجبني ما فعلته Spotify في مشغّل الويب. تظهر لي نافذة تتضمّن صورة الألبوم للأغنية الحالية وعناصر التحكّم في التشغيل، ويمكنني إضافة الأغنية بسهولة إلى الأغاني المفضّلة لديّ.
لاستخدامها، اطلب فتح نافذة جديدة للمستند في وضع "نافذة ضمن النافذة". يتم حلّ
promise باستخدام كائن JavaScript لنافذة "نافذة ضمن النافذة".
بعد ذلك، استخدِم هذا الرمز لإضافة المحتوى إلى النافذة.
async function openDPiP() {
const player = document.querySelector("#player");
const pipWindow = await documentPictureInPicture
.requestWindow();
pipWindow.document.body.append(player);
}
pipButton.addEventListener('click', openDPiP);
باستخدام السمة الجديدة preferInitialWindowPlacement، يمكنك إخبار Chrome بفتح نافذة "نافذة ضمن النافذة" دائمًا في موضعها وحجمها التلقائيَين، بدلاً من إعادة استخدام موضع النافذة السابقة أو حجمها.
// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
preferInitialWindowPlacement: true,
});
يمكنك الاطّلاع على مشاركة "فرانسوا" حول استخدام ميزة "نافذة ضمن النافذة" مع أي عنصر للحصول على مزيد من التفاصيل.
نماذج البيان المتداخلة في خدمة مقارنة الأسعار
تتيح ميزة التداخل في CSS استخدام أدوات اختيار أقصر، وتسهّل القراءة، وتوفّر المزيد من الوحدات النمطية من خلال تضمين القواعد داخل قواعد أخرى. تتوفّر ميزة "التداخل في CSS" ضمن الأساسيات المتوفّرة حديثًا، وهي متاحة منذ عام تقريبًا.
كانت هناك بعض الحالات الحدّية التي لم تعمل على النحو المتوقّع. على سبيل المثال، باستخدام كتلة CSS التالية، من المفترض أن يكون لون الخلفية أخضر، لأنّه يظهر في النهاية، ولكنّه أحمر.
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
لحلّ حالات مثل هذه، قدّم فريق عمل CSS قاعدة التصريحات المتداخلة، والتي تم تنفيذها في الإصدار 130 من Chrome. الآن، تؤدي كتلة CSS نفسها إلى ظهور خلفية خضراء، كما هو متوقّع. إذا كنت تدمج تعريفات مجردة مع قواعد متداخلة، عليك التحقّق من الرمز البرمجي.
يمكنك الاطّلاع على مقالة Bramus
تحسين التداخل في CSS باستخدام CSSNestedDeclarations
للحصول على شرح أكثر تفصيلاً.
box-decoration-break
تتيح لك السمة box-decoration-break في CSS تحديد طريقة عرض أجزاء العنصر عند تقسيمها على أسطر أو أعمدة أو صفحات متعددة.
على سبيل المثال، يبدو هذا العنصر رائعًا عندما يكون كل شيء في سطر واحد.
عندما يتم تقسيم المحتوى على عدة أسطر، يتم تقسيم الزخارف مثل الخلفية وظل المربع والحدود وما إلى ذلك، ما يؤدي إلى ظهور مظهر حاد.
من خلال إضافة box-decoration-break: clone، يتم عرض كل جزء بشكل مستقل، ما يمنح الصورة مظهرًا أفضل بكثير.
مع أنّها ليست Baseline تمامًا، إلا أنّها متاحة في Chrome وFirefox، ويتم استخدام بادئة خاصة بالمورّد في Safari.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
يمكنك الاطّلاع على
box-decoration-break المستندات على شبكة مطوّري Mozilla
ومنشور Rachel The box-decoration-break property in Chrome 130
لمزيد من التفاصيل.
وغير ذلك
بالطبع، هناك المزيد.
- بعد بعض المحاولات غير الناجحة، أصبحت حاويات التمرير التي يمكن التركيز عليها باستخدام لوحة المفاتيح متاحة أخيرًا.
- تتضمّن WebGPU ميزة دمج مصدرَين.
- ويحصل Web Serial على سمة متصلة.
محتوى إضافي للقراءة
هذا يشمل بعض النقاط الرئيسية فقط. يمكنك الاطّلاع على الروابط التالية لمعرفة المزيد من التغييرات في الإصدار 130 من Chrome.
- ملاحظات إصدار Chrome 130
- الميزات الجديدة في "أدوات مطوّري البرامج في Chrome" (الإصدار 130)
- تعديلات على ChromeStatus.com للإصدار 130 من Chrome
- قائمة التغييرات في مستودع مصدر Chromium
- تقويم إصدارات Chrome
اشتراك
للبقاء على اطّلاع على آخر الأخبار، اشترِك في قناة Chrome Developers على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عند نشر فيديو جديد.
أنا "بيت ليباج"، وبمجرّد طرح الإصدار 131 من Chrome، سنكون هنا لنخبرك بالميزات الجديدة في Chrome.