الأحداث الأساسية لعام 2023

يمكنك الآن الانتقال إلى caniuse.com. في هذه المشاركة، يمكنك التعرّف على عملية الدمج والتعرّف على بعض الميزات التي أصبحت جزءًا من خط الأساس في عام 2023.

من خلال التعريف الجديد لميزة "الخطة الأساسية"، هناك مرحلتان في مراحل نشاط الميزة: عندما تصبح متاحة حديثًا، ثم عندما تصبح متاحة على نطاق واسع بعد 30 شهرًا. تصبح الميزة جزءًا من الخطة الأساسية المتوفرة حديثًا عندما تصبح قابلة للتشغيل التفاعلي في المتصفحات التالية:

• Safari (لنظام التشغيل macOS وiOS)
• Firefox (على أجهزة الكمبيوتر المكتبي وAndroid)
• Chrome (جهاز سطح المكتب ونظام Android)
• Edge (الكمبيوتر المكتبي)

الوصول إلى الموقع الإلكتروني "هل يمكنني استخدام"

كخطوة تالية في توضيح مدى توفّر الميزة، بدأت Baseline في الانتقال إلى "هل يمكنني استخدام" بدءًا من اليوم. عند زيارة بعض الصفحات في القسم "هل يمكنني استخدام"، ستظهر لك شارة تخبرك بما إذا كانت الميزة متاحة في الأساس على نطاق واسع.

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

في بقية هذه المشاركة، يمكنك التعرّف على الميزات التي حقّقت هذا الإنجاز خلال عام 2023. كل هذه الميزات هي مرجع 2023 المتوفّر حديثًا.

طلبات بحث حاوية الحجم ووحدات طلبات البحث في الحاوية

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

يتغير تصميم البطاقة التالية بناءً على عرض المكون. اطّلِع على مزيد من المعلومات في ظهور طلبات بحث الحاوية في المتصفّحات الثابتة.

مساحات ألوان ودوال جديدة

توفر خدمة CSS الآن مساحات الألوان التي تتيح لك الوصول إلى الألوان خارج السلسلة sRGB. وهذا يعني أنه يمكنك دعم الشاشات عالية الدقة (HD) باستخدام ألوان من تدرّجات الدقة العالية.

نماذج الألوان الجديدة

في Baseline، أصبحت دوال الألوان lch() وlab() وoklch() وoklab() تتيح الوصول إلى نماذج الألوان LCH و Lab وOKLCH وOKLab.

الدالة color-mix()

بالإضافة إلى ذلك، أصبحت دوال الألوان الجديدة جزءًا من Baseline. تتيح الدالة color-mix() مزج لون في آخر، في أي من مساحات الألوان. في لغة CSS التالية، يتم مزج 25% من اللون الأزرق إلى اللون الأبيض، في مساحة لون srgb.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

مزيد من المعلومات حول color-mix()

الدالة color()

يمكن استخدام الدالة color() لأي مساحة لون تحدد الألوان مع قنوات R وG وB. تأخذ color() معلَمة مساحة اللون أولاً، ثم سلسلة من قيم القنوات لنموذج أحمر أخضر أزرق (RGB) وبعض قيم ألفا اختياريًا. يمكنك استخدام أي مما يلي: srgb وsrgb-linear وdisplay-p3 وa98-rgb وprophoto-rgb وrec2020 وxyz xyz-d50 وxyz-d65. مثال:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

يمنحك دليل الألوان عالي الدقة في CSS العديد من الأمثلة الإضافية لمساحات اللون والدوال الجديدة، إلى جانب معلومات حول الوقت الذي يجب استخدامه فيه.

ساحات مشاركات الضغط

واجهة برمجة تطبيقات عمليات ضغط البيانات هي واجهة برمجة تطبيقات بلغة JavaScript تُستخدَم لضغط ساحات البيانات وفك ضغطها. فالتطبيقات التي تستخدم هذا الضغط المضمّن لم تعد بحاجة إلى تضمين مكتبة ضغط.

اطّلِع على مزيد من المعلومات في مقالة تتوفر الآن ساحات مشاركات الضغط في جميع المتصفحات.

لوحة الرسم خارج الشاشة

قبل استخدام OffscreenCanvas، كانت إمكانات رسم اللوحة مرتبطة بالعنصر <canvas>، أي أنه كان يعتمد بشكل مباشر على DOM. يقوم OffscreenCanvas بفصل نموذج العناصر في المستند (DOM) عن واجهة برمجة تطبيقات Canvas عن طريق نقل اللوحة خارج الشاشة.

وبفضل هذا الفصل، يتم فصل عرض OffscreenCanvas تمامًا عن نموذج العناصر في المستند (DOM)، لذا فهو يقدم بعض التحسينات في السرعة مقارنةً بلوحة الرسم العادية بسبب عدم وجود مزامنة بينهما. يمكن استخدامها أيضًا لنقل محتوى العرض إلى Web Worker، على الرغم من عدم توفّر نموذج DOM، ما يؤدي إلى تحرير سلسلة التعليمات الرئيسية وجعل التطبيق أكثر استجابة.

مزيد من المعلومات في OffscreenCanvas: تسريع عمليات اللوحات باستخدام عامل على الويب

التحميل المُسبق للوحدة

