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

Rachel Andrew

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

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

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

يصل خط الأساس إلى "هل يمكنني استخدام"

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

لقطة شاشة لـ "هل يمكنني استخدام" مع الشارة "متاحة على نطاق واسع" في CSS Grid Layout.

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

لقطة شاشة لـ "هل يمكنني الاستخدام مع الشارة" الجديدة التي تظهر على Container Querys.

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

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

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

دعم المتصفح

  • Chrome: 105.
  • الحافة: 105.
  • Firefox: 110.
  • Safari: 16-

المصدر

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

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

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

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

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

دعم المتصفح

  • Chrome: 111.
  • الحافة: 111.
  • Firefox: 113.
  • Safari: 15-

المصدر

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

الدالة color-mix()

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

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

دعم المتصفح

  • Chrome: 111.
  • الحافة: 111.
  • Firefox: 113.
  • Safari: 15-

المصدر

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

مصادر الضغط

pression Streams API هي واجهة برمجة تطبيقات JavaScript لضغط مصادر البيانات وفك ضغطها. حملة التطبيقات باستخدام هذا الضغط المدمج، لم يعد هناك حاجة إلى تضمين مكتبة ضغط.

دعم المتصفح

  • Chrome: 80.
  • الحافة: 80.
  • Firefox: 113.
  • Safari: الإصدار 16.4.

المصدر

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

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

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

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

دعم المتصفح

  • Chrome: 69.
  • الحافة: 79.
  • Firefox: 105.
  • Safari: الإصدار 16.4.

المصدر

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

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

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

دعم المتصفح

  • الإصدار 66 من متصفّح Chrome
  • الحافة: 79 أو أقل
  • Firefox: 115.
  • Safari: 17.

المصدر

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

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

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

دعم المتصفح

  • Chrome: 111.
  • الحافة: 111.
  • Firefox: 108.
  • Safari: الإصدار 15.4.

المصدر

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

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

السمة inert

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

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

دعم المتصفح

  • Chrome: 102.
  • الحافة: 102.
  • Firefox: 112.
  • Safari: الإصدار 15.5

المصدر

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

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

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

دعم المتصفح

  • Chrome: 117.
  • الحافة: 117.
  • Firefox: 71.
  • Safari: 16-

المصدر

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

تنسيق الأرقام V3

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

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

دعم المتصفح

  • Chrome: 106.
  • الحافة: 106.
  • Firefox: 116.
  • Safari: الإصدار 15.4.

المصدر

اقتراح NumberFormat V3 تفاصيل كل ميزة من هذه الميزات الجديدة.

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

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

دعم المتصفح

  • Chrome: 71.
  • الحافة: 79.
  • Firefox: 64.
  • Safari: الإصدار 16.4.

المصدر

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

أداة اختيار :has() لصفحات الأنماط المتتالية (CSS)

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

دعم المتصفح

  • Chrome: 105.
  • الحافة: 105.
  • Firefox: 121.
  • Safari: الإصدار 15.4.

المصدر

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

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

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

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