الميزات الجديدة في الإصدار 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"

يمكن الآن للوحة وحدة معالجة الرسومات على الويب استخدام النطاق الكامل للشاشة مع الصور بتقنية النطاق العالي الديناميكية.

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

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

مراجع إضافية

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

اشتراك

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

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