وفي ما يلي ما تحتاج إلى معرفته:
- تسهّل ثلاث ميزات جديدة من CSS إضافة إدخال وخروج سلس من الصور المتحركة.
- احسب مجموعات البيانات ذات الترتيب الأعلى باستخدام تجميع الصفيف.
- تسهّل "أدوات مطوّري البرامج" عمليات الإلغاء المحلية.
- بالإضافة إلى المزيد.
أنا "أدريانا جارا" لنطّلِع على التفاصيل ونتعرّف على الميزات الجديدة للمطوّرين في الإصدار 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.
ومقاييس أخرى
بالطبع هناك المزيد.
تم الآن تطبيق قيمة
subgrid
المُرتقَبة للسمةgrid-template-columns
وgrid-template-rows
في Chrome.تتوفّر فترة تجريبية للإيقاف النهائي لميزة "
WebSQL
" وفترة تجريبية لمطوّري البرامج للإيقاف النهائي لحدث "unload
".من المفترَض أن يتم إطلاق
notRestoredReasons
API الخاصة بميزة "التخزين المؤقت للصفحات" في هذا الإصدار، كما ورد في فيديو Chrome 116.
محتوى إضافي للقراءة
يتناول هذا الدليل بعض الميزات الرئيسية فقط. راجِع الروابط أدناه للاطّلاع على التغييرات الإضافية في الإصدار 117 من Chrome.
- الميزات الجديدة في "أدوات مطوري البرامج في Chrome" (117)
- عمليات إيقاف Chrome 117 نهائيًا وعمليات إزالته
- تحديثات ChromeStatus.com للإصدار 117 من Chrome
- قائمة تغييرات مستودع مصدر Chromium
- تقويم إصدارات Chrome
اشتراك
للاطّلاع على آخر الأخبار، اشترِك في قناة Chrome Developers على YouTube، وستتلقّى إشعارًا عبر البريد الإلكتروني عندما ننشر فيديو جديدًا.
مرحبًا أدريانا جارا، وفور إطلاق Chrome 117، سأكون هنا لإخبارك بالجديد في Chrome.