الجديد في Chrome 85

بيت ليبيج

يبدأ طرح الإصدار 85 من Chrome على الإصدار الثابت الآن.

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

اسمي بيت ليب، وأنا أعمل وأصوِّر من المنزل. دعونا نغوص في التفاصيل ونطّلع على الميزات الجديدة لمطوّري البرامج في الإصدار Chrome 85!

مستوى ظهور المحتوى

عملية عرض المتصفِّحات

فتحويل رمز HTML إلى محتوى يستطيع المستخدم مشاهدته، يتطلّب من المتصفّح المرور بعدة خطوات حتى يتمكّن حتى من عرض البكسل الأول. وينطبق ذلك على الصفحة بأكملها، حتى مع المحتوى غير المرئي في إطار العرض.

ويؤدي تطبيق content-visibility: auto على عنصر إلى إعلام المتصفّح بأنّه يمكنه تخطّي عملية العرض لهذا العنصر حتى يتم تمريره إلى إطار العرض، ما يوفّر عرضًا أوليًا أسرع.


.my-class {
  content-visibility: auto;
}

للاستفادة إلى أقصى حدّ من content-visibility، يمكنك تطبيقه على الأقسام الرئيسية التي تتضمّن خوارزميات تنسيق أكثر تعقيدًا، مثل flexbox وgrid أو التي لديها عناصر ثانوية ذات تنسيقات مضمَّنة خاصة بها.

من خلال تقسيم المحتوى وإضافة content-visibility: auto;، ارتفع وقت عرض هذه الصفحة من 232 ملي ثانية إلى 30 ملي ثانية فقط.

يمكنك الاطّلاع على مقياس مستوى عرض المحتوى لمعرفة كيفية استخدامه لتحسين أداء العرض.

@property ومتغيرات CSS

تُعد متغيرات CSS، التي يُطلق عليها تقنيًا خصائص مخصصة، رائعة. باستخدام خصائص Houdini CSS وValue API، يمكنك تحديد نوع وقيمة احتياطية تلقائية لخصائصك المخصصة. وقد تناولناها سابقًا في الميزات الجديدة في Chrome 78، عندما أتحنا تعريفها في JavaScript.

بدءًا من Chrome 85، يمكنك أيضًا تحديد خصائص CSS وتعيينها مباشرةً في CSS. ما يعجبني في خصائص CSS هو أنها تمنح الخاصية معنى دلالي وقيمًا احتياطية وتتيح حتى اختبار CSS.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

نشرت "أونا" مشاركة رائعة بعنوان @property: تمنح ميزات خارقة لمتغيرات CSS توضح لك كيفية استخدامها.

تثبيت التطبيقات ذات الصلة

تتيح getInstalledRelatedApps() واجهة برمجة التطبيقات لك التحقق مما إذا كان تطبيقك مثبتًا، ثم تخصيص تجربة المستخدم.

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

عند شحنه لأول مرة في Chrome 80، كان متوافقًا مع تطبيقات Android فقط. على أجهزة Android، يمكن أيضًا للتطبيق التحقق مما إذا كان تطبيق الويب التقدّمي (PWA) مثبّتًا. وعلى نظام التشغيل Windows، يمكنها التحقّق من تثبيت تطبيق Windows UWP.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

يمكنك الاطّلاع على المقالة هل تطبيقك مثبَّت؟ getInstalledRelatedApps() سيخبرك على web.dev للاطّلاع على آلية عمله وكيفية توقيع تطبيقاتك لإثبات ملكيتها.

اختصارات رموز التطبيقات

اختصار رمز التطبيق على نظام التشغيل Windows

في الإصدار 84 من Chrome، أتحنا استخدام اختصارات رموز التطبيقات. قلت عن طريق الخطأ أنها كانت متوفرة في كل مكان، لكنها كانت متاحة فقط على Android. والآن، في Chrome 85، تتوفر على نظامي التشغيل Android وWindows وفي كل من Chrome وEdge.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

يمكنك مراجعة مقالة اختصارات رموز التطبيقات على web.dev للحصول على التفاصيل الكاملة، وأعتذر عن الالتباس الذي سبّبته لك هذه المشكلة.

مرحلة التجربة والتقييم: طلبات البث باستخدام "fetch()"

بدءًا من الإصدار 85 من Chrome، تتوفّر إمكانية بث تحميل fetch كإصدار تجريبي. يتيح لك بدء عملية الجلب قبل أن يكون نص الطلب جاهزًا. في السابق، لم يكن بإمكانك إرسال المحتوى إلا بعد إعداد جميع أجزاءه استعدادًا لإرساله، ولكن الآن يمكنك البدء بإرسال المحتوى حتى أثناء إنشاءه.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

على سبيل المثال، يمكنك استخدامه لتدفئة الخادم أو بث الصوت أو الفيديو من خلال التقاطه من الميكروفون أو الكاميرا.

يلقي "جيك" نظرة معمّقة على مقالة طلبات البث باستخدام واجهة برمجة تطبيقات الجلب على web.dev، كما تطرّق إلى ذلك في فيديو HTTP203 - طلبات البث باستخدام الجلب.

والمزيد

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

تعرض السمة Promise.any تعهدًا يتم الوفاء به بالوعد الأول الذي يتم تقديمه أو رفضه.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

من الأسهل استبدال جميع المثيلات في سلسلة باستخدام .replaceAll()، ولم يعُد هناك تعبيرات عادية!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

يتيح Chrome 85 استخدام فك ترميز AVIF، وهو تنسيق صورة تم ترميزه باستخدام AV1 وتم توحيده من خلال تحالف الوسائط المفتوحة. يحقق AVIF زيادة كبيرة في الضغط مقارنةً بملفات JPEG وWebP، وقد أظهرت دراسة حديثة في Netflix أنّ نسبة توفير 50% من المحتوى في مقابل JPEG العادية وتوفير أكثر من 60% في المحتوى بنسبة عرض إلى ارتفاع 4:4:4.

وبدأت إزالة ملف AppCache.

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

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

اشتراك

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

اسمي بيت ليبيج، وقد تم قص شعري أخيرًا .

بمجرد طرح الإصدار 86 من Chrome، سأكون هنا لإخبارك بالجديد في Chrome!