الجديد في 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 بكسل، يتم تحويلها إلى التخطيط أحادي العمود.

الفئة الزائفة ":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

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

وهناك مكتبات مثل 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);

يُرجى الاطّلاع على مقالة معالجة نموذج العناصر الآمنة (Safe DOM) باستخدام واجهة برمجة التطبيقات Sanitizer API. لمزيد من التفاصيل.

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

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

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

وغير ذلك

بالطبع هناك الكثير.

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

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

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

اشتراك

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

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