تعرَّف على بعض الميزات المثيرة للاهتمام التي تم طرحها في الإصدارات الثابتة والتجريبية من متصفّحات الويب خلال آب (أغسطس) 2022.
إصدارات المتصفّحات الثابتة
في آب (أغسطس)، أصبح Firefox 104 وChrome 104 وChrome 105 إصدارات ثابتة.
عمليات التحويل الفردية
يتضمّن الإصدار 104 من Chrome خصائص فردية لعمليات التحويل في CSS. السمات هي scale
وrotate
وtranslate
، ويمكنك استخدامها لتحديد هذه الأجزاء من عملية التحويل بشكلٍ فردي.
وبهذا الإجراء، ينضم Chrome إلى Firefox وSafari اللذَين يتيحان هذه السمات حاليًا.
بنية طلب البحث الجديدة للوسائط
يتضمّن الإصدار 104 من Chrome أيضًا بنية نطاق طلب البحث عن الوسائط. سبق أن طرح 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. تُنشئ واجهة برمجة التطبيقات هذه عملية تطهير في النظام الأساسي للمساعدة في إزالة الثغرات الأمنية في هجمات "إدخال النصوص البرمجية على المواقع الإلكترونية".
يتوفّر أيضًا في الإصدار 105 من Chrome فئة CSS الزائفة :modal. يتطابق هذا مع عنصر في حالة يستبعد فيها جميع التفاعلات مع العناصر خارجها. على سبيل المثال، <dialog>
تم فتحه باستخدام واجهة برمجة التطبيقات showModal()
.
الطريقتان findLast() وfindLastIndex()
يضيف Firefox 104 إمكانية استخدام العلامة مع الطريقتَين Array.prototype.findLast() و Array.prototype.findLastIndex() و TypedArray.prototype.findLast() وTypedArray.prototype.findLastIndex(). وتُستخدَم هذه الطرق للعثور على قيمة العنصر الأخير في Array أو TypedArray (بالترتيب) الذي يتطابق مع دالة اختبار مقدَّمة.
إصدارات المتصفّح التجريبية
تمنحك إصدارات المتصفّح التجريبية معاينة للميزات التي ستتوفر في الإصدار الثابت التالي من المتصفّح. هذا هو الوقت المناسب لاختبار الميزات الجديدة أو عمليات الإزالة التي قد تؤثر في موقعك الإلكتروني قبل أن يحصل العالم على هذا الإصدار.
بسبب تأخّر تواريخ الإصدار خارج الشهر، كان الإصدار التجريبي الجديد الوحيد في آب (أغسطس) هو Firefox 105، الذي لا يتضمّن حاليًا الكثير من التفاصيل.
لا يزال الإصدار التجريبي من Safari 16 الذي ذكرناه في حزيران (يونيو) قيد التطوير.
جزء من سلسلة الميزات الجديدة على الويب