الميزات الجديدة في 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. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  1. 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;
}

/*  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 وبرمجة Map تشغيله (والتي يُنظر إليها بشكل أفضل على أنها 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.

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

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

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

خيارات الإلغاء في القائمة المنسدلة لأحد الطلبات.

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

اختَر مجلدًا واسمح بالوصول إليه في شريط الإجراءات في أعلى الصفحة.

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

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

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

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

وغير ذلك

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

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

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

اشتراك

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

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