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

Pete LePage

في ما يلي ما تحتاج إلى معرفته:

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

تحديد أفضل مسار باستخدام URLPattern

تعتمد جميع تطبيقات الويب تقريبًا على التوجيه بطريقة ما، سواء كان ذلك من خلال تشغيل رمز على خادم يربط مسارًا بملفات على القرص أو منطق في تطبيق من صفحة واحدة يعدّل نموذج المستند (DOM) عند تغيير عنوان URL. ‫URLPattern هي واجهة برمجة تطبيقات جديدة لمنصّة الويب تعمل على توحيد بنية أنماط التوجيه.

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

إذا كنت معتادًا على بنية التوجيه المستخدَمة في Express أو Ruby on Rails أو path-to-regexp، من المحتمل أن يبدو هذا مألوفًا لك.

لاستخدامها، أنشئ URLPattern() جديدًا وقدِّم التفاصيل التي تريد مطابقتها مع النمط. يمكن أن تحتوي الأنماط على أحرف بدل ومجموعات رموز مميزة مسماة ومجموعات تعبيرات عادية ومعدّلات مجموعات.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

على سبيل المثال، لنلقِ نظرة على URLPattern التي قد تستخدمها "مستندات Google". سنحدّد kind الملف وID الملف وmode الذي سيتم فتحه فيه. بعد ذلك، لاستخدام النمط، يمكننا استدعاء test() أو exec().

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

يتم تفعيل URLPattern تلقائيًا في الإصدار 95 من Chrome وEdge والإصدارات الأحدث. بالنسبة إلى المتصفّحات أو البيئات، مثل Node، التي لا تتوافق معها بعد، يمكنك استخدام مكتبة urlpattern-polyfill.

يمكنك الاطّلاع على مقالة "جيف" ‫URLPattern يتيح التوجيه إلى منصة الويب للحصول على التفاصيل الكاملة.

اختيار الألوان باستخدام Eye Dropper API

تتضمّن كل تطبيقات التصميم التي استخدمتها تقريبًا أداة اختيار الألوان، ما يسهّل معرفة لون أي عنصر. تتضمّن بعض المتصفحات إمكانية اختيار الألوان مدمجة في <input type=color>، ولكنّها ليست مثالية.

توفّر واجهة برمجة التطبيقات "أداة اختيار الألوان"، التي نفّذها بعض الموظفين في Microsoft، هذه الوظيفة على الويب. لاستخدامها، أنشئ EyeDropper() مثيلاً جديدًا، ثم استدعِ open() عليه.

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

وكما هو الحال مع العديد من واجهات برمجة التطبيقات الحديثة على الويب، تعمل هذه الواجهة بشكل غير متزامن، وبالتالي لا تحظر سلسلة التعليمات الرئيسية. عندما ينقر المستخدم على اللون الذي يريده، سيتم عرض اللون الذي نقر عليه.

PWA Summit

هل شاركت في "قمة تطبيقات الويب التقدّمية" في وقت سابق من هذا الشهر؟

لقد سررنا بمشاركة الكثير من الأشخاص تجاربهم حول تطبيقات الويب التقدّمية. إذا فاتتك مشاهدة الفيديوهات، يمكنك الاطّلاع عليها الآن على PWASummit.org أو على قناة PWA Summit على YouTube.

مرحلة التجربة والتقييم لميزة "تقليل معلومات وكيل المستخدم"

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

بدءًا من الإصدار 95 من Chrome، تتوفّر مرحلة تجربة وتقييم جديدة تتيح لك الموافقة على تلقّي سلسلة وكيل المستخدم المخفَّضة الآن. سيساعدك ذلك في رصد المشاكل وحلّها قبل أن يصبح تقليل سلسلة وكيل المستخدم هو السلوك التلقائي في Chrome.

سيتم تطبيق التغييرات بشكل تدريجي على مدار عدد من الإصدارات، ولكن كل ما تحتاج إلى إعداده واختباره متاح الآن.

يمكنك الاطّلاع على جميع التفاصيل والجدول الزمني في المشاركة التجربة الأصلية لتقليل معلومات وكيل المستخدم على developer.chrome.com.

وغير ذلك

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

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

هذا يشمل بعض النقاط الرئيسية فقط. يمكنك الاطّلاع على الروابط أدناه لمعرفة المزيد من التغييرات في Chrome 95.

اشتراك

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

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