الجديد في Chrome 99

Pete LePage

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

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

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

Chrome 100 وFirefox 100

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

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

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

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

وفي قائمة "إعدادات" Firefox Nightly، يمكنك تفعيل خيار "Firefox 100 User-Agent String (سلسلة وكيل المستخدم في 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. اطّلع على طبقات Cacade التي تصل إلى متصفحك للحصول على مزيد من المعلومات.

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

اضطررنا لفترة طويلة إلى اللجوء إلى مكتبات الأدوات المخصصة أو الاختراقات لعرض أداة اختيار التاريخ. تتوفّر طريقة showPicker() جديدة على HTML InputElements. إنّها الطريقة الأساسية لعرض أداة اختيار المتصفِّح، ليس فقط لعناصر 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 وإضافة وظائف جديدة، من بينها:

  • حدثان جديدان لـ ContextLost وContextRestored
  • خيار willReadFrequently
  • إتاحة المزيد من أدوات تعديل نصوص CSS
  • والمزيد.

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

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

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

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

اشتراك

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

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