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

Adriana Jara

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

• ثلاث ميزات جديدة في CSS تسهّل إضافة رسوم متحركة سلسة للدخول والخروج.
• احتساب مجموعات بيانات من الدرجة الأعلى باستخدام تجميع الصفائف
• تسهّل أدوات مطوري البرامج عمليات الإلغاء المحلية.
• وهناك الكثير من الميزات الأخرى.

اسمي أدريانا جارا. لنطّلع على الميزات الجديدة للمطوّرين في الإصدار 117 من Chrome.

ميزات CSS جديدة لحركة الدخول والخروج.

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

الميزة الأولى هي "transition-behavior". لنقل السمات المنفصلة، مثل display، استخدِم القيمة allow-discrete لسمة transition-behavior.

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

بعد ذلك، يتم استخدام القاعدة @starting-style لإضافة تأثيرات متحركة للعناصر عند دخولها من display: none إلى الطبقة العليا. استخدِم @starting-style لتطبيق نمط يمكن أن يبحث عنه المتصفّح قبل فتح العنصر على الصفحة.

/*  0. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

أخيرًا، لإخفاء popover أو dialog من الطبقة العليا، أضِف السمة overlay إلى قائمة الانتقالات. أدرِج العنصر المتراكب في الانتقال أو الحركة لتحريكه مع بقية الميزات وتأكَّد من بقائه في الطبقة العليا عند تحريكه. سيبدو هذا الإجراء أكثر سلاسة.

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

اطّلِع على أربع ميزات جديدة في CSS لإنشاء مؤثرات متحركة سلسة للدخول والخروج لمعرفة تفاصيل عن كيفية استخدام هذه الميزات لتحسين تجربة المستخدم من خلال الصور المتحركة.

تجميع المصفوفة

في البرمجة، يعد تجميع الصفائف عملية شائعة للغاية، وتحدث في أغلب الأحيان عندما نستخدم عبارة GROUP BY في SQL وبرمجة MapOrder (والتي يُنظر إليها على نحو أفضل على أنها map-group-reduce).

تتيح إمكانية دمج البيانات في مجموعات للمطوّرين احتساب مجموعات بيانات من ترتيب أعلى. على سبيل المثال، متوسط عمر مجموعة نموذجية أو قيم LCP اليومية لإحدى صفحات الويب.

تتيح تجميع الصفيفات هذه السيناريوهات من خلال إضافة الطريقتَين الثابتتَين Object.groupBy وMap.groupBy.

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

في المثال التالي، من مستندات MDN، تتوفّر صفيف من المنتجات مع استخدام طريقة groupBy لعرضها مجمّعة حسب نوعها.

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

لمزيد من التفاصيل، يمكنك الاطّلاع على مستندات groupBy.

تم تبسيط عمليات إلغاء الإعدادات المحلية في "أدوات مطوّري البرامج".

تمّت الآن تبسيط ميزة الاستبدالات المحلية، ما يتيح لك محاكاة عناوين الاستجابة ومحتوى الويب للموارد البعيدة بسهولة من لوحة الشبكة بدون الوصول إليها.

لإلغاء محتوى الويب، افتح لوحة الشبكة، وانقر بزر الماوس الأيمن على أحد الطلبات، واختَر إلغاء المحتوى.

إذا كانت لديك عمليات إلغاء محلية تم إعدادها ولكنّها غير مفعّلة، تفعّلها "أدوات مطوّري البرامج". إذا لم يسبق لك إعدادها، سيطلب منك DevTools ذلك في شريط الإجراءات في أعلى الصفحة. اختَر مجلدًا لتخزين عمليات الإلغاء فيه واسمح لأداة DevTools بالوصول إليه.

بعد إعداد عمليات الاستبدال، ستنقلك أدوات المطوّرين إلى المصادر > عمليات الاستبدال > المحرِّر للسماح لك باستبدال محتوى الويب.

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

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

وغير ذلك

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

• تمّ الآن تنفيذ القيمة subgrid التي طال انتظارها لـ grid-template-columns وgrid-template-rows في Chrome.

• تتوفّر تجربة إيقاف WebSQL نهائي وتجربة مطوّر لإيقاف الحدث unload نهائيًا.

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

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

• الميزات الجديدة في الإصدار 117 من "أدوات مطوّري البرامج في Chrome"
• الميزات التي سيتم إيقافها نهائيًا أو إزالتها في الإصدار 117 من Chrome
• تعديلات ChromeStatus.com بشأن الإصدار 117 من Chrome
• قائمة تغيير مستودع مصدر Chromium
• تقويم إصدارات Chrome

اشتراك

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

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