الميزات الجديدة في الإصدار 130 من Chrome

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

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

عرض المستندات في وضع "نافذة ضمن النافذة"

إنّ واجهة برمجة التطبيقات لميزة "نافذة ضمن النافذة" رائعة عندما تريد إخراج فيديو من علامة تبويب في المتصفّح حتى تتمكّن من متابعة الفيديو أثناء التفاعل مع مواقع إلكترونية أو تطبيقات أخرى. ولكنّه لا يعرض سوى الفيديوهات.

نافذة "نافذة ضمن النافذة" في Spotify

تزيل واجهة برمجة التطبيقات لميزة "نافذة ضمن النافذة" في المستندات هذا القيد، ما يتيح لك إنشاء نافذة ضمن النافذة يمكنك التحكّم في محتواها. وهي رائعة لاستخدامات مثل مشغلات الفيديو المخصّصة واجتماعات الفيديو وتطبيقات الإنتاجية. أحب ما فعلته 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 Nesting هو مقياس أساسي متاح حديثًا، وقد كان متاحًا منذ عام تقريبًا.

حدثت بعض الحالات الشاذة التي لم تعمل على النحو المتوقّع. على سبيل المثال، باستخدام وحدة CSS التالية، من المتوقّع أن يكون لون الخلفية أخضر، لأنّه يأتي في آخر الترتيب، ولكنّه أحمر.

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

لحلّ الحالات الشاذة مثل هذه، طرحت مجموعة عمل CSS قاعدة التعريفات المتداخلة، والتي تم تنفيذها في الإصدار 130 من Chrome. الآن، يؤدي مقتطف CSS نفسه إلى ظهور خلفية خضراء، على النحو المتوقّع. إذا كنت تُدرِج بين العناصر بيانات فارغة مع قواعد مُدمجة، عليك التحقّق من الرمز البرمجي مرة أخرى.

يمكنك الاطّلاع على مقالة Bramus بعنوان تحسين تداخل CSS باستخدام CSSNestedDeclarations لمزيد من الشرح التفصيلي.

box-decoration-break

تتيح لك سمة CSS box-decoration-break تحديد كيفية عرض أجزاء العنصر عند تقسيمها على عدة أسطر أو أعمدة أو صفحات.

عدم استخدام فواصل أسطر

على سبيل المثال، يبدو هذا العنصر رائعًا عندما يكون كل شيء في سطر واحد.

فواصل الأسطر مع الشرائح

عند تقسيم المحتوى على خطوط متعددة، يتم تقسيم الزخارف، مثل الخلفية، وتظليل المربّع، والحدود، وما إلى ذلك، ما يؤدي إلى إنشاء شكل مفاجئ.

فواصل الأسطر مع النسخة

من خلال إضافة box-decoration-break: clone، يتم عرض كل جزء بشكل مستقل، ما يمنح المخطط شكلًا أجمل.

على الرغم من أنّه ليس Baseline تمامًا، إلا أنّه متاح في Chrome وFirefox، ويُضاف إليه بادئة المورّد في Safari.

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

يمكنك الاطّلاع على مستندات box-decoration-break على MDN ومقالة "راشيل" السمة box-decoration-break في الإصدار 130 من Chrome لمزيد من التفاصيل.

وغير ذلك

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

مراجع إضافية

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

اشتراك

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

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