في ما يلي ما تحتاج إلى معرفته:
- لم يتبق سوى أسابيع قليلة على طرح الإصدار 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 المتسلسلة وقاعدة 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>
الأخرى التي تتضمّن أدوات اختيار.

لاستخدامها، استخدِم 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.