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