الجديد في Chrome 62

Pete LePage

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

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

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

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

كانت واجهة برمجة التطبيقات Network Information API متاحة في Chrome لفترة من الوقت، ولكنها لا تقدّم سوى سرعات نظرية للشبكة استنادًا إلى اتصال المستخدم. لنفترض أنّك تستخدم شبكة Wi-Fi، ولكنّك متصل بنقطة اتصال جوّال توفّر سرعات شبكة الجيل الثاني فقط. ستعرض واجهة برمجة التطبيقات معلومات شبكة WiFi.

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

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

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

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

وستتوفّر هذه الإشارات أيضًا كرؤوس طلبات HTTP ويتم تفعيلها من خلال ملاحظات العميل. يمكنك الاطّلاع على النموذج والاطّلاع على المواصفات للتعرّف على التفاصيل بشكل أعمق.

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

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

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

.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 أداة جديدة فعّالة لإنشاء تصاميم مطبعية سريعة الاستجابة والحد من حجم الصفحة. اطّلِع على مقالة Introducing OpenType Variable Fonts التي كتبها "جون هدسون" لمعرفة المزيد من التفاصيل.

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

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

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

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

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

وغير ذلك

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

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

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