الميزات الجديدة في Chrome 66

Pete LePage

• أصبح من الأسهل التلاعب بلغة CSS باستخدام عنصر نموذج كتابة CSS الجديد.
• أصبح الوصول إلى الحافظة الآن غير متزامن.
• هناك سياق عرض جديد لعناصر اللوحة.

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

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

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

نموذج الكائنات من النوع المحدّد في CSS

إذا سبق لك تعديل سمة CSS من خلال JavaScript، يعني ذلك أنّك استخدمت نموذج كائن CSS. ولكنّها تعرض كل البيانات كسلسلة.

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

لإضافة تأثير متحرك إلى السمة opacity، يجب تحويل السلسلة إلى رقم، ثم زيادة القيمة وتطبيق التغييرات. ليس مثاليًا تمامًا.

function step(timestamp) {
  const currentOpacity = parseFloat(el.style.opacity);
  const newOpacity = currentOpacity + 0.01;
  element.style.opacity = newOpacity;
  if (newOpacity <= 1) {
    window.requestAnimationFrame(step);
  }
}

باستخدام نموذج CSS Typed Object Model الجديد، يتم عرض قيم CSS كعناصر JavaScript من النوع المحدّد، ما يزيل الكثير من عمليات التلاعب بالنوع ويقدّم طريقة أكثر ملاءمةً للعمل مع CSS.

بدلاً من استخدام element.style، يمكنك الوصول إلى الأنماط من خلال السمة .attributeStyleMap أو .styleMap. وتعرض هذه العناصر عنصرًا يشبه الخريطة يسهل قراءته أو تعديله.

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!

مقارنةً بنموذج CSS Object Model القديم، تُظهر مقاييس الأداء المبكّرة تحسُّنًا بنسبة %30 تقريبًا في العمليات في الثانية، وهو أمر مهم بشكل خاص للرسوم المتحرّكة في JavaScript.

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

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

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

نشر "إريك" مشاركة رائعة تتضمّن العديد من العروض التوضيحية والأمثلة في الشرح.

Async Clipboard API

const successful = document.execCommand('copy');

قد يكون النسخ واللصق المتزامن باستخدام document.execCommand مناسبًا لقطع قصيرة من النص، ولكن بالنسبة إلى أي شيء آخر، من المرجّح أن تؤدي طبيعة النسخ واللصق المتزامن إلى حظر الصفحة، ما يتسبب في تجربة سيئة للمستخدم. ولا يتطابق نموذج الأذونات بين المتصفّحات.

واجهة برمجة التطبيقات الجديدة Async Clipboard API هي بديل يعمل بشكل غير متزامن، ويتكامل مع واجهة برمجة التطبيقات Permission API لتقديم تجربة أفضل للمستخدمين.

يمكن نسخ النص إلى الحافظة من خلال طلب writeText().

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

بما أنّ واجهة برمجة التطبيقات هذه غير متزامنة، تعرض الدالة writeText() وعدًا سيتم حلّه أو رفضه استنادًا إلى ما إذا كان النص الذي تم تمريره قد تم نسخه بنجاح.

وبالمثل، يمكن قراءة النص من الحافظة من خلال استدعاء getText() وانتظار حلّ الوعد الذي تم إرجاعه باستخدام النص.

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

يمكنك الاطّلاع على مشاركة "جايسون" والعروض التوضيحية في الشرح. لديه أيضًا أمثلة تستخدِم دوال async.

سياق جديد للوحة الرسم BitmapRenderer

يتيح لك العنصر canvas التحكّم في الرسومات على مستوى البكسل، ويمكنك رسم الرسوم البيانية أو التحكّم في الصور أو حتى معالجة الفيديوهات في الوقت الفعلي. ولكن، ما لم تكن تبدأ بصفحة canvas فارغة، ستحتاج إلى طريقة لعرض صورة على الcanvas.

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

const context = el.getContext('2d');
const img = new Image();
img.onload = function () {
  context.drawImage(img, 0, 0);
}
img.src = 'llama.png';

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

لاستخدام هذه الميزة:

1. اتصل بـ createImageBitmap وقدِّم له قطعة بيانات صورة لإنشاء الصورة.
2. استخدِم سياق bitmaprenderer من canvas.
3. بعد ذلك، عليك نقل الصورة.

const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

تمّت معالجة الصورة.

AudioWorklet

تطبيقات Worklets متوفّرة الآن تم طرح PaintWorklet في الإصدار 65 من Chrome، وسنفعّل الآن AudioWorklet تلقائيًا في الإصدار 66 من Chrome. يمكن استخدام هذا النوع الجديد من Worklet لمعالجة الصوت في سلسلة مهام الصوت المخصّصة، ما يحلّ محلّ ScriptProcessorNode القديم الذي كان يتم تشغيله في السلسلة الرئيسية. يتم تشغيل كل AudioWorklet في نطاقه الشامل الخاص، مما يؤدي إلى تقليل وقت الاستجابة وزيادة ثبات معدل نقل البيانات.

يمكنك الاطّلاع على بعض الأمثلة المثيرة للاهتمام على وحدات AudioWorklet في ميزات Google Chrome الاختبارية.

وغير ذلك

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

• تتيح السمتَان TextArea وSelect الآن استخدام السمة autocomplete.
• سيؤدي ضبط autocapitalize على عنصر form إلى تطبيقه على أيّ ملف شخصي فرعي حقول، ما يُحسِّن التوافق مع تنفيذ Safari لملف autocapitalize.
• يتوفّر الرمزان trimStart() وtrimEnd() الآن كطريقة مستندة إلى المعايير لحذف المسافات البيضاء من السلاسل.

احرص على الاطّلاع على الميزات الجديدة في "أدوات مطوّري البرامج في Chrome"، للتعرّف على الميزات الجديدة في "أدوات مطوّري البرامج" في Chrome 66. إذا كنت مهتمًا بتطبيقات الويب التقدّمية، يمكنك الاطّلاع على سلسلة فيديوهات "جولة PWA" الجديدة. بعد ذلك، انقر على الزر اشتراك في قناتنا على YouTube، وستلقّى إشعارًا عبر البريد الإلكتروني كلما طرحنا فيديو جديدًا.

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