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

Adriana Jara

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

  • استخدِم ScrollTimeline وViewTimeline لإنشاء رسوم متحركة مستندة إلى الانتقالات تُحسِّن تجربة المستخدم.
  • تعمل اللقطات المُحدودة مع واجهات برمجة تطبيقات أخرى في "مبادرة حماية الخصوصية" لتضمين المحتوى ذي الصلة مع منع مشاركة السياق غير الضروري.
  • باستخدام واجهة برمجة التطبيقات Topics API، يمكن للمتصفّح مشاركة معلومات مع جهات خارجية عن اهتمامات المستخدِم مع الحفاظ على الخصوصية.
  • وهناك الكثير من الميزات الأخرى.

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

الصور المتحركة المستندة إلى الانتقال

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

توضِّح الأمثلة التالية بعض حالات الاستخدام. على سبيل المثال، يمكنك إنشاء مؤشرات قراءة تتحرك أثناء الانتقال للأعلى أو للأسفل:

مؤشر القراءة أعلى المستند، يتم تشغيله من خلال التمرير.

يمكن أن تؤدي الصور المتحركة المستندة إلى الانتقال للأعلى أو للأسفل أيضًا إلى إنشاء عناصر تظهر تدريجيًا عند ظهورها:

تظهر الصور في هذه الصفحة بشكل تدريجي.

يتم تشغيل الرسم المتحرك المُرفَق بعنصر تلقائيًا على المخطط الزمني للمستند. يبدأ وقت المصدر من 0 عند تحميل الصفحة، ويبدأ بالتقدم مع مرور الوقت. هذا هو المخطط الزمني التلقائي للحركة، وكان حتى الآن المخطط الزمني الوحيد للحركة الذي يمكنك الوصول إليه.

تحدِّد مواصفات الرسوم المتحرّكة المستندة إلى الانتقال للأعلى أو للأسفل نوعَين جديدَين من المخططات الزمنية يمكنك استخدامهما:

  • مخطط زمني لتقدّم الانتقال للأسفل أو للأعلى: مخطط زمني مرتبط بموقع الانتقال للأسفل أو للأعلى لحاوية الانتقال للأسفل أو للأعلى على طول محور معيّن.
  • عرض المخطط الزمني للتقدّم: مخطط زمني مرتبط بالموضع النسبي لعنصر معيّن داخل حاوية التمرير

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

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

اطّلِع على الرسوم المتحرّكة التي يتم تشغيلها من خلال الانتقال للأعلى أو للأسفل للاطّلاع على جميع التفاصيل والمزيد من الأمثلة.

الإطارات المضمّنة

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

وتهدف العديد من اقتراحاتها إلى تلبية حالات الاستخدام على مستوى المواقع الإلكترونية بدون ملفات تعريف الارتباط التابعة لجهات خارجية أو آليات التتبُّع الأخرى. على سبيل المثال:

  • ‫Protected Audience API: تسمح بعرض الإعلانات المستندة إلى الاهتمامات بطريقة تحافظ على الخصوصية.
  • مساحة التخزين المشتركة: تتيح الوصول إلى البيانات غير المقسّمة على مستوى المواقع الإلكترونية في بيئة آمنة.

وللحفاظ على الخصوصية، تتطلّب بعض واجهات برمجة التطبيقات هذه طريقة جديدة لتضمين المحتوى. يُطلق على هذا الحلّ اسم "الإطار المحدود".

تعمل الإطارات المحدودَة مع اقتراحات أخرى ضمن "مبادرة حماية الخصوصية" لعرض المستندات من أقسام تخزين مختلفة ضمن صفحة واحدة.

الإطار المحدود هو عنصر HTML للمحتوى المضمّن، يشبه إطار iframe. على عكس إطارات iframe، يحدّ الإطار المحدود من التواصل مع سياق التضمين الخاص به للسماح للإطار بالوصول إلى البيانات على مستوى الموقع الإلكتروني بدون مشاركتها مع سياق التضمين.

وبالمثل، لا يمكن مشاركة أي بيانات خاصة بالطرف الأول في سياق التضمين مع الإطار المحدود.

الميزة iframe fencedframe
تضمين المحتوى نعم نعم
يمكن للمحتوى المضمَّن الوصول إلى نموذج كائن المستند (DOM) لسياق التضمين نعم لا
يمكن للسياق المضمّن الوصول إلى نموذج كائن المستند (DOM) للمحتوى المضمّن. نعم لا
السمات القابلة للتتبّع، مثل name نعم لا
عناوين URL (http://example.com) نعم نعم (حسب حالة الاستخدام)
مصدر غير شفاف مُدار من المتصفّح (urn:uuid) لا نعم
الوصول إلى البيانات على جميع المواقع الإلكترونية لا نعم (يعتمد ذلك على حالة الاستخدام)

على سبيل المثال، لنفترض أنّ news.example (سياق التضمين) تضمّن إعلانًا من shoes.example في إطار محدود. لا يمكن لخدمة news.example إخراج البيانات من إعلان shoes.example، ولا يمكن لخدمة shoes.example الاطّلاع على بيانات الطرف الأول من news.example.

مقارنة بين حالة تقسيم مساحة التخزين قبل إجراء التغيير وبعده

اطّلِع على هذه المقالات للحصول على مستندات عن Fenced Frames وProtected Audience API وShared Storage وغير ذلك.

Topics API

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

تسمح Topics API للمتصفّح بمشاركة معلومات مع جهات خارجية عن اهتمامات المستخدم مع الحفاظ على الخصوصية.

تتيح واجهة Topics API الإعلانات التي تستهدِف الاهتمامات بدون تتبُّع المواقع الإلكترونية التي يزورها المستخدِم. يرصد المتصفّح المواضيع التي يبدو أنّها تهمّ المستخدم ويُسجّلها استنادًا إلى نشاط التصفّح. ويتم تسجيل هذه المعلومات على جهاز المستخدم.

على سبيل المثال، قد تقترح واجهة برمجة التطبيقات الموضوع "Fiber & Textile Arts" لمستخدم يزور الموقع الإلكتروني knitting.example.

المواضيع هي إشارة لمساعدة منصّات تكنولوجيا الإعلان في اختيار الإعلانات ذات الصلة. وعلى عكس ملفات تعريف الارتباط التابعة لجهات خارجية، تتم مشاركة هذه المعلومات بدون الكشف عن معلومات إضافية عن المستخدم نفسه أو نشاط تصفّحه.

اطّلِع على نظرة عامة على "مبادرة حماية الخصوصية" للحصول على جميع التفاصيل حول تصنيف المواضيع واستخدام Topics API.

وغير ذلك

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

  • زيادة الحد الأقصى لحجم WebAssembly.Module في سلسلة المحادثات الرئيسية إلى 8 ميغابايت
  • تقبل الآن خاصية CSS display كلمات رئيسية متعددة كقيمة، بالإضافة إلى الكلمات الرئيسية القديمة المُعدّة مسبقًا.
  • تتوفّر فترة تجريبية للمنشأ لواجهة برمجة التطبيقات Compute Pressure API، والتي تقدّم معلومات عالية المستوى عن الحالة الحالية لأجهزة الجهاز.

مراجع إضافية

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

اشتراك

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

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