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

Pete LePage

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

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

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

ResizeObserver

قد يكون من الصعب تتبُّع التغييرات في حجم العنصر. من المرجّح أن يتم إرفاق أداة معالجة الحدث بحدث resize في المستند، ثم استدعاء getBoundingClientRect أو getComputedStyle. ولكن يمكن أن يؤدي كلاهما إلى تعذُّر عرض الصفحة.

ماذا لو لم يتغيّر حجم نافذة المتصفّح، ولكن تمت إضافة عنصر جديد إلى المستند؟ أو هل أضفت display: none إلى عنصر؟ ويمكن أن يؤدي كلاهما إلى تغيير حجم العناصر الأخرى في الصفحة.

يُرسِل ResizeObserver إشعارًا إليك عند تغيُّر حجم العنصر، ويقدّم الارتفاع والعرض الجديدَين للعنصر، ما يقلل من خطر تعذُّر عرض التنسيق.

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

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

اطّلِع على ResizeObserver: أداة مثل document.onresize في Elements لمزيد من التفاصيل والأمثلة من الواقع.

أكره علامات التبويب التي تظهر أسفل الشاشة. أنت تعرفها، وهي عندما تفتح صفحة نافذة منبثقة تنقل إلى وجهة معيّنة وتنتقل إلى الصفحة. وعادةً ما يكون أحدهما إعلانًا أو محتوى لم تكن تريده.

اعتبارًا من الإصدار 64 من Chrome، سيتم حظر هذا النوع من عمليات التنقّل، وستعرِض Chrome بعض واجهة المستخدم الأصلية للمستخدم، ما يتيح له اتّباع عملية إعادة التوجيه إذا أراد ذلك.

import.meta

عند كتابة وحدات JavaScript، غالبًا ما تحتاج إلى الوصول إلى metadata المتعلقة بالمضيف عن الوحدة الحالية. يتيح الإصدار 64 من Chrome الآن استخدام السمة import.meta داخل الوحدات ويعرِض عنوان URL للوحدة على النحو التالي: import.meta.url.

وهذا مفيد حقًا عندما تريد حلّ الموارد بالنسبة إلىملف الوحد بدلاً من مستند HTML الحالي.

وغير ذلك

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

  • يتيح Chrome الآن استخدام عمليات الالتقاط المُسمّاة وعمليات الهروب الخاصة بخصائص Unicode في التعبيرات العادية.
  • أصبحت القيمة التلقائية preload للعنصرَين <audio> و<video> هي metadata. ويؤدي ذلك إلى توافق Chrome مع المتصفّحات الأخرى ويساعد في تقليل معدل نقل البيانات واستخدام الموارد من خلال تحميل البيانات الوصفية فقط وليس الوسائط نفسها.
  • يمكنك الآن استخدام Request.prototype.cache لعرض وضع ذاكرة التخزين المؤقت لملف Request وتحديد ما إذا كان الطلب هو طلب إعادة تحميل.
  • باستخدام Focus Management API، يمكنك الآن التركيز على عنصر بدون الانتقال إليه باستخدام السمة preventScroll.

window.alert()

ملاحظة أخرى: على الرغم من أنّ هذه الميزة ليست "ميزة للمطوّرين"، إلا أنّها تسرّني. لم يعُد بإمكان window.alert() عرض علامة تبويب في الخلفية في المقدّمة. بدلاً من ذلك، سيتم عرض التنبيه عندما يعود المستخدم إلى علامة التبويب هذه.

لن يعود بإمكان أي شيء أن يتسبب في تبديل علامات التبويب بشكل عشوائي.window.alert أقصد "تقويم Google" القديم.

احرص على الاشتراك في قناتنا على YouTube، وستصلك إشعارات عبر البريد الإلكتروني عند نشر فيديو جديد.

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