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

Adriana Jara

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

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

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

الفئة الزائفة :picture-in-picture

باستخدام واجهة برمجة التطبيقات 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) في السياقات غير الآمنة.

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

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

مراجع إضافية

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

اشتراك

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

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