الجديد في Chrome 106

Pete LePage
Adriana Jara

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

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

واجهات برمجة التطبيقات الدولية الجديدة

تساعد واجهات برمجة التطبيقات الدولية في عرض المحتوى بتنسيق مترجَم.

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

تعرف واجهة برمجة التطبيقات مكان ظهور رمز العملة أو كيفية تنسيق التواريخ والأوقات أو تجميع قائمة.

يضيف الإصدار 106 من Chrome مجموعة كبيرة من وظائف تنسيق الأرقام الجديدة.

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

هل تحتاج إلى عرض نطاق أسعار؟ يمكنك التواصل مع فريق formatRange للحصول على المساعدة.

أنشئ عنصرًا جديدًا من النوع numberFormat، وقدِّم style والخيارات الأخرى، وعدد الأرقام المطلوب عرضها.

بعد ذلك، استخدِم formatRange() للحصول على السلسلة المنسَّقة.

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

هل تريد تقريب رقم إلى أقرب زيادة بمقدار خمسة بدقة منزلتَين عشريتين؟ لا مشكلة.

حدِّد minimumFractionDigits وroundingIncrement، ثم اتصل بـ format().

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

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

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

يمكنك الاطّلاع على مستندات تنسيق الأرقام الدولية على MDN للحصول على مزيد من المعلومات.

تسهّل واجهة برمجة التطبيقات Pop-Up API إنشاء واجهات المستخدم، وذلك في الحالات التي تحتاج فيها إلى عرض المعلومات أمام المستخدم مباشرةً.

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

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

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

يمكن للمستخدمين إغلاق النافذة المنبثقة تلقائيًا باستخدام إيماءات مثل مفتاح ESC أو النقر على عناصر أخرى.

ويمكن للمطوّرين التحكّم بشكل كامل في نمط الطبقة العليا وموقعها وحجمها، بالإضافة إلى المرونة في تعديل السلوكيات التلقائية. استخدام CSS وHTML فقط

يمكنك الاطّلاع على مقالة Jhey للحصول على المزيد من الأمثلة وخيارات واجهة برمجة التطبيقات.

اشترِك في الفترة التجريبية للإصدار الأصلي لتزويد المستخدمين بسهولة بالمعلومات في الوقت المناسب. أخبرنا عن رأيك.

ميزات css الجديدة

هناك ميزتان جديدتان في CSS تعملان على تحسين إمكانية التشغيل التفاعلي ونأمل أن تسهّلا عليك بعض المهام.

تمّت إضافة وحدة طول جديدة: ic ستنضم إلى المجموعة. ic مشابه لـ ch. ولكن يتم استخدام ic تحديدًا للنص المكتوب بلغات تستخدم الرموز الإيديوغرافية، ويُستخدَم أساسًا لقياس الطول استنادًا إلى عرض أو ارتفاع هذا الحرف [نقطة في مكان ما] الذي يعني الماء.

وهي وحدة مصمّمة لتحديد حجم النص، ما يتيح لك الحد من العرض لتحسين إمكانية القراءة، كما توفّر إمكانية التحكّم بشكل متوقّع بغض النظر عن حجم النص.

على سبيل المثال، إذا ضبطت max-width للحاوية، على سبيل المثال 10ic، تُدرك أنّ هذه الحاوية ستحتوي على 10 أحرف رسومية بعرض كامل كحد أقصى، بغض النظر عن حجم الخط. اطّلِع على المثال التالي:

ستتوفّر قريبًا إمكانية استخدام شبكة CSS مع grid-template-columns وgrid-template-rows، وكان من المخطّط طرحها في الإصدار 106، ولكن تم تأجيلها وسيتم إطلاقها في الإصدار 107 من Chrome، وسيظل بإمكانك تجربتها في الإصدار التجريبي من Chrome. في ما يلي رمز Bramus كمثال:

وغير ذلك

بالطبع، هناك الكثير من الميزات الأخرى.

  • سنبدأ المرحلة الخامسة من خطة تقليل عدد وكلاء المستخدمين.
  • سيتم إيقاف ميزة HTTP2 Push ونوع الحصة الدائمة نهائيًا.
  • أصبحت سمة CSS‏ hyphenate-character متاحة الآن بدون بادئة.

مراجع إضافية

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

اشتراك

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

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