الجديد في 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.