الميزات الجديدة في الإصدار 131 من Chrome

Mariko Kosaka
X

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

اسمي "ماريكو كوساك". لنلقِ نظرة على الميزات الجديدة للمطوّرين في الإصدار 131 من Chrome.

تحسينات على التصميم في <details> و<summary>

يتوفّر لك الآن المزيد من الخيارات لتصميم بنية العنصرَين <details> و<summary> من أجل إنشاء تطبيقات مصغّرة لبيان الإفصاح أو التطبيق المتعدّد الأقسام.

تتيح التغييرات التي تم إدخالها في هذا الإصدار استخدام السمة display وإضافة عنصر زائف ::details-content لتصميم الجزء الذي يتم توسيعه وتصغيره.

في السابق، كان من المستحيل تغيير نوع عرض عنصر details. تمّ الآن تخفيف هذا التقييد، ما يتيح لك استخدام تنسيقات مثل الشبكة أو التنسيقات المرنة.

في هذا المثال الحصري للوحة المفاتيح الموسيقية، والمكوّنة من عدة عناصر details، عند توسيع أحد عناصر details، يتم وضع محتواه بجانب summary.

تطبيق مصغّر على شكل أكورديون بتنسيق Flex

ويتم ذلك باستخدام تنسيق مرن في العنصر details. يمكنك أيضًا تجربة المزيد من أنماط التنسيقات مع قيم عرض أخرى، مثل grid.

يمكنك الاطّلاع على مقالة Bramus مزيد من الخيارات لتنسيق المحتوى <details> للحصول على شرح أكثر تفصيلاً.

@page مربّعات الهامش

تمت إضافة ميزة دعم مربّعات هامش الصفحة عند طباعة مستند ويب أو تصديره كملف PDF.

تتيح لك مربّعات هوامش الصفحة تحديد المحتوى في منطقة الهامش في الصفحة. وبالتالي، يمكنك تقديم رؤوس وتذييلات مخصّصة بدلاً من استخدام الرؤوس والتذييلات المضمّنة التي ينشئها المتصفّح.

يتم تحديد هامش الصفحة باستخدام قاعدة @page في CSS.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

يتم تحديد مظهر مربّع الهامش ومحتوياته باستخدام سمات CSS داخل قواعد at-rules التي تمثّل مربّعات الهامش الستة عشر باستخدام المحتوى الذي تم إنشاؤه.

بالنسبة إلى ترقيم الصفحات، يمكن أيضًا استخدام العدادات مع page لرقم الصفحة الحالي وpages لعدد الصفحات الإجمالي.

اطّلِع على مقالة "راشيل" إضافة محتوى إلى هوامش صفحات الويب عند الطباعة باستخدام CSS للحصول على شرح أكثر تفصيلاً.

وغير ذلك

وهناك بالطبع الكثير من الميزات الأخرى.

  • إتاحة استخدام موارد SVG الخارجية لعناصر "clip-path" و"fill" و"stroke" و"marker"
  • يتم تفعيل WebHID داخل سياقات عمال مخصّصة.
  • يمكنك التحكّم في سلوك الرموز التعبيرية باستخدام خاصية font-variant-emoji في CSS.

مراجع إضافية

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

اشتراك

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

اسمي "ماريكو كوساك"، وسنكون هنا لإطلاعك على ميزات الإصدار 132 من Chrome فور إصداره.