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

Adriana Jara

في ما يلي المعلومات التي يجب معرفتها:

اسمي أدريانا خارا. لنستكشف معًا الميزات الجديدة المتاحة للمطوّرين في الإصدار 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 وبرمجة MapReduce (التي من الأفضل اعتبارها عملية ربط-تجميع-تقليل).

تتيح إمكانية دمج البيانات في مجموعات للمطوّرين إمكانية احتساب مجموعات بيانات ذات ترتيب أعلى. على سبيل المثال، متوسط عمر مجموعة نموذجية أو قيم 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" إلى المصادر > عمليات التجاوز > المحرّر لتتمكّن من تجاوز محتوى على الويب.

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

رمز التجاوز بجانب طلب في لوحة "الشبكة"

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

وغير ذلك

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

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

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

اشتراك

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

أنا أدريانا خارا، وسأكون هنا فور إصدار الإصدار 117 من Chrome لأخبرك بالميزات الجديدة في Chrome.