في مؤتمر Google I/O، شاركت أخبارًا حول كيفية تطور مستوى الأساس منذ إعلاننا في مؤتمر I/O العام الماضي. لقد أعلنت أيضًا عن لوحة معلومات منصة الويب، وعمليات الدمج مع أرشيف RUM، والتكامل القادم مع RUMvision. تجمع هذه المشاركة جميع الموارد من المحادثة في مكان واحد.
إنّ لوحة بيانات النظام الأساسي للويب هي طريقة جديدة ومثيرة لعرض منصة الويب بأكملها، ورحلة الميزات الفردية إلى إمكانية التشغيل التفاعلي، والانضمام إلى المجموعة الأساسية. يمكنك الاطّلاع على مزيد من المعلومات حول هذا الموضوع في الإعلان عن لوحة بيانات منصة الويب.
كان دمج خط الأساس مع الأدوات التي تستخدمها كل يوم جزءًا من رؤية هذا المشروع. نريد أن نجعل التعامل مع توافق المتصفحات شيئًا لا يجب عليك قضاء الكثير من الوقت في التفكير فيه. تعرَّف على المزيد من المعلومات حول دمج أرشيف RUM، وشاهِد هذا القسم للاطّلاع على أخبار المزيد من موفّري الأدوات قريبًا.
محتوى جديد على القناة الأساسية
وفي مؤتمر I/O، شاركت 12 ميزة لمنصة الويب أصبحت مؤخرًا جزءًا من "خط الأساس متاح حديثًا". هذه الميزات متاحة الآن في Chrome وEdge وFirefox وSafari، وهي تتنوّع ما بين الإضافات الصغيرة التي تسهّل عملية التطوير ووصولاً إلى بعض الميزات الأكثر طلبًا للمطوّرين، بما في ذلك طلبات البحث في الحاوية و:has().
طلبات البحث عن حاوية الحجم
تتيح لك طلبات البحث لحاوية الحجم تغيير تصميمك بناءً على عرض الحاوية أو حجمها المضمّن، بدلاً من إمكانية استهداف حجم إطار العرض باستخدام استعلامات عن الوسائط فحسب. يتيح هذا المزيد من المكونات القابلة لإعادة الاستخدام التي يمكنها تعديلها بناءً على المساحة المتاحة عند وضعها في تخطيط. لقد كانت على قمة قائمة الميزات الأكثر طلبًا منذ فترة طويلة تقريبًا لوجود مفهوم التصميم سريع الاستجابة.
- يتوفّر هذا التعديل الجديد في شباط (فبراير) 2023.
- يتوفّر على نطاق واسع في آب (أغسطس) 2025.
تعرَّف على مزيد من المعلومات عن طلبات بحث الحاويات على MDN، في طلبات بحث الحاويات التي تظهر في متصفحات ثابتة، واكتشِف كيف تستفيد فِرق التطوير الأخرى منها في دراسات الحالة لطلبات بحث الحاويات.
أداة اختيار :has()
تقدّم لنا أداة الاختيار :has() أحد أهم طلبات المطوّرين على مدار سنوات عديدة، وهي عبارة عن أداة اختيار رئيسية، وهي طريقة لاختيار العنصر استنادًا إلى مضمونه. على الرغم من أنّ السمة :has() قد لا تقتصر على ذلك فقط.
كما هو الحال مع استعلامات الحاوية، فإن ذلك مفيد للغاية عند إنشاء مكونات قابلة لإعادة الاستخدام، حيث يمكنك إنشاء مكون واحد يمكنه التكيف مع ما يحتوي عليه.
- تتوفّر هذه الميزة الجديدة في كانون الأول (ديسمبر) 2023.
- تتوفّر هذه الميزة على نطاق واسع في حزيران (يونيو) 2026.
اطّلع على مزيد من المعلومات عن :has() على MDN،
في :has() أداة اختيار العائلة،
وفي دراسات الحالة :has().
الشبكة الفرعية لتنسيق CSS
تُمكّن Subgrid إمكانية تخطيط الشبكة المتداخلة من اكتساب المسارات من الأصل. يسمح بمحاذاة أفضل للعناصر داخل الشبكات المتداخلة.
- تتوفّر هذه الميزة الجديدة في كانون الأول (ديسمبر) 2023.
- تتوفّر هذه الميزة على نطاق واسع في حزيران (يونيو) 2026.
تعرَّف على المزيد من المعلومات عن الاشتراك في MDN وفي الشبكة الفرعية لخدمة CSS التي ترتبط بعدد كبير من الموارد الأخرى.
تداخل CSS
في السنوات الأخيرة، استلهمت خدمة CSS من الميزات التي استخدمها المطوّرون في المعالجات السابقة مثل Sass. على سبيل المثال، خصائص CSS المخصّصة، التي تُعرف غالبًا باسم متغيّرات CSS، هي ميزة متاحة على نطاق واسع تسمح بضبط المتغيّرات مثل الألوان في مكان واحد واستخدامها في جميع أقسام CSS، وهي ميزة لم تكن تتوفّر في السابق إلا عند استخدام معالج أولي.
وهناك ميزة أخرى للمعالجات المسبقة هي التداخل. يساعد التداخل في تجنب تكرار أدوات الاختيار، ويساعد في قراءة CSS، لأنه يمكن تجميع الأشياء ذات الصلة معًا بسهولة أكبر.
- متوفّرة حديثًا في آب (أغسطس) 2023
- متوفّر على نطاق واسع في شباط (فبراير) 2026
تعرَّف على مزيد من المعلومات حول دمج CSS على MDN وفي CSS Nesting.
عنصر HTML <search>
يظهر البحث على العديد من المواقع الإلكترونية والتطبيقات، إلا أنّه حتى وقت قريب لم يكن هناك أي عنصر لترميز الوظائف المستخدمة للبحث في الصفحة أو الفلترة فيها. تم تصميم العنصر <search>
لهذا الغرض. إنه موجود كعنصر يمكنك داخله وضع نموذج بحث، أو عناصر أخرى مستخدمة لتصفية النتائج.
- متوفّرة حديثًا في تشرين الأول (أكتوبر) 2023
- متاحة على نطاق واسع في نيسان (أبريل) 2026
تعرَّف على مزيد من المعلومات عن العنصر <search> على MDN.
فيديو متجاوب مع مختلف الأجهزة
تشير هذه الميزة إلى إمكانية استخدام العنصر <source> في العنصر <video> لعرض فيديو بحجم مناسب على أجهزة مختلفة، بالطريقة نفسها التي يمكنك بها عرض صور بأحجام مختلفة.
- متوفّرة حديثًا في تشرين الثاني (نوفمبر) 2023
- متاحة على نطاق واسع في أيار (مايو) 2026
تعرّف على المزيد من المعلومات حول MDN من خلال عنصر مصدر الوسائط أو الصورة، وفي كيفية استخدام الفيديو المتجاوب.
السمة inert
عندما يكون عنصر inert، لا يمكن التفاعل معه. على سبيل المثال، عند فتح عناصر في نافذة مربّع الحوار، لا يمكن النقر على عناصر الصفحة خلف مربع الحوار أو النقر عليها. تمنحك سمة inert طريقة للتحكم في عدم القصور في أي جزء من واجهة المستخدم.
عند تطبيق السمة inert على عنصر ما، لن يتم تنشيط أحداث النقر
إذا تم النقر على العنصر أو يتعذّر عليه جذب التركيز، ويكون العنصر
ومحتواه مخفيًا عن التكنولوجيا المساعِدة لأنّه يتم استبعاده من
شجرة تسهيل الاستخدام.
- متوفّرة حديثًا في نيسان (أبريل) 2023
- متاحة على نطاق واسع في تشرين الأول (أكتوبر) 2025
تعرّف على مزيد من المعلومات حول inrt في MDN وأيضًا في سمة inert.
الدالة color-mix()
تتيح الدالة color-mix() مزج لون واحد في لون آخر، في أي مساحات ألوان متاحة، ويشمل ذلك جميع نماذج الألوان الجديدة، LCH وBlab وOKLCH وOKLab، التي أصبحت مؤخرًا جزءًا من Baseline available (يتوفّر حديثًا).
- متوفّرة حديثًا في نيسان (أبريل) 2023
- متاحة على نطاق واسع في تشرين الأول (أكتوبر) 2025
يمكنك الاطّلاع على المزيد من المعلومات حول color-mix() على MDN وفي CSS color-mix().
لدينا أيضًا دليل ألوان CSS عالي الدقة ضخم يشمل جميع نماذج الألوان الجديدة المتاحة في CSS. ندعوك أيضًا إلى مراجعة gradient.style للتعامل مع هذه الألوان الجديدة وإنشاء تدرّجات ألوان جميلة.
:user-valid و:user-invalid
تتوفّر الفئتان الزائفة :valid و:invalid على نطاق واسع في المتصفّحات، وهما يشيران إلى ما إذا كان عنصر النموذج صالحًا حاليًا وفقًا لأي قواعد قيد مفروضة عليه، أو غير صالح. لذلك، إذا كان لديك حقل به نوع من عناوين البريد الإلكتروني وكان يحتوي على اسم، تختار الفئة الزائفة في :invalid هذا الحقل، ويمكنك إضافة لون أو رمز لتوضيح أنّه يجب تصحيحه.
تكمن المشكلة في الفئتين الزائفة :valid و:invalid في أنه يتم تطبيقهما قبل تفاعل المستخدم مع نموذج. وبالتالي، إذا كان أحد عناصر النموذج مطلوبًا ولم يكمله المستخدم بعد، سيظهر النمط غير الصالح. عادةً ما تريد فقط عرض النمط غير الصالح بعد أن يُدخل المستخدم شيئًا ما بشكل غير صحيح أو أن يتخطى أحد الحقول ويتركه فارغًا.
لتحسين تجربة المستخدم في هذه الحالة، يُرجى استخدام الفئتَين الزائفة :user-valid و:user-invalid. تتصرف هذه الأشياء بنفس الطريقة تقريبًا،
إلا أنها تتطابق فقط بمجرد تفاعل المستخدم مع الحقل. لذلك، في مثال الحقل المطلوب، يحتاج المستخدم إلى الضغط أو النقر داخل الحقل ثم الانتقال بعيدًا بدون إكماله حتى يظهر للحقل الحالة غير الصالحة.
- متوفّرة حديثًا في تشرين الأول (أكتوبر) 2023
- متاحة على نطاق واسع في نيسان (أبريل) 2026
تعرَّف على مزيد من المعلومات حول :user-valid
و:user-invalid
على MDN.
ساحات المشاركات المضغوطة
تحتاج العديد من تطبيقات الويب إلى توفير عملية التنزيل للمستخدم بتنسيق مضغوط مثل ملف ZIP. في الماضي، كان هذا يتطلب من التطبيق تضمين مكتبة ضغط، وهي عبارة عن رمز أدى إلى زيادة حجم التطبيق لجميع المستخدمين. تمنحك واجهة برمجة تطبيقات pression Streams API طريقة مدمَجة لضغط تدفق البيانات.
- متوفّرة حديثًا في أيار (مايو) 2023
- متوفّر على نطاق واسع في تشرين الثاني (نوفمبر) 2025
يمكنك الاطّلاع على مزيد من المعلومات حول واجهة برمجة تطبيقات Crisis Streams API على MDN وفي توفّر ساحات المشاركات المضغوطة الآن في جميع المتصفّحات.
نموذج الإعلان المستند إلى الظلّ
إنّ نموذج شجرة الظل الخاص بنموذج التظليل هو طريقة جديدة لإنشاء شجرة ظل من ترميز HTML،
حيث كان بإمكانك في السابق إنشاء شجرة ظل من JavaScript باستخدام
attachShadow() فقط. وتُعد إمكانية إجراء ذلك باستخدام HTML مفيدة للغاية في البيئات التي قد لا يتم فيها تشغيل JavaScript، مثل برنامج البريد الإلكتروني. وهو مهم أيضًا لمكونات الويب المعروضة من جهة الخادم.
- متوفّرة حديثًا في شباط (فبراير) 2024
- يتوفّر على نطاق واسع في آب (أغسطس) 2026.
يمكنك الاطّلاع على مزيد من المعلومات حول Declarative Shadow DOM.
واجهة برمجة التطبيقات Popover
تُستخدم النوافذ المنبثقة للعديد من المهام المختلفة في تطبيقات الويب. على سبيل المثال، القوائم وإشعارات الإشعار المشترك المخصصة ومنتقي المحتوى. هناك الآن طريقة مضمنة لإنشاء هذه النوافذ المنبثقة بطريقة زخرفية باستخدام واجهة برمجة التطبيقات Popover API.
- متوفّرة حديثًا في نيسان (أبريل) 2024
- متاحة على نطاق واسع في تشرين الأول (أكتوبر) 2026
يمكنك الاطّلاع على مزيد من المعلومات حول Popover API على MDN، وPopover API وصوله إلى Baseline، وفي دراسات حالة Popover.
هذه الميزات الاثنتي عشرة هي بعض الميزات التي أصبحت جزءًا من الميزات الأساسية المتوفرة حديثًا، ويمكنك اكتشاف المزيد على هذا الموقع. يمكنك التعرّف على جميع الميزات التي أصبحت جزءًا من Baseline 2023 والمجموعة المتنامية من الميزات التي تشكّل جزءًا من Baseline 2024.