الميزات الجديدة في 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، ستحتاج غالبًا إلى الوصول إلى البيانات الوصفية الخاصة بالمضيف حول الوحدة الحالية. يتيح الإصدار 64 من Chrome الآن استخدام السمة import.meta داخل الوحدات ويعرِض عنوان URL للوحدة على النحو التالي: import.meta.url.

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

وغير ذلك

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

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

window.alert()

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

لن يعود عليك التبديل العشوائي لعلامات التبويب بسبب حدوث window.alert. أنا أطّلع على "تقويم Google" القديم.

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

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