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

Pete LePage

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

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

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

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

اسمي بيت ليباج. لنستكشف الميزات الجديدة المتاحة للمطوّرين في الإصدار 69 من Chrome.

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

CSS Scroll Snap

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

بالنسبة إلى لوحة عرض دوّارة للصور، سأضيف 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 Scroll Snap للحصول على مزيد من التفاصيل والأمثلة التي يمكنك تجربتها.

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

هاتف جوّال مع صورة مقطوعة للشاشة
تضيف المتصفّحات بعض المساحة الإضافية على جهاز جوّال يحتوي على فتحة عرض لتجنُّب حجب المحتوى بسبب الفتحة.

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

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

باستخدام متغيّرات بيئة CSS وعلامة viewport-fit meta، يمكنك الآن إجراء ذلك. على سبيل المثال، لإخبار المتصفّح بالتوسّع في منطقة القطع على الشاشة، اضبط السمة viewport-fit في العلامة الوصفية 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 مقدمة رائعة حول Web Locks ويشمل شرحًا أكثر تفصيلاً والكثير من الأمثلة. أو يمكنك الاطّلاع على المواصفات.

وغير ذلك

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

تدرّج مخروطي

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

مفاجآت مخفية

هل عثرت على كل الألغاز في الفيديو؟

نتوجّه بالشكر إلى جميع الأشخاص الذين ساهموا في إنجاز 28 حلقة من سلسلة &quot;جديد في Chrome&quot;. كل واحد من هؤلاء الأشخاص رائع!

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 Bloopers

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

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

اشتراك

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

أنا &quot;بيت ليباج&quot;، وسأكون هنا فور إصدار Chrome 70 لأخبرك بالميزات الجديدة في Chrome.