يمكن أن تساعد وحدات التحميل المُسبق في تقليل وقت التنزيل والمعالجة. أضِف rel="modulepreload" إلى عنصر الرابط الذي يشير إلى وحدة JavaScript، وسيحصل المتصفّح على الوحدة ويحلّلها ويجمعها ويضع النتائج في خريطة الوحدة جاهزة للتنفيذ.

يمكنك الاطّلاع على المزيد من المعلومات في مقالة التحميل المُسبق للوحدات.

الدوال المثلثية في CSS

في عام 2023، أصبحت الدوال المثلّثية من قيم CSS ومواصفات المستوى 4 قابلة للتشغيل التفاعلي. ويعني ذلك أنّ الدوال sin() وcos() وtan() وasin() وacos() وatan() وatan2() جزء من Baseline 2023.

يمكنك التعرّف على كيفية استخدام هذه الدوال واكتشاف بعض حالات الاستخدام في الدوال المثلثية في CSS.

سمة inert

عندما تضع علامة inert على عنصر DOM، تتم إزالة الحركة أو التفاعل منه. تؤدي السمة inert إلى تجاهل المتصفّح للعنصر:

• لا يتم تنشيط الحدث click إذا نقر المستخدم على العنصر.
• لن يتمّ التركيز على العنصر.
• يتم استبعاد العنصر ومحتواه من شجرة تسهيل الاستخدام.

أضف هذه السمة إلى العناصر الموجودة خارج الشاشة أو العناصر المخفية. لمزيد من المعلومات، راجِع سمة inert.

الشبكة الفرعية في تنسيق شبكة CSS

تتيح لك القيمة subgrid لـ grid-template-columns وgrid-template-rows استخدام المسارات المحددة في شبكة رئيسية، على الشبكات المتداخلة. هذا يعني أنه يمكنك محاذاة العناصر في شبكات متداخلة منفصلة مع بعضها البعض.

في الشبكة الفرعية لـ CSS، ستجد بعض الأمثلة والروابط إلى العديد من المشاركات والأمثلة الأخرى التي تسلط الضوء على حالات استخدام الشبكة الفرعية.

الإصدار 3 من NumberFormat

Intl.NumberFormat V3 هو مجموعة من الميزات الجديدة لـ Intl.NumberFormat التي أصبحت جزءًا من Baseline خلال عام 2023. الميزات الإضافية هي:

• ثلاث دوال جديدة لتنسيق نطاقات الأرقام: formatRange وformatRangeToParts وselectRange
• تعداد التجميع
• خيارات جديدة للتقريب والدقة
• أولوية التقريب
• تفسير السلاسل على شكل أرقام عشرية
• أوضاع التقريب
• وضع علامة على العرض السالب

يوضِّح اقتراح NumberFormat V3 كلاً من هذه الميزات الجديدة.

واجهة برمجة التطبيقات بملء الشاشة

تتيح لك واجهة برمجة التطبيقات بملء الشاشة وضع عنصر مثل <video> في وضع ملء الشاشة من خلال استدعاء طريقة requestFullscreen(). كما أنه يوفر طرقًا لاكتشاف ما إذا كان العنصر في وضع ملء الشاشة، وما إذا كان المستند في حالة تسمح لك بطلب وضع ملء الشاشة.

تعرَّف على مزيد من المعلومات في دليل واجهة برمجة التطبيقات بملء الشاشة على MDN.

أداة اختيار لغة :has() في CSS

لقد جعلنا أداة الاختيار الأساسية لعام 2023 هي أداة الاختيار :has() التي ستظهر في Firefox 121 في 19 كانون الأول (ديسمبر). وتعمل أداة الاختيار هذه، إلى جانب استخدامات أخرى، كأداة اختيار رئيسية، ما يتيح لك اختيار عنصر استنادًا إلى العناصر الموجودة بداخله. على سبيل المثال، يمكنك تطبيق CSS مختلفة اعتمادًا على ما إذا كانت هناك صورة داخل العنصر أم لا.

يمكنك معرفة المزيد من المعلومات في :has(): أداة اختيار العائلة.

ميزات إضافية انضمت إلى Baseline هذا العام

تشمل الميزات الأخرى التي أصبحت جزءًا من الخطة الأساسية هذا العام ما يلي:

• أوراق أنماط قابلة للإنشاء
• أدوات اختيار عنصر nth-child المعقدة في CSS
• بنية النطاق للاستعلامات عن الوسائط
• استيراد "خرائط Google"
• قيم متعدّدة لعرض CSS
• @counter-style
• سمة counter-set في CSS
• دالة التخفيف linear()
• نظام الملفات الخاصة الأصلي (OPFS)
• دمج CSS، بما في ذلك التغيير الذي يضيف تحليلاً مريحًا.
• أداة اختيار الفئة الزائفة في CSS :dir()
• وحدة طول CSS cap
• إخفاء محتوى CSS
• إتاحة طلبات البحث عن الوسائط لعناصر فيديو HTML <source>
• عنصر HTML <search>
• التحميل الكسول لعناصر <iframe> (سيتم الانتقال إلى Firefox 121 في 19 كانون الأول (ديسمبر))
• وحدتا ارتفاع الأسطر lh وrlh CSS

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