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

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

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

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

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

لقطة شاشة لميزة "هل يمكنني استخدام هذا؟" مع الشارة المتوفّرة على نطاق واسع في تخطيط الشبكة في CSS

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

لقطة شاشة لميزة "هل يمكنني استخدام" مع الشارة المتوفّرة حديثًا في طلبات البحث عن الحِزم

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

طلبات البحث عن حاويات الحجم ووحدات طلبات البحث عن الحاويات

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

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

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

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

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

طُرز الألوان الجديدة

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

لقطة شاشة لمحرِّر gradient.style مع تدرج حيوي من الوردي إلى الأزرق
جرِّب مساحات الألوان الجديدة باستخدام gradient.style.

دالة color-mix()

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

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

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Source

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

مصادر البيانات المضغوطة

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

Browser Support

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Source

اطّلِع على مزيد من المعلومات في مقالة إتاحة أحداث البث المُضغَّطة في جميع المتصفّحات.

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

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

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

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 105.
  • Safari: 16.4.

Source

اطّلِع على مزيد من المعلومات في مقالة OffscreenCanvas: تسريع عمليات لوحة الرسم باستخدام Web Worker.

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

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

Browser Support

  • Chrome: 66.
  • Edge: ≤79.
  • Firefox: 115.
  • Safari: 17.

Source

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

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

في عام 2023، أصبحت الدوالّ المثلثية من مواصفات CSS Values and Units Level 4 متوافقة مع بعضها. وهذا يعني أنّ الدوالّ sin() وcos() tan() وasin() وacos() وatan() وatan2() هي جزء من "القاعدة الأساسية لعام 2023".

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

يستخدم هذا العرض التوضيحي الدوال المثلثية لنقل العناصر على مسار دائري حول نقطة مركزية.

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

سمة inert

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

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

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

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

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

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

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

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

NumberFormat V3

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

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

Browser Support

  • Chrome: 106.
  • Edge: 106.
  • Firefox: 116.
  • Safari: 15.4.

Source

يوضّح الاقتراح لتنسيق العدد في الإصدار 3 تفاصيل كلّ من هذه الميزات الجديدة.

واجهة برمجة التطبيقات Fullscreen API

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

Browser Support

  • Chrome: 71.
  • Edge: 79.
  • Firefox: 64.
  • Safari: 16.4.

Source

اطّلِع على مزيد من المعلومات في دليل Fullscreen API على MDN.

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

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

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

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

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

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

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