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

Adriana Jara

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

اسمي أدريانا جارا. لنطّلِع على الميزات الجديدة للمطوّرين في 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.

وغير ذلك

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

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

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

اشتراك

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

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