مرّ عشر سنوات على طرح Chrome لأول مرة. لقد تغيّر الكثير منذ ذلك الحين، ولكن لم يتغيّر هدفنا المتمثل في إنشاء قاعدة صلبة لتطبيقات الويب الحديثة.
في الإصدار 69 من Chrome، أضفنا إمكانية استخدام ما يلي:
- تتيح لك CSS Scroll Snap إنشاء تجارب تنقّل سلسة وسريعة .
- تتيح لك فتحات الشاشة استخدام المساحة الكاملة للشاشة، بما في ذلك أي مساحة خلف فتحة الشاشة، والتي تُعرف أحيانًا باسم "الشاشة المُثقوبة".
- تتيح لك واجهة برمجة التطبيقات Web Locks API الحصول على قفل بشكل غير متزامن، والاحتفاظ به أثناء تنفيذ العمل، ثم تحريره.
وهناك الكثير غير ذلك.
اسمي بيت ليبيه. لنطّلع على الميزات الجديدة للمطوّرين في Chrome 69.
هل تريد الاطّلاع على القائمة الكاملة بالتغييرات؟ اطّلِع على قائمة التغييرات في مستودع مصدر Chromium.
محاذاة التمرير في CSS
تتيح لك 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
، يمكنك الآن إجراء ذلك. على سبيل المثال، لطلب توسيع المتصفّح ليشمل منطقة الصورة المقطوعة للشاشة،
اضبط السمة 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 مقدّمة رائعة عن أقفال الويب وتتضمّن شرحًا أكثر تفصيلاً والكثير من الأمثلة. أو يمكنك التعمّق أكثر والاطّلاع على المواصفات.
وغير ذلك
هذه ليست سوى بعض التغييرات في الإصدار 69 من Chrome للمطوّرين، وبالطبع، هناك المزيد.
- من مواصفات CSS4، يمكنك الآن إنشاء انتقالات ألوان حول
محيط دائرة باستخدام
التدرّجات المخروطية.
تقدّم Lea Verou
حزمة CSS
conic-gradient()polyfill يمكنك استخدامها، وتتضمّن الصفحة مجموعة كبيرة من عيّنات رائعة أرسلها المستخدمون. - هناك طريقة جديدة
toggleAttribute()في العناصر تبدِّل وجود سمة، مثلclassList.toggle(). - ثمة طريقتان جديدتان لصفائف JavaScript:
flat()وflatMap(). وتُعرِض صفيفًا جديدًا يتضمّن جميع عناصر الصفيف الفرعي. - وينقل
OffscreenCanvasالعمل من سلسلة المهام الرئيسية إلى سلسلة مهام عامل، ما يساعد في إزالة نقاط الاختناق في الأداء.
بيض عيد الفصح
هل عثرت على كل المفاجآت المخفية في الفيديو؟
- كتاب Chrome المصور
- أساور Chromercise
- مدفع البطاطس
- الوحش الصغير
- ديناصور خشبي من CDS 2017
نشكر جميع الأشخاص الذين ساهموا في إنشاء الحلقة 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.