الميزات الجديدة في Chrome 110

Adriana Jara

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

  • أضِف نمطًا مخصّصًا إلى عناصر الصورة داخل الصورة باستخدام :picture-in-picture الفئة الزائفة الجديدة.
  • اضبط سلوك إطلاق تطبيق الويب باستخدام launch_handler في البيان.
  • استخدام السمة credentialless في إطارات iframe لتضمين محتوى تابع لجهة خارجية لا يؤدي إلى ضبط سياسة أداة تضمين عدّة مصادر
  • وهناك الكثير من الميزات الأخرى.

اسمي أدريانا جارا. لنطّلع على الميزات الجديدة للمطوّرين في الإصدار 110 من Chrome.

فئة الصور الزائفة: ميزة "نافذة ضمن النافذة"

باستخدام واجهة برمجة التطبيقات Picture-in-Picture API، يمكن للمواقع الإلكترونية إنشاء نافذة فيديو عائمة تظهر دائمًا في أعلى الشاشة كي يواصل المستخدمون مشاهدة الوسائط أثناء التفاعل مع المحتوى الآخر.

والآن، باستخدام الفئة الزائفة :picture-in-picture في css، يمكنك إضافة أنماط إلى العناصر لتحسين التجربة.

يوضّح المقتطف أدناه كيفية استخدام فئة "صورة في صورة" لإضافة رسالة إلى حاوية الفيديو تذكر المستخدم بأنّ الفيديو يتم تشغيله الآن في مكان آخر.

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

استخدِم الفئة الزائفة مرة أخرى على عنصر الفيديو، لجعل العنصر شفافًا لعرض الرسالة بشكل صحيح.

يمكنك تجربة المثال وتحسين تجارب مشاهدة الفيديوهات في وضع "نافذة ضمن النافذة".

عنصر launch_handler في البيان

تتيح لك Launch Handler API التحكّم في طريقة تشغيل تطبيق الويب، على سبيل المثال، ما إذا كان يستخدم نافذة حالية أو جديدة وما إذا كان يتم الانتقال إلى النافذة المحدّدة إلى عنوان URL للتشغيل.

لنلقِ نظرة على مثال: في بيئات سطح المكتب، إذا ثبَّت تطبيقًا ثم انتقلت إليه على المتصفح، يظهر زر للانتقال إلى نافذة التطبيق المستقل. في السابق، كان السلوك الوحيد المتاح هو تشغيل التطبيق في نافذة جديدة.

الآن، يمكن للتطبيقات على الويب تخصيص سلوك إطلاقها باستخدام launch_handler عنصر البيان.

على سبيل المثال، يؤدي المقتطف أدناه إلى تركيز جميع عمليات تشغيل تطبيق الويب هذا على نافذة تطبيق حالية والانتقال إليها (إذا كانت متوفّرة) بدلاً من فتح نافذة جديدة دائمًا.

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

credentialless إطارات iframe

من أكبر التحديات التي تواجهها ميزة "حظر الوصول من نطاقات أخرى" هي أنّه يجب نشر COEP وCORP في جميع إطارات iframe التي تعود إلى نطاقات أخرى . ولن يحمّل المتصفّح إطار iframe بدون هذه العناوين.

تساعد السمة credentialless على تضمين إطارات iframe تابعة لجهات خارجية لم يتم ضبط هذه العناوين.

باستخدام credentialless، يتم تحميل إطار iframe من سياق فارغ مختلف. على وجه الخصوص، يتم تحميله بدون ملفات تعريف الارتباط. يبدأ إطار iframe بملف تعريف ارتباط فارغ.

وبالمثل، تحمِّل واجهات برمجة التطبيقات لوحدات التخزين، مثل LocalStorage وCacheStorage وما إلى ذلك، البيانات وتخزّنها في القسم المؤقت الجديد. يتم محو كل مساحة التخزين هذه بعد إلغاء تحميل مستند المستوى الأعلى. يتيح ذلك إزالة القيود المفروضة على سياسة COEP.

يمكنك الاطّلاع على مزيد من المعلومات في هذه المقالة لاستخدام credentialless بأمان لتحميل محتوى تابع لجهة خارجية في إطارات iframe.

وغير ذلك

وبالطبع هناك الكثير.

تمّت الآن إزالة لغة الاستعلامات البنيوية على الويب (WebSQL) في السياقات غير الآمنة.

توفّر السمة initial-letter في CSS طريقة لضبط عدد الأسطر التي يجب أن يدرجها الحرف الأول في سطور النص التالية.

يتضمّن FileSystemHandle الآن طريقة remove().

مراجع إضافية

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

اشتراك

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

اسمي "أدريانا جارا"، وسأكون هنا لإطلاعك على الميزات الجديدة في Chrome فور إصدار الإصدار 111.