تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

جديد على النظام الأساسي للويب في آب (أغسطس)

تعرَّف على بعض الميزات المثيرة للاهتمام التي تم طرحها في الإصدارات الثابتة والتجريبية من متصفّحات الويب خلال آب (أغسطس) 2022.

Rachel Andrew

إصدارات المتصفّحات الثابتة

في آب (أغسطس)، أصبح Firefox 104 وChrome 104 وChrome 105 إصدارات ثابتة.

التحويلات الفردية

يتضمّن الإصدار 104 من Chrome خصائص فردية لعمليات التحويل في CSS. السمات هي scale وrotate وtranslate، ويمكنك استخدامها لتحديد هذه الأجزاء من عملية التحويل بشكلٍ فردي.

وبهذا الإجراء، ينضم Chrome إلى Firefox وSafari اللذَين يتيحان هذه السمات حاليًا.

توافق المتصفّح

المصدر

بنية جديدة للاستعلام عن الوسائط

يتضمّن Chrome 104 أيضًا بنية نطاق الاستعلام عن الوسائط. تم شحن هذا النموذج بالفعل من خلال Firefox، وهو يساعد في تبسيط الاستعلامات عن الوسائط. على سبيل المثال، طلب البحث عن الوسائط التالي:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

يمكن كتابتها باستخدام عامل تشغيل المقارنة:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

دعم المتصفح

المصدر

طلبات البحث عن الحاويات

يُعدّ الإصدار 105 من Chrome إصدارًا مثيرًا للاهتمام يقدّم ميزة طلبات بحث الحاويات التي طال انتظارها إلى النظام الأساسي للويب. في حين أنّ طلبات البحث عن الوسائط تمنحك طريقة لطلب البحث حسب حجم إطار العرض، توفّر طلبات البحث عن الحاوية طريقة لطلب البحث حسب حجم الحاوية.

توافق المتصفّح

المصدر

لاستخدام طلبات بحث الحاوية، فعِّل ميزة الحاوية باستخدام السمة container-type.

.card-container {
  container-type: inline-size;
}

يؤدي ضبط container-type على inline-size إلى طلب حجم الاتجاه المضمّن للعنصر الرئيسي. في اللغات اللاتينية مثل الإنجليزية، سيكون هذا هو عرض البطاقة، لأنّ النص يتدفق مضمّنًا من اليسار إلى اليمين.

الآن، يمكننا استخدام هذه الحاوية لتطبيق الأنماط على أيّ من عناصرها الفرعية باستخدام @container:

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

يمكنك الاطّلاع على مزيد من المعلومات عن طلبات البحث عن الحاوية في المشاركة @container و :has(): واجهتَا برمجة تطبيقات جديدتَان ومفعّلتَان للاستجابة السريعة في الإصدار 105 من Chromium.

الفئة الصورية الرئيسية :has()

تتم أيضًا ذِكر :has() في المشاركة المذكورة أعلاه. تمنحك هذه الفئة الصورية الجديدة :has() في CSS طريقة لاستهداف العنصر الرئيسي والأشقاء استنادًا إلى الشروط. اطّلِع على مزيد من المعلومات في مقالة دالة ‎:has()‏ (أداة اختيار العائلة).

دعم المتصفح

المصدر

Sanitizer API

تتوفّر أيضًا واجهة برمجة التطبيقات Sanitizer API في الإصدار 105 من Chrome. تُنشئ واجهة برمجة التطبيقات هذه عملية تطهير في النظام الأساسي للمساعدة في إزالة الثغرات الأمنية في هجمات استغلال أخطاء برمجة المواقع الإلكترونية.

وفي Chrome 105 أيضًا، توجد الفئة :modal في CSS الزائفة. يتطابق هذا مع عنصر في حالة يستبعد فيها جميع التفاعلات مع العناصر خارجها. على سبيل المثال، تم فتح <dialog> باستخدام showModal() API.

توافق المتصفّح

المصدر

طريقتا findLast() وfindLastIndex()

يضيف Firefox 104 علامة تتيح استخدام الطريقتَين Array.prototype.findLast()‎ و Array.prototype.findLastIndex()‎ و TypedArray.prototype.findLast()‎ وTypedArray.prototype.findLastIndex()‎. وتُستخدَم هاتان الطريقتان للعثور على قيمة العنصر الأخير في Array أو TypedArray (بالترتيب) الذي يتطابق مع دالة اختبار مقدَّمة.

توافق المتصفّح

المصدر

إصدارات المتصفّح التجريبية

تمنحك إصدارات المتصفّح التجريبية معاينة للميزات التي ستتوفر في الإصدار الثابت التالي من المتصفّح. هذا هو الوقت المناسب لاختبار الميزات الجديدة أو عمليات الإزالة التي قد تؤثر في موقعك الإلكتروني قبل أن يحصل العالم على هذا الإصدار.

بسبب تأخّر تواريخ الإصدار خارج الشهر، كان الإصدار التجريبي الجديد الوحيد في آب (أغسطس) هو Firefox 105، الذي لا يتضمّن حاليًا الكثير من التفاصيل.

لا يزال الإصدار التجريبي من Safari 16 الذي ذكرناه في حزيران (يونيو) قيد التطوير.

جزء من سلسلة الفيديوهات الجديدة على الويب