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

Pete LePage

  • سيتيح لك دعم ResizeObservers، إبلاغك عندما يتم تغيير حجم مستطيل محتوى أحد العناصر.
  • يمكن للوحدات الآن الوصول إلى بيانات وصفية محدّدة المضيفة باستخدام import.meta.
  • تزداد قوة حاجب النوافذ المنبثقة.
  • لم يعُد التركيز على window.alert() مفعَّلاً.

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

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

هل تريد الاطّلاع على القائمة الكاملة بالتغييرات؟ راجِع قائمة تغييرات مستودع مصادر 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" للعناصر للحصول على مزيد من التفاصيل والأمثلة على أرض الواقع.

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

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

import.meta

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

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

ومقاييس أخرى

هذه ليست سوى عدد قليل من التغييرات في Chrome 64 للمطورين، بالطبع، هناك الكثير غير ذلك.

  • يتيح 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، سأكون على أتمّ استعداد لإطلاعك على آخر الأخبار في Chrome!