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