الميزات الجديدة في 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".

يشير ذلك المصطلح إلى مقارنة بين الحالة السابقة واللاحقة لتقسيم مساحة التخزين.

اطّلِع على هذه المقالات للحصول على مستندات حول الإطارات الحدودية وProtected Audience API ومساحة التخزين المشتركة وغيرها.

Topics API

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

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

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

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

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

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

ومقاييس أخرى

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

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

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

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

اشتراك

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

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