الجديد في Chrome 106

Pete LePage
Adriana Jara

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

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

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

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

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

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

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

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 للحصول على مزيد من المعلومات.

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

تنقل السمة 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 فقط.

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

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

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

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

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

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

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

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

ومقاييس أخرى

بالطبع هناك المزيد.

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

محتوى إضافي للقراءة

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

اشتراك

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

اسمي "أدريانا جارا"، وبمجرد إطلاق Chrome 107، سأكون هنا لإخبارك بالجديد في Chrome!