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

Adriana Jara

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

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

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

ميزات جديدة لصفحات الأنماط المتتالية (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 وبرمجة MapReduce (التي يُفضَّل اعتبارها 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 بالوصول إليه.

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

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

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

وغير ذلك

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

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

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

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

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

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

اشتراك

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

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