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

بيت ليب

Twitter GitHub تأثير اهتزاز Mastodon الصفحة الرئيسية

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

• أصبح عرض الأوقات النسبية الآن جزءًا من Intl API.
• يؤدي تحديد أي جانب من النص إلى ظهور التسطير عليه للنص الذي يتدفق رأسيًا.
• طلب تفعيل المستخدم قبل استخدام واجهة برمجة تطبيقات اصطناع الكلام.

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

اسمي بيت ليب. دعونا نتعمق أكثر ونتعرف على الميزات الجديدة للمطورين في Chrome 71!

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

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

• قائمة تغييرات مستودع مصدر Chromium
• تحديثات ChromeStatus.com لإصدار Chrome 71
• عمليات إزالة Chrome 71 وإيقافه نهائيًا

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

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

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

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

يقدّم Chrome 71 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 للحصول على التفاصيل الكاملة.

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

نص عمودي مع تسطير غير متسق

عند عرض نص صيني أو ياباني في تدفق عمودي، تكون المتصفحات غير متسقة مع مكان وضع التسطير، فقد يكون على اليسار أو على اليمين.

في Chrome 71، تقبل السمة 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);
}

ملاحظة: للتأكد من عمل الرمز البرمجي، أقترح عليك إدراج نص طلب صياغة الكلام في قسم try/catch، وبالتالي إذا لم يتم تفعيل الصفحة، لن يؤدي ذلك إلى إيقاف التطبيقات الأخرى.

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

ومقاييس أخرى

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

• يمكن الآن تخصيص طريقة Element.requestFullscreen() على Android وتتيح لك الاختيار بين جعل شريط التنقّل مرئيًا أو الوضع الغامر تمامًا الذي لا يتم فيه عرض عناصر تحكّم لوكيل المستخدم إلى أن يتم تنفيذ إيماءة المستخدم.
• تم تغيير وضع بيانات الاعتماد التلقائي لطلبات النص البرمجي للوحدة من omit إلى same-origin.
• بفضل تضمين Chrome مع مواصفات Shadow DOM v1، يحتسب Chrome 71 الآن خصوصية الفئتين :host() و:host-context() الزائفة، بالإضافة إلى الوسيطات الخاصة بـ ::slotted().

فيديوهات مؤتمر Chrome DevSummit

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

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

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

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

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

اشتراك

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

اسمي بيت ليب، وبعد طرح الإصدار 72 من Chrome، سأكون على استعداد هنا لإخبارك بالجديد في Chrome!