الجديد في Chrome 105

Pete LePage

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

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

طلبات البحث عن الحاويات وسمة :has() في CSS

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

وهي تشبه طلبات البحث التي تبدأ بـ @media، باستثناء أنّها يتم تقييمها استنادًا إلى حجم الحاوية بدلاً من حجم إطار العرض.

طلب الاستعلام عن الحاوية في مقابل طلب الاستعلام عن الوسائط

لاستخدام طلبات البحث عن الحاوية، عليك ضبط العنصر الرئيسي على "الحاوية". على سبيل المثال، قد يكون لديك بطاقة تتضمّن صورة وبعض النصوص.

بطاقة واحدة من عمودَين

لإنشاء طلب بحث حاوية، اضبط container-type على حاوية البطاقة. يؤدي ضبط container-type على inline-size إلى طلب inline-direction حجم العنصر الرئيسي.

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

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

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

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

في هذه الحالة، عندما يكون حجم الحاوية أقل من 400 بكسل، يتم التبديل إلى تخطيط عمود واحد.

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

يمكننا تحسين هذه العملية باستخدام الفئة الزائفة :has() في CSS. ويسمح لك بالتحقّق مما إذا كان العنصر الرئيسي يحتوي على عناصر فرعية تتضمّن مَعلمات محدّدة.

على سبيل المثال، يشير الرمز p:has(span) إلى أداة اختيار فقرة تتضمّن نطاقًا داخل ها. يمكنك استخدام هذا الأسلوب لتصميم الفقرة الرئيسية نفسها أو أي عنصر ضمنها. أو يمكنك استخدام figure:has(figcaption) لتنسيق عنصر شكل يحتوي على عنوان توضيحي.

p:has(span) {
  /* magic styles */
}

figure:has(figcaption) {
  /* this figure has a figcaption */
}

يمكنك الاطّلاع على مقالة "أونا" بعنوان @container و :has(): واجهتَا برمجة تطبيقات جديدتَان ومفيدتَان للتصميمات المتجاوبة للحصول على شرح أكثر تفصيلاً وبعض العروض التوضيحية الممتعة.

Sanitizer API

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

هناك مكتبات، مثل DomPurify، تساعد في ذلك، ولكنّها تضيف عبئًا صغيرًا للصيانة. تساعد واجهة برمجة التطبيقات HTML Sanitizer API في تقليل عدد الثغرات الأمنية في النصوص البرمجية على مستوى الموقع من خلال دمج ميزة التطهير في النظام الأساسي.

لاستخدامه، أنشئ مثيلًا جديدًا من Sanitizer. بعد ذلك، استخدِم setHTML() في العنصر الذي تريد إدراج المحتوى المنظَّف فيه.

const mySanitizer = new Sanitizer();
const user_input = `<img src="" onerror=alert(0)>`;
elem.setHTML(user_input, { sanitizer: mySanitizer });

تم تصميم واجهة برمجة التطبيقات Sanitizer API لتكون آمنة تلقائيًا وقابلة للتخصيص، مما يتيح لك تحديد خيارات ضبط مختلفة، مثل حذف عناصر معيّنة أو السماح بعناصر أخرى.

const config = {
  allowElements: [],
  blockElements: [],
  dropElements: [],
  allowAttributes: {},
  dropAttributes: {},
  allowCustomElements: true,
  allowComments: true
};
// sanitized result is customized by configuration
const mySanitizer = new Sanitizer(config);

اطّلِع على التلاعب الآمن بـ DOM باستخدام Sanitizer API لمزيد من التفاصيل.

إيقاف لغة الاستعلامات البنيوية (SQL) على الويب نهائيًا في السياقات غير الآمنة

أعلنّا منذ بعض الوقت عن خططنا لإيقاف لغة الاستعلامات البنيوية (SQL) على الويب نهائيًا. اعتبارًا من Chrome 105، سيتم إيقاف لغة الاستعلامات البنيوية (SQL) على الويب نهائيًا في السياقات غير الآمنة.

إذا كنت تستخدم Web SQL في سياقات غير آمنة، عليك نقل البيانات إلى IndexDB أو حاوية تخزين محلية أخرى في أقرب وقت ممكن.

وغير ذلك

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

  • يمكنك الآن تعديل اسم تطبيق ويب تقدّمي مثبّت على كلّ من أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة من خلال تعديل بيان تطبيق الويب.
  • تحصل واجهة برمجة التطبيقات لموضع النافذة على شاشات متعددة على تصنيفات دقيقة لأسماء الشاشات.
  • أصبحت واجهة برمجة التطبيقات الخاصة بعناصر التحكّم في النوافذ التراكبية متاحة الآن. ويتيح ذلك لتطبيقات الويب المتقدّمة توفير شعورٍ أقرب إلى التطبيقات من خلال استبدال شريط العنوان الحالي بالعرض الكامل بأحد شريط التداخل الصغير. يتيح لك ذلك وضع محتوى مخصّص في منطقة شريط العنوان.

مراجع إضافية

لا يتناول هذا التقرير سوى بعض أهم التفاصيل. يمكنك الاطّلاع على الروابط أدناه للاطّلاع على التغييرات الإضافية في الإصدار 105 من Chrome.

اشتراك

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

اسمي "بيت ليبيه"، وسنطلعك على الميزات الجديدة في Chrome فور طرح الإصدار 106.