تاريخ النشر: 17 يوليو 2026
مرحبًا بك مجددًا في الملخّص الشهري لـ Baseline. في يونيو 2026، أصبحت قيمة field-sizing
متاحة حديثًا في Baseline، ما يسمح لعناصر التحكّم في النماذج بالتعديل تلقائيًا
لتلائم محتواها. في الوقت نفسه، أصبحت مجموعة كبيرة من ميزات CSS وHTML وWeb API متاحة على نطاق واسع ضمن Baseline، بالإضافة إلى آخر الأخبار المهمة من منتدى المطوّرين.
تنبيهات أساسية بشأن حالة "منصة الويب"
أصبح من الأسهل الآن تتبُّع الوقت الذي تصبح فيه ميزات الويب قابلة للتشغيل التفاعلي، وذلك بفضل تنبيهات Baseline في لوحة بيانات حالة النظام الأساسي للويب. من خلال تسجيل الدخول باستخدام GitHub، يمكنك الاشتراك في تلقّي إشعارات بشأن الميزات عند توفّرها حديثًا في Baseline أو توفّرها على نطاق واسع أو عند تلقّي عمليات تنفيذ جديدة في المتصفّح. يمكن ضبط الاشتراكات لإرسال إشعارات عبر البريد الإلكتروني أو خلاصات RSS مخصّصة وفق جدول زمني شهري أو أسبوعي أو فوري. يمكنك تحديد نطاق التنبيهات ليشمل عمليات البحث المحفوظة، مثل جميع ميزات HTML، أو إنشاء نشرات إخبارية مخصّصة، أو إنشاء قوائم ميزات قابلة للمشاركة، أو ضبط خطافات Slack لإرسال إشعارات إلى فريق الهندسة.
مزيد من المعلومات حول ميزة "تنبيهات Baseline"
ميزات Baseline الجديدة
الميزات الواردة في هذا القسم متوافقة اعتبارًا من يونيو 2026 في مجموعة المتصفحات الأساسية، وهي متاحة الآن في Baseline Newly.
field-sizing
توفّر خاصية field-sizing في CSS إمكانية التحكّم في سلوك تغيير حجم عناصر النماذج، مثل <textarea> و<input> و<select>، التي كانت تتضمّن بشكل تقليدي أبعادًا ثابتة تلقائية. باستخدام عناصر التحكّم في النماذج field-sizing: content، يمكن توسيع أو تصغير الحقول تلقائيًا لتلائم المحتوى، ما يقلّل الحاجة إلى نصوص برمجية مخصّصة لتغيير الحجم تلقائيًا باستخدام JavaScript.
يمكنك الاطّلاع على مزيد من المعلومات في صفحة المرجع على شبكة مطوّري Mozilla حول تحديد حجم الحقل.
ميزات Baseline المتاحة على نطاق واسع
أصبحت الميزات التالية متاحة على نطاق واسع في Baseline، ما يعني أنّها أصبحت متوافقة وقابلة للاستخدام على نطاق واسع في مشاريعك.
الفئة الصورية :has()
يتيح لك :has()محدّد CSS للعنصر الرئيسي وضع نمط لعنصر استنادًا إلى العناصر التابعة له أو العناصر الشقيقة اللاحقة. تتيح فئة العناصر الزائفة الوظيفية هذه أنماط التنسيق الشرطية مباشرةً في CSS بدون الحاجة إلى JavaScript لفحص بنى DOM.
يمكنك الاطّلاع على مزيد من المعلومات في صفحة MDN الخاصة بفئة :has الزائفة.
HTMLIFrameElement.loading
تتيح سمة loading في عناصر <iframe> التحميل الكسول للإطارات المضمّنة. من خلال تحديد loading="lazy"، تؤجّل المتصفّحات تحميل إطارات iframe خارج الشاشة إلى أن يتم التمرير بالقرب من إطار العرض، ما يؤدي إلى توفير نطاق ترددي للشبكة وتقليل الحمل الزائد عند تحميل الصفحة في البداية.
اطّلِع على التفاصيل في مرجع MDN الخاص بـ HTMLIFrameElement.loading.
CanvasRenderingContext2D.reset()
تعمل الطريقة reset() في سياقات لوحة الرسم الثنائية الأبعاد على محو حالة سياق الرسم، وإعادة تعيين الخصائص، مثل عمليات التحويل ومسارات القص وأنماط الخطوط وأنماط التعبئة إلى قيمها التلقائية. يتيح ذلك إعادة استخدام سياق لوحة الرسم بشكل سليم بدون الحاجة إلى تنظيف الخصائص يدويًا.
يمكنك الاطّلاع على مزيد من المعلومات في مستندات MDN حول CanvasRenderingContext2D.reset.
cap وحدة الطول
تتوافق وحدة cap النسبية إلى الخط مع الارتفاع الاسمي للأحرف الكبيرة في خط العنصر. تتيح لك هذه الوحدة محاذاة العناصر وتحديد حجمها بالنسبة إلى ارتفاع الأحرف الكبيرة، ما يتيح إنشاء تخطيطات طباعية دقيقة.
يمكنك الاطّلاع على مزيد من المعلومات في مرجع MDN لوحدات الطول.
موقع واحد (counter-set)
تضبط خاصية counter-set في CSS عدّاد CSS على قيمة محدّدة،
وهي تكملة للخاصيتَين counter-reset وcounter-increment. توفّر هذه السمة إمكانية التحكّم عند معالجة القوائم المرقّمة أو المخططات التفصيلية للمستندات أو تسلسلات العدادات المخصّصة.
يمكنك الاطّلاع على التفاصيل في صفحة MDN الخاصة بـ counter-set.
createImageBitmap()
ينشئ الأسلوب الثابت createImageBitmap() صورة نقطية غير متزامنة
من مصادر صور مختلفة، بما في ذلك <img> أو <canvas> أو Blob أو
ImageData. وبما أنّه يفك ترميز الصور خارج سلسلة التعليمات الرئيسية، فهو يتجنّب حظر أداء واجهة المستخدم عند التعامل مع رسومات معقّدة على لوحة العرض.
يمكنك الاطّلاع على تفاصيل التنفيذ في مستندات MDN حول createImageBitmap.
نوع البيانات من <easing-function>
يصف نوع بيانات <easing-function> CSS منحنيات معدل التغيير الرياضي
لعمليات الانتقال والحركات. بالإضافة إلى الكلمات الرئيسية العادية، مثل ease-in أو cubic-bezier()، يتيح هذا التطبيق وظائف مثل linear() لإنشاء تأثيرات مخصّصة للارتداد أو الحركة السريعة.
يمكنك الاطّلاع على كيفية استخدامها في مرجع MDN الخاص بـ easing-function.
أداة اختيار & المتداخلة
تثبّت أداة اختيار & التداخل بشكلٍ صريح أدوات اختيار القواعد الفرعية في أداة اختيار القاعدة الرئيسية عند استخدام ميزة التداخل المضمّنة في CSS. ويضمن ذلك الوضوح وقواعد التحديد الصحيحة عند تحديد حالات التمرير أو التركيز أو الفئة الزائفة المتداخلة.
اطّلِع على التفاصيل في دليل MDN الخاص بأداة اختيار التداخل.
التحميل المُسبَق المتجاوب باستخدام rel="preload"
تتيح السمة media في عناصر <link rel="preload"> التحميل المسبق المتجاوب لمواد العرض الرئيسية. من خلال الجمع بين rel="preload" وطلبات البحث عن الوسائط، لا تنزّل المتصفحات سوى مواد العرض التي تتطابق مع عرض إطار العرض أو خصائص الشاشة لدى المستخدم في وقت مبكر من دورة حياة التحميل.
يمكنك الاطّلاع على كيفية استخدامها في مستندات MDN حول rel="preload".
HTMLMediaElement.preservesPitch
تتحكّم السمة preservesPitch في العنصرَين <audio> و<video> في ما إذا كان المتصفّح يضبط درجة الصوت عند تغيير playbackRate.
ضبطها على false يسمح بتغيير درجة الصوت عند تسريع تشغيل الوسائط أو إبطائه.
يمكنك الاطّلاع على التفاصيل في صفحة MDN الخاصة بالسمة HTMLMediaElement.preservesPitch.
الفئة الصورية :dir()
تطابق فئة :dir() CSS الزائفة العناصر استنادًا إلى اتجاه النص
(مثل ltr أو rtl)، مع مطابقة الاتجاه الموروث من سمات HTML مثل
dir أو سياق النص المحسوب.
يمكنك الاطّلاع على مزيد من المعلومات في صفحة MDN الخاصة بالفئة الزائفة :dir.
دالة الرياضيات pow()
تحسب دالة pow() CSS قيم الأسّ الأسي مباشرةً ضمن تعريفات CSS، وذلك عن طريق رفع عدد أساسي إلى أسّ (على سبيل المثال، pow(2, 3)). ويؤدي ذلك إلى تبسيط عملية التحجيم المتجاوب والعلاقات الرياضية بين عناصر الشبكة.
اطّلِع على التفاصيل في مرجع MDN الخاص بدالة pow.
خاصية mask في CSS
تخفي الخاصية المختصرة mask في CSS أجزاءً من عنصر باستخدام صور أو تدرّجات لونية كطبقات قص. يجمع هذا الخيار بين السمات الفرعية، مثل mask-image وmask-position وmask-repeat، لإنشاء تأثيرات إخفاء مرئية معقّدة.
يمكنك الاطّلاع على مزيد من المعلومات في صفحة MDN الخاصة بالسمة mask.
@media (scripting)
تختبر ميزة الوسائط scripting ما إذا كان تفعيل البرمجة النصية من جهة العميل (مثل JavaScript) متاحًا في سياق المتصفح. يتيح ذلك استهداف بيئات تتضمّن JavaScript نشطًا أو لا تتضمّنه باستخدام أنماط التحسين التدريجي.
يمكنك الاطّلاع على مزيد من المعلومات في مرجع MDN لميزة وسائط النصوص البرمجية.
URL.canParse()
تتحقّق الطريقة الثابتة URL.canParse() مما إذا كانت السلسلة المحدّدة تمثّل عنوان URL صالحًا وقابلاً للتحليل (مع عنوان URL أساسي اختياري) بدون عرض استثناء، ما يسهّل عملية التحقّق من صحة عنوان URL في وقت التشغيل قبل إنشاء عناصر URL.
يمكنك الاطّلاع على تفاصيل التنفيذ في مستندات MDN حول URL.canParse.
Storage Access API
توفّر Storage Access API آلية لطلبات الوصول إلى ملفات تعريف الارتباط ومساحة التخزين غير المقسّمة من المحتوى المضمّن على مواقع إلكترونية مختلفة ضمن <iframe> تابعة لجهات خارجية، ما يتيح المصادقة والتفاعلات المستندة إلى الحالة على مستوى نطاقات مختلفة.
يمكنك الاطّلاع على التفاصيل في صفحة MDN الخاصة بواجهة برمجة التطبيقات Storage Access.
الخاتمة
يُرجى إخبارنا إذا فاتنا أي شيء متعلق بـ Baseline، وسنتأكّد من تضمينه في إصدار مستقبلي. إذا كانت لديك أي أسئلة أو أردت تقديم ملاحظات حول Baseline، يمكنك إبلاغنا عن مشكلة في أداة تتبُّع المشاكل.