سيتمّ الانتقال إلى caniuse.com للاطّلاع على خط الأساس. في هذه المشاركة، تعرف على حول الدمج واكتشاف بعض الميزات التي أصبحت جزءًا من المتوقع في 2023
من خلال التعريف الجديد لـ Baseline، مرحلتان في دورة حياة الميزة: عندما يصبح متاحًا حديثًا، ثم عندما يصبح متاحًا على نطاق واسع بعد 30 شهرًا. تصبح الميزة جزءًا من "مجموعة الأساس" الجديدة التي أصبحت قابلة للتشغيل التفاعلي في ما يلي: المتصفحات:
- Safari (على أجهزة macOS وiOS)
- Firefox (للكمبيوتر المكتبي وAndroid)
- Chrome (سطح المكتب وAndroid)
- Edge (سطح المكتب)
يصل خط الأساس إلى "هل يمكنني استخدام"
كخطوة تالية لتوضيح مدى توفُّر الميزات، يبدأ Baseline في إلى "هل يمكنني استخدام" من اليوم. عند زيارة بعض الصفحات في القسم "هل يمكنني استخدام"، ستظهر لك شارة توضّح ما إذا كانت الميزة متوفّرة على نطاق واسع في "خط الأساس".
ستظهر أيضًا شارة إلى جانب الميزات المتوفّرة حديثًا في Baseline. العام الذي أصبحت فيه متوفرة. يشير هذا المصطلح إلى أي عنصر أصبح قابلاً للتشغيل البيني على مجموعة المتصفِّح الأساسية هذا العام هي جزء من خط الأساس 2023.
في بقية هذه المشاركة، تعرّف على الميزات التي حققت هذا الإنجاز خلال 2023 تُعد كل هذه الميزات Baseline 2023: أصبح هذا التقرير متوفّرًا حديثًا.
طلبات بحث حاوية الحجم ووحدات طلبات البحث في الحاوية
حجم طلبات البحث في الحاوية تتيح لك الاستعلام عن حجم عنصر ما، بالطريقة نفسها التي يتم بها الاستعلام عن الوسائط تتيح لك الاستعلام عن حجم إطار العرض. يصنعون مكونات قابلة لإعادة الاستخدام من خلال السماح لك بإنشاء مكونات تتفاعل مع حجم المنطقة التي يتم وضعها فيها.
يتغير تصميم البطاقة التالية وفقًا لعرض المكوِّن. اطّلِع على مزيد من المعلومات في مقالة وصول طلبات البحث الخاصة بالحاويات إلى المتصفّحات الثابتة.
مساحات ودوال جديدة للألوان
تتيح خدمة CSS الآن مساحات اللون التي تتيح لك الوصول إلى الألوان خارج سلسلة sRGB. يعني هذا أنّه يمكنك إتاحة الشاشات العالية الدقة باستخدام ألوان من الدقة العالية. سلسلة.
نماذج ألوان جديدة
الآن في "خط الأساس"، دوال اللون lch()
وlab()
وoklch()
وoklab()
تتيح الوصول إلى نماذج الألوان LCH و Lab وOKLCH وOKLab.
![لقطة شاشة لمحرِّر تدرّج.تدرّج الألوان يحتوي على تدرج نابض بالحياة من الوردي إلى الأزرق.](https://web.dev/static/blog/baseline2023/image/gradient-style.png?authuser=4&hl=ar)
الدالة color-mix()
بالإضافة إلى ذلك، أصبحت دوال الألوان الجديدة جزءًا من "المقياس الأساسي". 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 تمنحك العديد من الأمثلة الأخرى لمساحات ودوال الألوان الجديدة، إلى جانب المعلومات حول المنتجات ومتى ينبغي استخدامها.
مصادر الضغط
pression Streams API هي واجهة برمجة تطبيقات JavaScript لضغط مصادر البيانات وفك ضغطها. حملة التطبيقات باستخدام هذا الضغط المدمج، لم يعد هناك حاجة إلى تضمين مكتبة ضغط.
اطّلِع على مزيد من المعلومات في مقالة تتوفّر الآن إمكانية بث المحتوى المضغوط على جميع المتصفّحات.
لوحة رسم خارج الشاشة
قبل استخدام ميزة "لوحة الرسم خارج الشاشة"، كانت إمكانات رسم لوحة الرسم مرتبطة بـ <canvas>
.
وهو ما يعني أنه يعتمد ارتباطًا مباشرًا على نموذج العناصر في المستند (DOM). الفصل بين لوحات الرسم خارج الشاشة
DOM من واجهة برمجة تطبيقات لوحة الرسم عن طريق نقل لوحة الرسم خارج الشاشة.
بفضل هذا الفصل، تم فصل عرض OffscreenCanvas تمامًا عن في نموذج DOM، لذا فإنه يقدم بعض التحسينات في السرعة على لوحة الرسم العادية لأنه ليست هناك مزامنة بين الاثنين. يمكن أيضًا استخدامها لنقل على الرغم من عدم توفر عنصر DOM، مما يؤدي إلى تحرير سلسلة التعليمات الرئيسية وتجعل التطبيق أكثر استجابة.
مزيد من المعلومات في لوحة الرسم خارج الشاشة: تسريع عمليات لوحة الرسم مع عامل على الويب
التحميل المسبق للوحدة
يمكن أن تقلّل وحدات التحميل المُسبق من وقت التنزيل والمعالجة. إضافة
rel="modulepreload"
إلى عنصر الرابط الذي يشير إلى وحدة JavaScript، وسيحصل المتصفح على
وتحليلها وتجميعها، ووضع النتائج في خريطة الوحدة جاهزة
تنفيذها.
تعرَّف على مزيد من المعلومات في وحدات التحميل المُسبق.
الدوال المثلثية في CSS
في الدوال المثلّثية لعام 2023 من قيم CSS والوحدات من المستوى 4
إمكانية التشغيل التفاعلي بين هذه المواصفات. يعني ذلك أن الدوال sin()
وcos()
tan()
وasin()
وacos()
وatan()
وatan2()
هي جزء من مجموعة البيانات الأساسية 2023.
تعرف على كيفية استخدام هذه الدوال واكتشاف بعض حالات الاستخدام في الدوال المثلّثية في CSS.
السمة inert
عند وضع علامة inert
على عنصر DOM، تتم إزالة الحركة أو التفاعل من
بها. تؤدي السمة inert إلى تجاهل المتصفّح للعنصر:
- ولا يتم تنشيط حدث
click
إذا نقر أحد المستخدمين على العنصر. - لن يتم التركيز على العنصر.
- يتم استبعاد العنصر ومحتواه من شجرة تسهيل الاستخدام.
أضِف هذه السمة إلى عناصر خارج الشاشة أو مخفية بأي شكل آخر. لمزيد من المعلومات، راجع سمة inert.
الشبكة الفرعية في تنسيق شبكة CSS
تتيح قيمة subgrid
لـ grid-template-columns
وgrid-template-rows
يمكنك استخدام المسارات المحددة في الشبكة الرئيسية، على الشبكات المتداخلة. هذا يعني أنه يمكنك
ومحاذاة العناصر في شبكات متداخلة منفصلة مع بعضها البعض.
في الشبكة الفرعية لخدمة مقارنة الأسعار، ستجد بعض الأمثلة والروابط إلى العديد من المشاركات والأمثلة الأخرى التي تسلط الضوء على حالات الاستخدام الفرعية.
تنسيق الأرقام V3
Intl.NumberFormat V3 هو مجموعة من الميزات الجديدة لـ Intl.NumberFormat التي أصبحت من Baseline خلال 2023 في ما يلي الميزات الإضافية:
- ثلاث دوال جديدة لتنسيق نطاقات الأرقام:
formatRange
،formatRangeToParts
وselectRange
- تعداد التجميع
- خيارات جديدة للتقريب والدقة
- أولوية التقريب
- تفسير السلاسل ككسور عشرية
- أوضاع التقريب
- وضع علامة سلبية على الشاشة
اقتراح NumberFormat V3 تفاصيل كل ميزة من هذه الميزات الجديدة.
واجهة برمجة التطبيقات بملء الشاشة
تتيح لك واجهة برمجة التطبيقات بملء الشاشة وضع عنصر مثل <video>
في وضع ملء الشاشة.
عن طريق استدعاء طريقة requestFullscreen()
. كما أنه يوفر طرقًا
اكتشاف ما إذا كان أحد العناصر في وضع ملء الشاشة، وما إذا كان
في حالة تتيح لك طلب وضع ملء الشاشة.
يمكنك الاطّلاع على مزيد من المعلومات في هذا دليل واجهة برمجة التطبيقات بملء الشاشة على MDN.
أداة اختيار :has()
لصفحات الأنماط المتتالية (CSS)
أصبحت Baseline 2023 هي أداة اختيار :has()
التي ستتم إتاحتها على Firefox
121 في 19 كانون الأول (ديسمبر). إلى جانب استخدامات أخرى، تعمل أداة الاختيار هذه
parent select، مما يتيح لك تحديد عنصر استنادًا إلى الأشياء بالداخل
بها. على سبيل المثال، يمكنك تطبيق خدمة CSS مختلفة اعتمادًا على ما إذا كانت هناك
صورة داخل عنصر.
يمكنك الاطّلاع على مزيد من المعلومات في :has(): أداة اختيار العائلة.
مزيد من الميزات التي انضمت إلى Baseline هذا العام
تشمل الميزات الأخرى التي أصبحت جزءًا من "خط الأساس" هذا العام ما يلي:
- أوراق أنماط قابلة للإنشاء
- أدوات اختيار nth-child معقدة في CSS
- بنية النطاق للاستعلامات عن الوسائط
- استيراد "خرائط Google"
- قيم متعددة لعرض CSS
- @counter-style
- سمة CSS "
counter-set
" - وظيفة التخفيف
linear()
- نظام الملفات الخاصة المصدر (OPFS)
- CSS Nesting بما في ذلك التغيير الذي يضيف التحليل المريح.
- أداة اختيار الفئة
:dir()
في CSS - وحدة طول
cap
في CSS - إخفاء محتوى CSS
- طلب بحث الوسائط عن عناصر
<source>
الخاصة بالفيديوهات بتنسيق HTML - عنصر HTML
<search>
- التحميل الكسول لعناصر
<iframe>
(الصفحة المقصودة) في Firefox 121 في 19 كانون الأول (ديسمبر)) - وحدتا ارتفاع السطر
lh
وrlh
CSS
وصلت العديد من هذه الميزات إلى إمكانية التشغيل التفاعلي من خلال العمل التعاوني على Interop 2023 إنه أمر مثير أن نرى كيف أن الميزات من خلال هذه العملية ووصوله إلى "برنامج Baseline" عند توفّره حديثًا، والذي يطلق الموقت حتى تصبح متاحة على نطاق واسع. يؤدي هذا إلى إنشاء مسار أوضح للقرارات بشأن وقت تبني الميزات في مشروعاتك الخاصة.