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

Adriana Jara

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

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

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

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

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

بفضل :picture-in-picture css pseudo-class، يمكنك إضافة أنماط إلى العناصر لتحسين التجربة.

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

#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 API التحكّم في كيفية تشغيل تطبيق الويب، على سبيل المثال، ما إذا كان يستخدم نافذة حالية أو جديدة، وما إذا كانت النافذة المختارة ستنتقل إلى عنوان URL لبدء التشغيل.

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

والآن، يمكن لتطبيقات الويب launch_handler في بيان التطبيق تخصيص سلوك التشغيل.

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

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

credentialless إطارات iframe

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

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

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

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

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

ومقاييس أخرى

وبالطبع هناك المزيد.

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

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

يشتمل FileSystemHandle الآن على طريقة remove().

محتوى إضافي للقراءة

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

اشتراك

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

اسمي "أدريانا جارا"، وبمجرد إطلاق Chrome 111، سأكون هنا لإخبارك بالجديد في Chrome!