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

Pete LePage

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

وهناك المزيد.

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

سجلّ التغييرات

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

عرض الأوقات النسبية باستخدام Intl.RelativeTimeFormat()

Twitter يعرض الوقت النسبي لآخر مشاركة

تستخدِم العديد من تطبيقات الويب عبارات مثل "أمس" أو "بعد يومَين" أو "قبل ساعة" لتحديد وقت حدوث حدث معيّن أو وقت حدوثه، بدلاً من عرض التاريخ والوقت الكاملَين.

أصبح عرض الأوقات النسبية شائعًا جدًا لدرجة أنّ معظم مكتبات التاريخ/الوقت الشائعة توفّر دوالّ مترجَمة للتعامل مع ذلك. في الواقع، تُعدّ Moment JS من بين المكتبات الأولى التي أضيفها في كل تطبيق ويب أنشأه تقريبًا، وذلك لهذا الغرض تحديدًا.

يقدّم الإصدار 71 من Chrome دالة Intl.RelativeTimeFormat() التي تنقل العمل إلى محرك JavaScript، وتفعّل التنسيق المترجَم للوقت المطلق. يمنحنا ذلك تحسينًا بسيطًا في الأداء، ويعني أنّنا لن نحتاج سوى إلى هذه المكتبات كبديل لعناصر polyfill عندما لا يتيح المتصفّح استخدام واجهات برمجة التطبيقات الجديدة بعد.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

إنّ استخدام هذه الطريقة بسيط، ما عليك سوى إنشاء مثيل جديد وتحديد اللغة، ثم استدعاء التنسيق مع الوقت النسبي. يمكنك الاطّلاع على مشاركة "ماتياس" بعنوان Intl.RelativeTimeFormat API للحصول على التفاصيل الكاملة.

تحديد موضع التسطير للنص العمودي

نص عمودي مع خطوط سفلية غير متسقة

عند عرض نص صيني أو ياباني في اتجاه عمودي، لا تتّبع المتصفّحات أسلوبًا موحّدًا في موضع ال underline، فقد يكون على يمين النص أو على يساره.

في الإصدار 71 من Chrome، تقبل السمة text-underline-position الآن left أو right كجزء من مواصفات زخرفة النصوص في CSS3. تضيف مواصفات زخرفة النصوص في CSS3 عدة سمات جديدة تسمح بتحديد أشياء مثل نوع الخط الذي تريد استخدامه، الأسلوب واللون و الموضع.


.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

تتطلب ميزة تركيب الكلام تفعيل المستخدم

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

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

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

لا شيء أسوأ من الانتقال إلى موقع إلكتروني وتفاجئك المشكلة فيه، ويكون زملاء العمل جالسين من حولك.

وغير ذلك

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

فيديوهات Chrome DevSummit

إذا لم تتمكن من حضور قمة مطوّري Chrome أو إذا حضرتها ولكنك لم تتمكّن من الاطّلاع على كل المحادثات، يمكنك الاطّلاع على قائمة تشغيل قمة مطوّري Chrome لعام 2018 على قناتنا على YouTube.

شرحت "إيفانا" و"فيل" بعض الأساليب الرائعة لاستخدام مهام الخدمة في مقالة إنشاء تطبيقات أسرع وأكثر مرونة باستخدام مهام الخدمة.

تحدّثت "ماريكو" و"جاك" عن كيفية إنشاء Squoosh في تطبيقات الويب المعقدة التي تستخدم JavaScript بشكل كبير، وتجنُّب البطء.

غطّت "كاتي" و"حسين" بعض الأساليب الرائعة لتحسين أداء موقعك الإلكتروني إلى أقصى حدّ في مقالة أساسيات السرعة: الأساليب الرئيسية للمواقع الإلكترونية السريعة.

أسقط جاسر الكعكة. تتوفّر أيضًا العديد من الفيديوهات الرائعة الأخرى في قائمة تشغيل Chrome DevSummit 2018، لذلك ننصحك بمشاهدتها.

اشتراك

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

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