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

Pete LePage

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

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

للحصول على شرح أكثر تفصيلاً، راجِع مقالة "براموس" بعنوان تحسين عملية دمج 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 فور طرحه.