الجديد في Chrome 99

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

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

الإصدار 100 من Chrome والإصدار 100 من Firefox

سيتم طرح الإصدار 100 من Chrome في أواخر شهر آذار (مارس) 2022، وسيتم طرح الإصدار 100 من Firefox بعد ذلك بوقت قصير في أوائل شهر أيار (مايو). يمثّل كلا الإصدارَين علامة فارقة في رقم الإصدار الرئيسي، وسيتم تبديل الرقم إلى ثلاثة أرقام. ولكن إذا كان الرمز يتوقع رقمَين، قد يتسبب الإصدار الجديد في حدوث مشاكل.

يجب التحقّق من أي رمز يفحص أرقام الإصدارات أو يفكّك سلسلة وكيل المستخدم للتأكّد من أنّه لن يواجه أي مشاكل.

صفحة علامات Chrome التي تُبرز الخيار الجديد #force-major-version-to-100

في Chrome، ستؤدي العلامة #force-major-version-to-100 إلى تغيير الرقم الحالي للإصدار إلى 100.

في قائمة الإعدادات في Firefox Nightly، يمكنك تفعيل خيار "سلسلة وكيل المستخدم في Firefox 100". ننصحك باختبار موقعك الإلكتروني للتأكّد من أنّ كل شيء يعمل على النحو المتوقّع.

اطّلِع على المقالة إصدار Chrome وFirefox الرئيسيان 100 قريبًا للاطّلاع على التفاصيل الكاملة.

طبقات CSS المتسلسلة

سيتوفّر دعم لطبقات CSS المتسلسلة وقاعدة CSS @layer في Chrome 99. وتوفّر هذه العناصر إمكانية التحكّم بشكل أوضح في ملفات CSS لمنع النزاعات المتعلّقة بتحديد الأنماط. ويُعدّ هذا مفيدًا بشكل خاص لقواعد البيانات الكبيرة، وأنظمة التصميم، وعند إدارة الأنماط التابعة لجهات خارجية في التطبيقات.

وهي تضيف طبقة جديدة إلى تسلسل CSS. في الأنماط المتعدّدة الطبقات، تحظى الأولوية للطبقة دائمًا بأهمية أكبر من تحديد أداة الاختيار.

صورة توضيحية من العرض التجريبي للمشروع لفصل واجهة المستخدم

إذا كنت تحاول تنسيق رابط داخل .card ضمن .post، ستلاحظ أنّه سيتم تطبيق أداة الاختيار الأكثر تحديدًا. باستخدام قاعدة @layer ، يمكنك أن تكون أكثر وضوحًا بشأن خصوصية النمط لكل رابط، والتأكّد من أنّ نمط الرابط في بطاقتك يحلّ محل نمط الرابط في مشاركتك.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

ويعود سبب ذلك إلى الأولوية التسلسلية. تُنشئ الأنماط المتعدّدة الطبقات مستويات جديدة متسلسلة.

تتوفّر طبقات التسلسل باستخدام قاعدة CSS @layer في الإصدار 99 من Chrome والإصدار 97 من Firefox والإصدار التجريبي 15.4 من Safari. اطّلِع على مقالة توفّر طبقات التسلسل في المتصفّح للحصول على المزيد من المعلومات.

دالة showPicker() لعناصر الإدخال

لفترة طويلة، كان علينا اللجوء إلى مكتبات التطبيقات المصغّرة المخصّصة أو إلى أساليب غير رسمية ل عرض أداة اختيار التاريخ. هناك طريقة showPicker() جديدة في InputElements HTML. وهي الطريقة الأساسية لعرض أداة اختيار في المتصفّح، ليس فقط لعنصر date، ولكن أيضًا لعناصر time وcolor و<input> الأخرى التي تتضمّن أدوات اختيار.

لقطات شاشة لأدوات اختيار المتصفّحات
أداة اختيار التاريخ في المتصفّح على أجهزة الكمبيوتر المكتبي التي تعمل بنظام التشغيل Chrome وChrome للأجهزة الجوّالة وSafari للأجهزة المكتبية وSafari للأجهزة الجوّالة وFirefox للأجهزة المكتبية (يوليو 2021)

لاستخدامها، استخدِم showPicker() في العنصر <input>. في هذا المثال، لقد لفّت العنصر في قالب try…catch. يتيح لي ذلك توفير عنصر احتياطي، إذا كان المتصفّح لا يتيح استخدام واجهة برمجة التطبيقات أو لا يمكنه عرض أداة الاختيار. وبالتالي، يضمن ذلك حصول المستخدمين على تجربة جيدة.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

اطّلِع على مقالة عرض أداة اختيار متصفّح للتاريخ والوقت واللون والملفات للحصول على التفاصيل الكاملة وجميع أنواع <input> المختلفة التي يمكنك استخدامها showPicker().

وغير ذلك

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

تم تعديل واجهة برمجة التطبيقات Canvas2D API، مع إضافة وظائف جديدة، بما في ذلك:

  • حدثان جديدان في ContextLost وContextRestored
  • خيار willReadFrequently
  • مزيد من التعديلات على نص CSS
  • والمزيد.

تتوفّر تجربة استخدام جديدة للسماح لتطبيقات الويب التقدّمية بتوفير ألوان بديلة في بيان تطبيق الويب للوضع الداكن.

وقد تمّ الآن طرح واجهة برمجة التطبيقات للتعرّف على الكتابة بخط اليد.

مراجع إضافية

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

اشتراك

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

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