الميزات الجديدة في 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. 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 Close (والتي تُعتَبر بشكل أفضل باسم 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.

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

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

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

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

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

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

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

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

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

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

ومقاييس أخرى

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

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

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

اشتراك

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

مرحبًا أدريانا جارا، وفور إطلاق Chrome 117، سأكون هنا لإخبارك بالجديد في Chrome.