الجديد في 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 */
}

يمكنك الاطّلاع على مقالة Una بعنوان @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) على الويب نهائيًا في السياقات غير الآمنة.

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

وغير ذلك

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

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

مراجع إضافية

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

اشتراك

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

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