تاريخ النشر: 3 يونيو 2026
مرحبًا بك في الملخّص الشهري لمشروع Baseline. في مايو 2026، أصبحت العديد من ميزات CSS الجديدة وخصائص الأحداث والإضافات إلى واجهة برمجة التطبيقات متاحة حديثًا في مشروع Baseline، بينما وصلت وحدات CSS وخصائص تفاعل المستخدمين والفئات الزائفة إلى مرحلة التوفّر على نطاق واسع في مشروع Baseline، بالإضافة إلى تحديثات مهمة من مجتمع المطوّرين.
استطلاع حالة CSS لعام 2026
نقدّم لك الاستطلاع السنوي الذي يهدف إلى قياس آراء مجتمع الويب: استطلاع حالة CSS لعام 2026 متاح الآن. بذل المنظّمون هذا العام جهدًا واعيًا لتحسين الاستطلاع، مع التركيز على الميزات الأكثر أهمية للمطوّرين في عصر الترميز بمساعدة الذكاء الاصطناعي. يراقب مورّدو المتصفّحات هذه النتائج عن كثب للمساعدة في تحديد أولويات خرائطهم الهندسية ومعالجة المشاكل التي يواجهها المطوّرون. احرص على مشاركة رأيك وتجربتك في ما يتعلّق بمشهد CSS المتطوّر قبل إغلاقه في 1 يوليو.
الميزات المتاحة حديثًا في مشروع Baseline
تتوفّر الميزات الواردة في هذا القسم اعتبارًا من مايو 2026 في مجموعة المتصفّحات الأساسية، وأصبحت الآن متاحة حديثًا في مشروع Baseline.
طلبات البحث عن أنماط الحاويات
لم تعُد طلبات البحث عن الحاويات تقتصر على الحجم. باستخدام طلبات البحث عن الأنماط، يمكنك الآن تطبيق أنماط على العناصر استنادًا إلى الخصائص المخصّصة لحاوية رئيسية. يتيح لك ذلك إنشاء مكوّنات معيارية للغاية يمكنها تكييف مظهرها أو تصميمها استنادًا إلى موضع الإعلان بحسب المحتوى بدون الاعتماد على هياكل فئات معقّدة.
مزيد من المعلومات في صفحة مرجع MDN لـ @container
الفئة الزائفة :open
كانت عملية تصميم العناصر التي تتضمّن حالتَين، مفتوحة ومغلقة، مثل <dialog> و<details>، تتطلّب سابقًا التحقّق من السمات أو إدارة الفئات. تسهّل الفئة الزائفة :open هذه العملية من خلال مطابقة هذه العناصر فقط عندما تكون في حالتها المفتوحة حاليًا، ما يسمح باستخدام CSS أكثر وضوحًا وتعبيرًا.
يمكنك الاطّلاع على هذه الفئة في صفحة MDN للفئة الزائفة :open.
ToggleEvent.source
عند استخدام Popover API، من الضروري التفاعل مع تغييرات الحالة. تعرض السمة source لواجهة ToggleEvent عنصر التحكّم الذي بدأ إجراء تبديل النافذة المنبثقة. يتيح لك ذلك تحديد مصدر الحدث وتنسيق تفاعلات واجهة المستخدم المعقّدة.
مزيد من المعلومات في مستندات MDN لـ ToggleEvent.source.
السمة image-rendering
تتيح لك سمة CSS image-rendering التحكّم في خوارزمية تغيير الحجم المستخدَمة عند تغيير حجم الصور. يكون ذلك مفيدًا بشكل خاص لفن البكسل أو الصور المنخفضة الدقة أو رموز الاستجابة السريعة حيث من المهم تجنُّب التداخل غير الواضح والحفاظ على دقة تغيير الحجم وتجزئته.
تعلَّف على كيفية استخدامها في صفحة MDN لـ image-rendering.
text-decoration-skip-ink: all
قد تبدو الخطوط التحتية التي تمر عبر الحروف النازلة مشوّشة في بعض الأحيان. بينما تتخطّى السمة text-decoration-skip-ink: auto الحبر فقط عند التقاطع، فإنّ ضبطها على all يفرض على الخط التحتية تخطّي جميع الحروف الرسومية بغض النظر عن التقاطع، ما يمنحك مزيدًا من التحكّم في جماليات الطباعة.
يمكنك الاطّلاع على التفاصيل في دليل MDN لـ text-decoration-skip-ink.
SharedWorker
توفّر واجهة برمجة التطبيقات SharedWorker عامل خلفية متخصصًا يمكن الوصول إليه من سياقات تصفّح متعددة، مثل نوافذ أو علامات تبويب أو عناصر iframe مختلفة على المصدر نفسه. تكون هذه الواجهة فعّالة لمشاركة الحالة أو إدارة الاتصالات أو تنسيق مهام الخلفية عبر حدود علامات التبويب.
يمكنك الاطّلاع على مستندات MDN لـ SharedWorker.
الميزات المتاحة على نطاق واسع في مشروع Baseline
أصبحت الميزات التالية متاحة على نطاق واسع في مشروع Baseline، ما يعني أنّها متوافقة الآن على نطاق واسع ويمكن استخدامها في مشاريعك.
وحدة الطول lh
تتوافق الوحدة النسبية lh مع ارتفاع السطر المحسوب للعنصر الذي يتم استخدامها فيه. يسهّل ذلك تغيير حجم العناصر، مثل شارات الأيقونات أو التمييزات في الخلفية، لتتطابق تمامًا مع ارتفاع سطر نص.
مزيد من المعلومات في مرجع MDN لوحدات الطول.
وحدة الطول rlh
على غرار lh، تمثّل الوحدة rlh ارتفاع السطر، ولكن تحديدًا للعنصر الجذر (<html>). يتيح لك ذلك إنشاء إيقاع عمودي متّسق على مستوى صفحتك بالكامل، بغض النظر عن حجم الخط المحلي أو عمليات إلغاء ارتفاع السطر.
مزيد من المعلومات في مرجع MDN لوحدات الطول.
Navigator.userActivation
تتطلّب العديد من واجهات برمجة تطبيقات الويب (مثل تشغيل الفيديو أو النوافذ المنبثقة أو الوصول إلى الحافظة) تفاعل المستخدم قبل أن يتم تشغيلها. تعرض السمة Navigator.userActivation كائنًا يحتوي على معلومات حول حالة التفعيل الحالية والسابقة للمستخدم في النافذة، ما يسمح للنصوص البرمجية بالتحقّق مما إذا كان إجراء تفاعلي من المستخدم قد حدث.
تعرَّف على كيفية استخدامها في صفحة MDN لـ Navigator.userActivation.
clip-path
تتيح لك سمة CSS clip-path إنشاء منطقة قص تحدّد الجزء الذي يجب أن يكون مرئيًا من العنصر. باستخدام الأشكال الأساسية (مثل الدوائر أو القطوع الناقصة أو المضلّعات) أو مسارات SVG، يمكنك إنشاء تصميمات وتأثيرات انتقالية جذابة بدون إخفاء المحتوى الذي يتجاوز الحاوية.
يمكنك الاطّلاع على تفاصيل التنفيذ في صفحة MDN لـ clip-path.
الفئة الزائفة :user-invalid
على عكس :invalid، التي تطبّق التصميم بمجرد تحميل الصفحة (ما يؤدي غالبًا إلى تجربة مستخدم سيئة)، لا تطابِق الفئة الزائفة :user-invalid عناصر النموذج غير الصالحة إلا بعد أن يتفاعل المستخدم معها. يعني ذلك أنّه يمكنك عرض ملاحظات التحقّق من صحة النموذج بعد أن يغادر المستخدم الحقل.
تعرَّف على طريقة عملها في مستندات MDN لـ :user-invalid.
الخاتمة
يُرجى إعلامنا إذا فاتنا أي شيء ذي صلة بمشروع Baseline، وسنتأكّد من تضمينه في إصدار مستقبلي. إذا كان لديك أي أسئلة أو أردت تقديم ملاحظات حول مشروع Baseline، يمكنك تسجيل مشكلة في أداة تتبُّع المشاكل.