الجديد في Chrome 105

Pete LePage

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

اسمي بيت ليب. لنتعمق في الأمر ونتعرّف على الميزات الجديدة للمطورين في Chrome 105.

طلبات بحث الحاوية وسمة :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 بكسل، يتم التبديل إلى تنسيق عمود واحد.

الفئة الزائفة في لغة CSS :has()

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

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

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

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

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

واجهة برمجة التطبيقات المطروحة

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

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

لاستخدامه، عليك إنشاء مثيل جديد من "المطهر". بعد ذلك، اتصل بـ 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) المثبَّت على كلٍّ من أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة من خلال تعديل بيان تطبيق الويب.
  • تحصل واجهة برمجة التطبيقات لمواضع النوافذ المتعددة الشاشات على تصنيفات دقيقة لأسماء الشاشة.
  • أصبحت واجهة برمجة التطبيقات Window Controls Overlay API متاحة الآن. يتيح ذلك لتطبيقات الويب التقدّمية (PWA) توفير مظهر أشبه بالتطبيق من خلال استبدال شريط العناوين الحالي ذي العرض الكامل بعنصر صغير. يتيح لك هذا الإجراء وضع محتوى مخصص في منطقة شريط العناوين.

محتوى إضافي للقراءة

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

اشتراك

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

اسمي بيت ليب، وبعد إطلاق Chrome 106، سنكون هنا لإخبارك بالجديد في Chrome!