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

يمكنك الآن الانتقال إلى caniuse.com. في هذه المشاركة، يمكنك التعرّف على عملية الدمج والتعرّف أيضًا على بعض الميزات التي أصبحت جزءًا من Baseline في 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 API عن طريق نقله خارج الشاشة.

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

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

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

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

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

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

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

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

سمة inert

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

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

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

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

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

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

الإصدار 3 من NumberFormat

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

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

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

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

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

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

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

لقد جعلنا أداة الاختيار الأساسية لعام 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> (سيتم التحديث في إصدار 121 من Firefox في 19 كانون الأول (ديسمبر))
• وحدتا ارتفاع الأسطر lh وrlh CSS

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