الميزات الجديدة في الإصدار 129 من Chrome

Pete LePage

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

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

تقسيم المهام الطويلة باستخدام scheduler.yield()

تؤدّي المهام الطويلة إلى تأخير قدرة المتصفّح على الاستجابة لإدخالات المستخدم، ما يخلق انطباعًا بأنّ الموقع الإلكتروني بطيء، ويؤثّر في مقاييس الأداء المهمة، مثل INP. باستخدام scheduler.yield()، يمكنك تقسيم المهام الطويلة إلى أجزاء أصغر، ما يؤدي إلى تحسين الاستجابة من خلال التسليم الصريح إلى سلسلة المهام الرئيسية.

ويتيح لك ذلك إخبار المتصفّح بما يلي:

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

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

أضِف السطر التالي إلى رمز JavaScript بشكل متكرّر لمنح المتصفّح بعض الوقت للراحة وتجنُّب مشاكل INP.

await scheduler.yield();

من المهم أيضًا أنّه يسمح بمنح الأولوية لمواصلة تنفيذ الرمز البرمجي حتى لا تفقد أيّ ميزة من خلال التنازل عن المساحة. ننصحك باستخدام scheduler.yield() بشكلٍ متحرّر في الدوالّ بين أيّ أجزاء أكبر من العمل.

يمكنك الاطّلاع على تحسين المهام الطويلة لمزيد من التفاصيل.

الصور المتحركة ذات الأحجام الأساسية

إنّ الرسوم المتحرّكة في CSS رائعة، ولكنّها تتطلّب عادةً أحجامًا واضحة، ولا يمكنك استخدام الكلمات الرئيسية لتحديد الحجم التلقائي مثل auto أو min-content أو fit-content.

توفّر خاصيّة CSS interpolate-size مجموعة جديدة من الصور المتحركة التي لم تكن متاحة عند استخدام كلمات رئيسية لتحديد الحجم الجوهري.

بدون interpolate-size، لن تظهر أي انتقالات بين الأزرار في الفيديو التالي.

بعد إضافة interpolate-size: allow-keywords، ستظهر أزرار في الفيديو مع تأثير رسوم متحركة جميل للانتقال.

يؤدي تحديد interpolate-size: allow-keywords في عنصر root إلى ضبط السلوك الجديد للصفحة بأكملها. ننصحك بإجراء ذلك عندما لا تكون هناك مشكلة في التوافق.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

للتحكّم بشكل أدق، تتيح دالة CSS calc-size()، مثل calc()، أيضًا إجراء عمليات على إحدى الكلمات الرئيسية المسموح بها للحجم الأساسي بالضبط. عند إجراء عمليات حسابية للتنسيق، يتم تقييم الكلمة الرئيسية size على أنّها الحجم الأصلي calc-size-basis.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

اطّلِع على Animate to height: auto; (والكلمات الرئيسية الأخرى ذات الصلة بالحجم الأساسي) في CSS للحصول على التفاصيل الكاملة.

تغييرات على موضع علامات الربط في CSS

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

أولاً، تمت إعادة تسمية inset-area إلى position-area. وقد تمّ اختيار هذا الاسم لأنّ عبارة position- تساعدك على تذكُّر أنّ هذه السمة تُطبَّق على العنصر الذي تمّ تحديد موضع له، وليس على عنصر الربط.

ثانيًا، تمت إعادة تسمية position-try-options إلى position-try-fallbacks. يساعدك ذلك في تذكُّر أنّ هذه مجرد بدائل للموضع الأساسي الذي تحدّده الأنماط الأساسية.

أخيرًا، تتم إزالة البنية الوظيفية inset-area() من position-try. لذلك، استخدِم position-try-fallbacks: top بدلاً من position-try-fallbacks: inset-area(top).

وغير ذلك

بالطبع، هناك الكثير من الميزات الأخرى.

تتوفّر طريقة Intl جديدة لتنسيق المدّات، مع إمكانية استخدام لغات متعددة.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

يمكن الآن للوحة Web GPU استخدام النطاق الكامل للشاشة لعرض الصور ذات النطاق العالي الديناميكية.

وهناك بعض عمليات الإيقاف النهائي والإزالة التي قد تؤثر في بعض المطوّرين.

قراءة ملاحظات الإصدار الكاملة

مراجع إضافية

لا يشمل ذلك سوى بعض النقاط الرئيسية. يمكنك الاطّلاع على الروابط التالية للاطّلاع على التغييرات الإضافية في الإصدار 129 من Chrome.

اشتراك

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

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