الجديد في Chrome 62

بيت ليبيج

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

اسمي بيت ليب. لنتعمق في الأمر ونتعرّف على الميزات الجديدة للمطوّرين في الإصدار 62 من Chrome.

هل تريد الاطّلاع على القائمة الكاملة بالتغييرات؟ راجِع قائمة تغييرات مستودع مصدر Chromium.

مؤشر جودة الشبكة

كانت Network Information API متاحة في Chrome منذ فترة، ولكنها لا توفِّر سرعات الشبكة النظرية إلا وفقًا لاتصال المستخدم. تخيل أنك تستخدم شبكة WiFi، ولكنك متصل بنقطة اتصال خلوية بسرعة 2G فقط؟ ستُبلِغ واجهة برمجة التطبيقات عن شبكة Wi-Fi.

console.log(navigator.connection.type);
> wifi

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

لتبسيط منطق التطبيق، تعرض واجهة برمجة التطبيقات أداء الشبكة الذي تم قياسه من حيث المقارنة مع اتصال شبكة الجوّال. على سبيل المثال، عند الاتصال باتصال ألياف فائقة السرعة، ستعرض واجهة برمجة التطبيقات القيمة 4G.

console.log(navigator.connection.effectiveType);
> 4G

ستتوفّر هذه الإشارات أيضًا على شكل عناوين طلبات HTTP وسيتم تفعيلها من خلال ميزة Client Hints. يُرجى الاطّلاع على العيّنة والاطّلاع على spec لمزيد من التفاصيل.

الخطوط المتغيّرة لـ OpenType

تقليديًا، يحتوي خط واحد على مثيل واحد فقط من مجموعة الخطوط، على سبيل المثال، سُمك واحد أو امتداد واحد. إذا كنت تريد العادي، والغامق والمائل، فستحتاج إلى تضمين ثلاثة خطوط منفصلة، زيادة وزن صفحتك.

خط متغير OpenType يعادل خطوط فردية متعددة يمكن تجميعها بشكل مضغوط داخل ملف خط واحد. من خلال تعديل خصائص font-variation-settings CSS والتمديد والنمط والوزن وغير ذلك، يمكن بسهولة تعديلها، ما يؤدي إلى توفير عدد غير محدود من الاختلافات الأسلوبية. يمكن الآن دمج هذه الخطوط الثلاثة في ملف واحد مضغوط.

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

تعطينا الخطوط المتغيرة OpenType أداة جديدة وفعالة لإنشاء أسلوب الخط سريع الاستجابة وتقليل حجم الصفحة. اطّلع على مقدمة عن خطوط OpenType Variables من تأليف "جون هدسون" للحصول على مزيد من التفاصيل.

التقاط الوسائط من عناصر DOM

يمكنك الآن التقاط محتوى مباشر في MediaStream مباشرةً من "HTMLMediaElements"، مثل الصوت والفيديو، باستخدام Media Capture من DOM Elements API.

بعد استدعاء captureStream() على عنصر وسائط HTML، يمكن التلاعب بالمحتوى الذي يتم بثه أو معالجته أو إرساله عن بُعد أو تسجيله. تخيل استخدام صوت الويب لإنشاء مُعادِل الصوت أو برنامج ترميز الصوت الخاص بك. أو بث المحتوى إلى موقع بعيد باستخدام WebRTC الاحتمالات لا حصر لها تقريبًا.

تصنيفات غير آمنة لبعض صفحات HTTP

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

ومقاييس أخرى

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

بعد ذلك، اشترِك في قناتنا على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.

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