الجديد في Chrome 99

Pete LePage

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

• لم يتبق سوى أسابيع قليلة على طرح الإصدار 100 من Chrome وFirefox.
• تمنحك طبقات CSS المتسلسلة مزيدًا من التحكّم في CSS، وhelps to prevent style-specificity conflicts.
• تتيح لك الطريقة showPicker() عرض أداة اختيار متصفّح لعناصر <input> مثل date وcolor و datalist آليًا.
• وهناك الكثير من الميزات الأخرى.

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

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

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

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

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

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

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

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

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

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

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

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

  .link {
    color: blue;
  }
}

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

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

show Picker() لعناصر الإدخال

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

لاستخدامها، يمكنك استدعاء 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.

• الميزات الجديدة في الإصدار 99 من "أدوات مطوّري البرامج في Chrome"
• الميزات التي سيتم إيقافها نهائيًا أو إزالتها في الإصدار 99 من Chrome
• تعديلات ChromeStatus.com بشأن الإصدار 99 من Chrome
• قائمة التغييرات في مستودع مصدر Chromium
• تقويم إصدارات Chrome

اشتراك

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

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