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

Pete LePage

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

في الإصدار 69 من Chrome، أضفنا إمكانية استخدام ما يلي:

  • تتيح لك CSS Scroll Snap إنشاء تجارب تنقّل سلسة وسريعة.
  • تتيح لك فتحات الشاشة استخدام المساحة الكاملة للشاشة، بما في ذلك أي مساحة خلف فتحة الشاشة، والتي تُعرف أحيانًا باسم "الشاشة المُثقوبة".
  • تتيح لك واجهة برمجة التطبيقات Web Locks API الحصول على قفل بشكل غير متزامن، والاحتفاظ به أثناء تنفيذ العمل، ثم تحريره.

وهناك الكثير غير ذلك.

اسمي بيت ليبيه. لنطّلِع على الميزات الجديدة للمطوّرين في Chrome 69.

هل تريد الاطّلاع على القائمة الكاملة بالتغييرات؟ اطّلِع على قائمة التغييرات في مستودع مصدر Chromium.

CSS Scroll Snap

عرض العرض التوضيحي | المصدر

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

بالنسبة إلى لوحة العرض الدوّارة للصور، يمكن إضافة scroll-snap-type: x mandatory; إلى حاوية التمرير وscroll-snap-align: center; إلى كل صورة. بعد ذلك، عندما ينتقل المستخدم في لوحة العرض الدوّارة، سيتم الانتقال بسلاسة بكل صورة إلى الموضع المثالي.


#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

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

أجزاء الشاشة المقتطعة (المعروفة أيضًا باسم القطع العلوية)

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

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

ماذا لو أردت استخدام هذه المساحة؟

باستخدام متغيّرات بيئة CSS والعلامة الوصفية viewport-fit ، يمكنك الآن إجراء ذلك. على سبيل المثال، لإعلام المتصفّح بالتوسّع في منطقة فتحة الشاشة، اضبط السمة viewport-fit في علامة meta viewport على cover.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

يمكنك بعد ذلك استخدام safe-area-inset-* متغيّرات بيئة CSS لتنسيق المحتوى.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

تتوفّر مشاركة رائعة على مدوّنة WebKit حول تصميم المواقع الإلكترونية لأجهزة iPhone X، أو يمكنك الاطّلاع على الشرح لمزيد من التفاصيل.

Web Locks API

تتيح لك واجهة برمجة التطبيقات Web Locks API الحصول على قفل بشكل غير متزامن، والاحتفاظ به أثناء تنفيذ العمل، ثم تحريره. أثناء الاحتفاظ بالقفل، لا يمكن لأي نص برمجي آخر في المصدر الحصول على القفل نفسه، ما يساعد في تنسيق استخدام الموارد المشتركة.

على سبيل المثال، إذا كان تطبيق ويب يعمل في علامات تبويب متعددة يريد التأكّد من أنّه تتم مزامنة علامة تبويب واحدة فقط مع الشبكة، سيحاول رمز المزامنة الحصول على قفل باسم network_sync_lock.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

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

تقدّم MDN مقدّمة رائعة عن أقفال الويب وتتضمّن شرحًا أكثر تفصيلاً والكثير من الأمثلة. أو يمكنك التعمّق أكثر والاطّلاع على المواصفات.

وغير ذلك

هذه ليست سوى بعض التغييرات في الإصدار 69 من Chrome للمطوّرين، وبالطبع، هناك الكثير من التغييرات الأخرى.

تدرّج مخروطي

  • من مواصفات CSS4، يمكنك الآن إنشاء انتقالات ألوان حول محيط دائرة باستخدام التدرّجات المخروطية. تقدّم Lea Verou حزمة CSS conic-gradient() polyfill يمكنك استخدامها، وتتضمّن الصفحة مجموعة كبيرة من عيّنات رائعة أرسلها المستخدمون.
  • هناك طريقة جديدة toggleAttribute() في العناصر تبدِّل وجود سمة، مثل classList.toggle().
  • ستحصل صفائف JavaScript على طريقتَين جديدتَين: flat() وflatMap(). وتُعرِض صفيفًا جديدًا يتضمّن جميع عناصر الصفيف الفرعي.
  • وينقل OffscreenCanvas العمل من سلسلة المهام الرئيسية إلى سلسلة مهام عامل، ما يساعد في إزالة نقاط الاختناق في الأداء.

بيض عيد الفصح

هل عثرت على كل الرموز المخفية في الفيديو؟

نشكر جميع الأشخاص الذين ساهموا في إنشاء الحلقة 28 من سلسلة "ميزات جديدة في Chrome". كل واحد من هؤلاء الأشخاص رائع.

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

هل تريد الاطّلاع على الميزات الجديدة التي تم طرحها في Chrome منذ الحلقة الأولى؟ اطّلِع على هذا الفيديو الممتع الذي يعرض تطوّرنا ويمتد على 30 ثانية ويوضّح تاريخنا منذ نشر أول فيديو لنا حتى اليوم.

شكرًا لك على مشاهدة الفيديو وتقديم ملاحظاتك ومقترحاتك. لقد قرأت كل الاقتراحات وسنأخذها بعين الاعتبار. لقد ساهمت في تحسين هذه الفيديوهات .

شكرًا على المشاهدة.

الأخطاء الشائعة في Chrome

لقد جمعنا مجموعة من الأخطاء المضحكة لنشاركها معك. بعد مشاهدة الفيديو، تعرّفت على بعض الأمور:

  • عندما أتلعثم في الكلام، أُصدر بعض الأصوات الغريبة.
  • أُخرج لسانه وأُظهر تعابير وجهية.
  • أتحرّك كثيرًا.

اشتراك

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

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